- 盒子的组成
-
内容（width、height） 边框（border） 内填充（padding） 外填充（margin）
- Padding 内填充 内补丁 内补白
-
特性：内容和边界之间的距离，padding会撑大盒子，padding区域会出现背景颜色和背景图片，不能设置负值。
一个值 代表上下左右都是
两个值 代表 上下 左右
三个值 代表 上 左右 下
四个值 代表 上 右 下 左
可以单独设置某一个方向padding-left/right/top/bottom
- Margin 外填充 外补丁 外补白
-
特性：盒子与盒子之间的距离，margin不会撑大盒子（如果单独拿一个盒子来说margin不会撑大盒子，如果一个大盒子里放置多个小盒子margin的存在会影响大盒子一排摆放小盒子的个数，此时可以说margin会影响盒子的大小），margin区域不会出现背景颜色和背景图片，能设置负值。
一个值 代表上下左右都是
两个值 代表 上下 左右
三个值 代表 上 左右 下
四个值 代表 上 右 下 左
可以单独设置某一个方向margin-left/right/top/bottom
- 盒子实际宽高的算法
-
实际宽=（border-left）+（padding-left）+width+（padding-right）+（border-right）+（margin-left）+（margin-right）
实际高=（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-top）+（margin-bottom）
- 怪异盒模型
-
在怪异盒模型里border和padding是不会撑大盒子的，盒子的大小就是我们给定的宽高
标准盒模型与怪异盒模型之间转换的属性是box-sizing：border-box（怪异盒）/content-box(默认值 标准盒)
如果html的基本结构中不存在<!Doctype html>ie浏览器会自动触发怪异盒模型
- Margin-top的传递（子元素的margin-top传递给父元素）解决方法：
-
A：给父元素添加border 会撑大盒子
B：给父元素添加padding 会撑大盒子
C：给父元素添加float float的元素会脱离正常文档流
D：给父元素添加overflow:hidden; 属性 内容溢出会被裁切
E：给元素本身添加float属性 float的元素会脱离正常文档流
F：给元素本身添加display:inline-block/table-caption;
- 上下margin的计算方式
-
如果两个元素都没有float 上下margin会发生重叠，取较大值
两个元素都float时，上下margin不会发生重叠， 算加法
- 圆角属性border-radius（css3.0低版本浏览器不支持）
最多可以设置8个值
一个值代表 这四个角都是此值 （如果值大于等于宽高一半或者用50% 可以形成一个圆形）
两个值 左上右下 右上左下
三个值 左上 右上左下 右下
四个值 左上 右上 右下 左下
反斜杠的值代表y轴方向的弧度
- 页面制作
- 创建html页面（首页一般叫index.html）
- 创建css样式表
- 图片截图（切图）
- 在css里重置样式：
*{margin:0; padding:0;}
A{text-decoration:none;}
Li{list-style:none;}
Img{vertical-align:middle;}
- 网页的外围结构
- 添加对应内容设置对应css
- 去掉搭建结构时不需要的背景颜色
3547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
