- 盒子的组成
-
内容(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
- 去掉搭建结构时不需要的背景颜色