盒子模型

作用

    进行网页布局

网页中盒子的组成

1. border（边框）
2. padding（内边距）
3. margin（外边距）

1.Border（边框）

☞ border-width：        边框宽度

☞ border-style：        边框样式

        ◆  solid        边框为实线

        ◆  dotted      点线

        ◆  dashed    虚线

☞ border-color：       边框颜色

div{
width:300px;
height:300px;
border-width:1px;
border-style:dashed;
border-color:red;
}

☞border另外一种写法

div{
width:300px;
height:300px;
border-top:1px solid green;
border-left:1px dotted pink;
border-right:1px dashed black;
border-bottom:1px solid red;
}

☞ 单独设置边框样式：

border-top-width:1px;
border-top-style:solid;
border-top-color:green;

border属性联写

border：solid 1px red;

注意：属性联写的时候没有先后顺序限制，边框颜色、边框宽度可以不写

表单优化写法：

<label for="username">
用户名：
</label>
<input type="text" class="username" id="username">

表格单元格合并：

        border-collapse:collapse    设置表格边框合并（适用于表格）

padding（内边距）

        padding-left:               左边距

        padding-right:             右边距

        padding-top:               上边距

        padding-bottom:         下边距

属性联写：

        Padding: 10px;                                           上，右，下，左的距离为10px

        Padding: 10px 20px;                                  上下10px     左右20px

        Padding: 10px 20px 30px                          上10px     左右20px     下30px

        Padding: 10px 20px 30px 40px;                上10px， 右20px ， 下30px， 左40px

.one{
width:300px;
height:300px;
border:1px solid red;
padding:10px 20px 30px;
/*padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;*/
}

        内边距：设置内容距离盒子边框之间的距离

盒子大小计算

☞ 边框可以影响盒子大小

☞ 内边距影响盒子大小

宽度=内容宽度+左右边框+左右内边距

注意：以后进行页面盒子布局的实现，如果给盒子设置了内边距，对应的要将内容宽度或者高度减去相应的值。

盒子大小影响的特殊地方

     继承的盒子在父盒子宽度范围内，padding值不会影响该盒子大小。

外边距（margin）

设置盒子与盒子之间的距离

        Margin-left：

        Margin-right：

        Margin-top：

        Margin-bottom：

        Margin: 10px                                    上 右 下 左 10px

        Margin: 10px 20px                           上下10px  左右20px

        Margin: 10px 20px 30px                  上10px 左右20px 下30px

        Margin: 10px 20px 30px 40px         上10px  右20px  下30px  左40px

☞ 当两个盒子垂直显示的时候，外边距以设置的最大值为准（外边距合并的第一种情况）

☞ 外边距塌陷（有难问题）

        ◆给父盒子设置边框

        ◆给父盒子设置overflow:hidden;

给父元素设置了overflow：hiddenh会触发Bfc
    Bfc   “格式化上下文”
    http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

注意：

     行内元素不要给上下的margin和padding

     上下margin和padding会被忽略

     左右margin和padding会起作用

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。