当前位置:  首页  >  前端开发  >  HTML

通过css布局完成div位置的存放实例-html教程

CSS+DIV将数据封装到div中,页面中都是有很多div组成的,通过css布局(通过css属性布局)完成这些div位置的存放,一个div就是一个盒子。边框border:{--left--right--top--bottom};#div_1{border-top:1pxsolid#ccc;bord
CSS+DIV

将数据封装到p中,页面中都是有很多p组成的,通过css布局(通过css属性布局)完成这些p位置的存放,一个p就是一个盒子。

边框   border:{

      --left

      --right

      --top

      --bottom

    };

#p_1{

    border-top:1px solid #ccc;

    border-bottom:1px dashed #ccc;

    border-right:1px dotted #ccc;

    border-left:1px double #ccc;

};

solid:实线

dashed:虚线

dotted:点线

double:双线

内边距/内填充

属性:padding{

      --top

      --bottom

      --right

      --left

};

padding:20px 20px 20px 20px;

外边距

margin 属性{

      --top

      --bottom

      --right

      --left

};

margin:20px 20px 20px 20px

在p中,如果margin是0,px,为什么还要空白?那空白就是body本身距离浏览器边框的距离。

所以要设置body{margin:0px};

浏览器解析body的方式不同,造成边宽边窄不同。

以上就是通过css布局完成div位置的存放实例的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有