css笔记

标准文档流

• 当浏览器解析网页时，遵从从上向下，从左向右的顺序来进行解析
• 块级元素和行内元素的特性，如果元素一旦离开标准文档流，那个这些特性不会存在
• 空白折叠
• 高矮不齐，底边对其
• 单词一旦结束并没有到达边界将自动换行
• 如果单词始终没有空格来表示单词结束，那么单词不会换行

注：让元素脱离标准文档流的方式：1.浮动float; 2.定位position

标准文本流：主要针对的是网页中的文字（a标签和img也会遵从文本流的规则来解析）

标准文档流：主要针对标签

盒子模型

网页中的任何一个标签都相当于的一个盒子模型，而所有盒子模型都有5个必要的属性：width height padding border margin

• width:宽度

• height:高度

• padding:内边距，内容和边框之间的距离

注：

padding的四个方向，padding-top,padding-bottom,padding-left,padding-right

• border:边框

• margin:外边距

注：

1. 塌陷，margin塌陷存在于块级元素之间，如果元素变为行内元素或者行内元素则不会塌陷；如果元素脱离了标准文档流也不会塌陷
2. 通过margin让盒子左右居中：margin: 0 auto;，使用 margin: 0 auto;让盒子居中需要注意：盒子必须要有明确的width，盒子必须处于标准文档流中，margin: 0 auto;是让盒子居中，而不是让盒子里面的文字居中。处理文字用：text-align:center/left/right;
3. 如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border

浮动

float:left/right

浮动的特点：

1. 脱离标准文档流（脱标），元素一旦脱离标准文档流，后面的元素会占据浮动元素原本的位置，元素一旦浮动脱标，那么就不必遵守文档流中的块级元素和行内元素的特性。
2. 元素浮动会脱离文档流，但是不会脱离文本流，所以会产生自围效果。
3. 相互贴靠

浮动带来的影响：

1. 能够让浮动之后的元素布局产生混乱
2. 子元素浮动会对付元素产生影响

清除浮动带来的影响：

1. 给浮动的外出父元素添加高度 不推荐
2. overflow:hidden;
3. clear:both;
4. 隔墙法：外墙法 内墙法（不仅仅可以清除浮动还可以给父元素以高度）

行高和字号

line-height设置行高

font-size设置字体大小

注：文字垂直居中：行高=盒子高度
多行文字垂直居中：padding-top = (盒子高度-总行高)/2,新盒子高度=盒子高度-padding-top。

font字体

font：14px/30px "KaiTi"; 等同于下面三句号：

font-size:14px; 字体大小

line-height:30px; 行高

font-family:"KaiTi", "", ""; 字体族科

超链接美化

• :link 未被访问的链接
• :visited 已访问的链接
• :hover 鼠标悬浮到链接上
• :active 鼠标点击链接时