CSS学习 4.3

CSS

---

1.盒子模型

1.1组成

边框border，外边距margin，内边距padding，实际内容content

1.1.1边框

border : border-width | border-style | border-color
border-style: dashed虚线
      solid实线
      dotted点线
复合写法：border :2px solid red;没有顺序
边框分开写：border-top/bottom/left/right
合并相邻边框：border-collapse : collapse
边框会影响盒子的实际大小

1.1.2内边距

padding-top/bottom/left/right
复合写法:padding影响了盒子实际大小------用width，height减去两个内边距

1.1.3外边距

盒子和盒子之间的距离
margin-top/bottom/left/right
复合写法：和padding一致，见1.1.2
典型应用：水平居中

• 盒子必须指导宽度
• 左右外边距设置为auto(margin:0 auto;auto)
• 给父元素添加text-align使行内元素或行内块元素水平居中

嵌套块元素垂直外边距塌陷：对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决： 为父元素定义上边框
    为父元素定义上内边距
    为父元素添加overflow:hidder

1.1.4清除内外边距

*{
margin:0;
padding:0;
}
行内元素尽量只设置左右的内外边距

1.1.5去掉li前的项目符号

list-style:none;

2.圆角边框（css3）

border-radius : length(20px);
参数可以是像素也可以是百分比

• 圆形：length为正方形盒子的一半或者50%
• 圆角矩形：高度的一半
• 设置不同的圆角：border-radius:10px 20px 30px 40px顺时针设置
• 分开设置如：border-top-left-radius：20px；

3.盒子阴影（css3）

box-shadow:h-shadow v-shadow blur spread color inset;

4.文字阴影

text-shadow:h-shadow v-shadow blur color

5.浮动

5.1传统网页布局的三种方式

• 标准流（普通流/文档流）
• 1
• 2

浮动：多个块元素一行内排列显示
多个块级元素纵向排列找标准流，横向排列找浮动

5.2左右浮动

选择器{float:left/right }

5.3浮动特性

• 浮动元素会脱离标准流（脱标），不再保留原先的位置
• 多个盒子都设置了浮动，则它们会按属性值一行内显示并且顶端对齐排列，不会有缝隙
• 浮动元素具有行内块元素特性
  若块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，大小根据内容决定，行内元素同理

5.4浮动和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
网页布局第二准则：先设置大小，再设置位置

6.常见的网页布局

注意：一个元素浮动了，其他兄弟元素也要浮动。
浮动盒子只影响后面的标准流，不影响前面的标准流

7.清除浮动

7.1为什么清除浮动

由于浮动元素不再占有原文档流的位置，会对后面元素排版有影响。

7.2清除浮动

选择器 {clear : 属性值；}
属性值：left，right，both
清除浮动的策略：闭合浮动

7.3方法

1.额外标签法（隔墙法）
在浮动元素末尾添加空标签(必须是块元素）< div style = “clear :both”>< /div>
2.父级添加overflow
overflow : hidden/auto/scroll
无法显示溢出的部分
3.父级添加：after伪元素

4.父级添加双伪元素

8.PS切图

• 图层切图：选择图层或合并图层，快速导出为png
• 切片切图：切片工具画出，文件菜单→导出→存储为web设备所用格式
• 切片工具：cutterman插件

9.注意

导航栏一般用li+a的方式
后面还有补充时padding撑开盒子而不是指定宽度
浮动元素重叠问题：父元素要设置高度
浮动的盒子没有外边距浮动问题
行高会继承