css布局——盒子模型

目录

二.盒子模型

1.边框

boder-style 常用属性值

效果展示：

 边框会影响盒子实际大小

2.内边距

效果展示：

 内边距的简写

内边距会影响盒子

外边距

外边距的典型应用

外边距的合并

1.相邻块元素垂直外边距的合并

2.嵌套块级元素垂直外边距的塌陷

清除内外边距

谢谢观看！！！我们下期再见！！！

---

前言：

1.看透网页布局的本质

网页布局的过程：

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

网页布局核心：利用css摆盒子

2.盒子模型（Bxo Model）组成

所谓盒子模型九十八HTML页面中的布局元素看作是一个承装内容的容器

css盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框，内边距，外边距和实际内容

二.盒子模型

1.边框

border可以设置元素的边框由三部分组成：边框宽度，边框样式 边框颜色 

语法：

div {
  border: border-width border-style border-color;
}

例如： 

div {
 boder: 1px solid red;
}

可以分开写：

div {
 boder-width: 2px;
 boder-style: solid;
 boder-color: pink;
}

属性	作用
border	定义边框的宽度
boder-style	定义边框样式
boder-color	定义边框颜色

    注意：

• 边框的默认颜色为transparent透明色
• 顺序可倒

boder-style 常用属性值

属性值	解释
none	无边框（默认）
solid	实线边框
dashed	虚线
dotted	点线
double	双线

边框的分开写法：

border-top| bottom | left | right：                                                        

分别设置上下左右边框

效果展示：

 边框会影响盒子实际大小

边框会增加盒子实际大小。

 处理方法：

1. 测量时不量边框
2. 用width | height 减去边框的宽度

---

2.内边距

padding属性用于设置内边距，即边框与文字的距离

语法：

div {
  padding: 10px 20px 14px 13px;
}

内边距属性：

属性	说明
padding	设置内边距
padding-top	上边距
padding-right	右边距
padding-bottom	下边距
padding-left	左边距

效果展示：

 内边距的简写

值的个数	表达意思
padding：5px；	上下左右都有5px的内边距
padding：5px 10px	上下内边距5px 左右内边距10px
padding：50px 10px  20px；	上内边距50px 左右内边距10px 下内边距20px
padding： 5px 10px 15px 20px	按照 上，右，下，左 的顺时针顺序依次的内边距

内边距会影响盒子

当我们给盒子指定padding值之后，发生了两件事

1. 内容和边框有了距离，添加里内边距
2. padding会影响盒子大小（也就是说如果盒子已经有了宽度和高度，此时再指定内边距会撑大盒子）

解决方案：

1. 用height width 减去内边距的大小
2. 如果盒子没有指定width height 属性则此时padding不会撑大盒子

外边距

margin属性用于设置外边距，即控制盒子与盒子间的距离

语法：

div {
  margin-top: 10px;
}

外边距的属性：

属性值	作用
margin	定义外边距
margin-top	定义上外边距
margin-right	定义右外边距
margin-bottom	定义下外边距
margin-left	定义右边距

margin也有简写，简写规则和padding一样

外边距的典型应用

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

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

语法：

div {
 margin: 0 auto;
}

第一个值可以为任意值

注意：以上方法是让块级元素居中的方法，行内元素或行内块的水平居中只需给父元素添加：

text-align：center；即可

外边距的合并

使用margin定义块元素的垂直外边距（margin-top|bottom）时，可能会出现外边距的合并

主要有两种情况：

1. 相邻块元素垂直外边距的合并（同级元素）
2. 嵌套块级元素垂直外边距的塌陷（父子级）

1.相邻块元素垂直外边距的合并

当上下相邻的两个块级元素（同级）相遇时，如果上面的元素设置了下外边距margin-bottom，下面的元素有上外边距margin-top则它们之间的垂直间距不是margin-buttom与margin-top的和，而是margin-top和margin-bottom之间哪个大就取哪个。这一现象被称为相邻块级元素垂直外边距的合并

 解决方案：

尽量只给一个盒子添加margin属性

2.嵌套块级元素垂直外边距的塌陷

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

 解决方案：

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

但是1和2会扩大盒子推荐3

还有比如：浮动，固定，定位等都可以后期总结

---

清除内外边距

* {
 padding: 0;
 margin: 0;
}

因为网页元素很多都自带有默认边距，所以在布局以前首先清除一下内外边距

---

谢谢观看！！！我们下期再见！！！