盒子模型
一、盒子模型
页面布局三大核心，盒子模型、浮动和定位
1.看透网页布局的本质
1.1.网页布局过程
- 准备好网页元素（基本上都是盒子Box）
- 利用好盒子样式，摆放到相应位置
- 向盒子里装内容
利用css摆盒子
1.2.盒子模型的组成
用盒子来封装
border 边框 content内容 padding内边距 margin外边距
2.边框
2.1.border来设置元素的边框：
- 边框宽度： 定音边框粗细 单位px
- 边框样式： solid 实线 dashed 虚线 dotted 点线
- 边框颜色
border-width | border-style | border-color
简写：
border:1px solid red;
2.2.边框分开写法
border-top:1px solid red; 上边框
border-bottom:1px solid red; 下边框
可以利用层叠性来设置不同的特殊样式
2.3.细线边框
border-collpase控制相邻单元格的边框
border-collpase:collpase;
2.4.边框可以影响盒子的实际大小
测量时若包含了边框，盒子长宽要减去边框宽度*2
3.内边距和内容
3.1.padding属性设置内边距
padding-left | padding-right | padding-top |padding-bottom
3.2.padding影响了盒子实际大小
- 若设置了weight/height，再设置了内边距，会撑大盒子 要用weight/height减去盒子的内边距*2
- 若没有设置weight/height的值，则不会撑大盒子
- 按子元素来，不管父元素有没有设置，子元素没有设置就是没有设置
4.外边距
4.1.margin设置外边距
margin-left | margin-right | margin-top | margin-bottom
margin的简写和padding完全相同
4.2.外边距来设置盒子居中显示
- 必须先指定好宽度
- 再
margin:0 auto;/margin:auto;
以上是让块级元素居中显示的方法
让行内元素水平居中只需找父亲：text-aligin:center
4.3.子元素垂直外边距可能会塌陷
- 子元素父元素同时有外边距时，会保持父块的外边距，子元素外边距塌陷下去了
- 浮动、固定，绝对定位的盒子不会有塌陷问题
解决：
- 可为父元素定义 上边框
- 可为父元素定义 上内边距
- 可为父元素添加 overflow:hidden
5.清除内外边距
5.1.布局之前，清除所有边距：
*{
magin：0;
padding;
}
这是CSS的第一行代码
行内元素尽量只设置左右内外边距，不设置上下内外边距
二、综合案例
- 合理地方用合理标签
- 多用语义明显的类名
- 上下边框更常用padding 根据实际情况选择margin还是padding
- 先写出一个个盒子结构，再用css样式去修改布局
三、圆角边框
1.border-radius设置边框圆角
1.1.border-radius:length; 圆与边框的交集形成圆角效果
border-radius:50px; 拿半径为50px的圆和边框进行切割
1.2.将半径设置为边框的一半 就变成圆形了
height=100px； border-radius:50px;
或height=100px； border-radius:50%;
1.3.可以设置二、三、四个位置的不同切割效果border-radius:0 1px 25px 50px;
或者可以设置单个位置的切割效果
border-top-left-radius:50px;
四、盒子阴影
1.box-shadow属性设置盒子的阴影
box-shadow: **h-shadow v-shadow** blur spread color inset；
默认是外阴影，不能写outset可以设置为内阴影
五、文字阴影
1.text-shadow属性设置文字的阴影
text-shadow:**h-shadow v-shadow** blur spread color ;
