css盒子模型之边框

目录

本质

盒子模型组成

边框（border）

表格的细线边框

边框会影响盒子实际大小

内边框

内边距复合写法

外边框（margin）

典型应用

外边距合并

嵌套快元素垂直外边距的塌陷

清除内外边距

---

本质

1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用css设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装东西

网页布局的核心本质：就是利用css摆盒子

盒子模型组成

所谓盒子模型：就是把html页面当中的布局元素看作一个矩形的盒子，也就是一个盛装内容的容器，它包括：边框、外边框、内边框、和实际内容

​

​

边框（border）

border可以设置元素的边框。边框有三部分的组成：边框宽度（粗细）边框样式 边框颜色

​border : border-width || border-style || border-color​

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

border-style的选项

​

​

边框的复合形式：

​border:1px solid red;​没有顺序

边框分开写法：

​bored-top:1px solid red;​只设置上边框为红色，其余边框为蓝色

top 上 bottom 下 right 右 left 左

表格的细线边框

border-collapse属性控制游览器绘制表格边框的方式。它控制相邻单位格的边框

语法：

​border-collapse:collapse;​

collapse单词是合并的意思

border-collapse:collapse;表示相邻边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方式解决：

1. 测量盒子大熊的时候，不量边框
2. 如果测量的时候包含边框

内边框

padding属性用于设置内边距，即边框与内容之间的距离

padding属性（简写属性）可以有一到四个值

内边距复合写法

值的个性	表达意思
padding:5px;	代表上下左右都有5像素内边距
padding:5px 10px;	代表上下内边距是5像素 左右内边距是10像素
padding:5px 10px 20px;	代表上内边距5像素 左右内边距10像素 下内边距20像素
padding:5px 10px 20px 30px;	上是5像素 右是10像素 下20像素 左是30像素 顺时针

指定内边距之后：

• 内容和边框有了距离，添加了内边距
• padding影响了盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

所以小米侧边栏这个案例，文字距离左侧的距离不应该用text-indent（规定首行缩进）这样不准确

如果盒子没有宽度和高度，此时padding不会撑开盒子大小

p是块内元素，快元素宽度默认是容器（父级元素）的100%

外边框（margin）

外边距用来控制盒子和盒子之间的距离

属性	作用
margin-left	左外边框
margin-right	右外边框
margin-top	上外边框
margin-bottom	下外边框

margin简写方式代表的意义跟padding完全一致

典型应用

外边距可以让块级盒子水平居中，但必须要满足两个条件：

1. 盒子必须指定了宽度
2. 盒子的左右外边距都设置为auto

​.header{width:960px;margin:0 auto;}​

常见的写法，以下三种都可以：

• margin-left:auto;margin-right:auto;
• margin:auto;
• margin:0 auto;

以上就是让块状元素水平居中，行内元素或者行内块元素水平中给其父元素添加text-align:center​即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是上下外边距之和，而是取两个值中的较大者，这种现象叫做相邻块元素垂直外边距的合并

解决方案是：尽量只给一个盒子添加margin值

嵌套快元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

​

​

解决方法:

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow：hidden

这里涉及的是标签之间的逻辑问题，子标签是父标签的content，想给子标签进行内容排版不应该为子标签设置margin而应该设置text-indent等问题

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题，后面再总结

清除内外边距

网页元素很多都带有默认的内外边距，而且不同游览器默认的也不一致，因此我们在布局前，首先要清除下元素的内外边距

    <style>
        /* 这句话也是我们css的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>

注意：行内元素是为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内快元素就可以了