1. 选择器
选择器优先级 : (权重) !importan > 行内式 > ID选择器 > 类选择器 > 标签选择器 > 浏览器默认值
标签选择器 div {样式:值;}
类选择器 .类名 {样式:值;}
ID选择器 #ID {样式:值}
子代选择器 div > span {样式:值;} 会改变直接子元素的样式
后代选择器 div span {样式:值;} 标签之间是嵌套关系
通配符选择器 *{样式:值;}
交集选择器 div.p{样式:值;}
并集选择器 div1,div2,div3 {样式:值;}
属性选择器 [title="name"]{样式:值;}
兄弟选择器: div1+div2{样式:值;}
伪类选择器: a:link{ } 未访问的效果
a:visited{ } 访问过的效果
a:hover{ } 鼠标移动到元素上
a:active{ } 选中的元素
a:focus { } 获取焦点
li:first-child{}
li:last-child{}
li:nth-child(2){}
2. css样式类型
外联式
内嵌式
行内式（内联式）
3. 行高 line-height
行高 = 文字大小+上间距+下间距
行高单位 px em 1 em = 16px
特点一 、 给单独的一个标签设置行高
px: 设置的行高与文字字体大小无关
em: 行高 = 设置的行高 * 文字大小
百分比 : 行高 = 设置的行高 * 文字大小
不带单位 : 行高 = 设置的行高 * 文字大小
特点二 、 给父元素设置行高 看子元素的行高情况
父 px: 子元素行高 = 父元素设置的行高值 (继承)
父 em : 子元素行高 = 父元素设置的行高值* 父元素的文字大小
父 百分比 : 子元素行高 = 父元素设置行高值 * 父元素文字大小
父不带单位 : 子元素行高 = 父元素设置行高值 * 子元素文字大小
4. 盒模型
margin : 移动盒子的位置(盒子整体) | 外边距不会改变盒子大小
margin-left margin-right margin-top margin-bottom
垂直外边距塌陷 解决: 给父元素设置边框
给父元素设置: overflow:hidden;( 设置overflow:hidden，该属性值触发了元素的bfc(格式化上下文)
垂直外边距合并: 垂直方向上的外边距会以最大值为准
padding: 特点: 移动盒子中内容的位置 | 可以改变盒子大小 | 边框也可以改变盒子大小
属性连写: padding :10px; 上下左右内边距都为10px
padding: 10px 20px ; 上下为10px 左右为20px
padding : 10px 10px 10px 10px; 上 右 下 左
border : border-color 边框颜色
border-width: 10px ;
border-radius 边框圆角
border-style : solid 实线 dashed 虚线 none 没有边框 dotted 边框为点
属性连写: border: 1px solid red ;
border-top : 5px dashed yellow ;
去掉边框: border:0 ; border-style:0 none;
去掉表单中的 轮廓线: outline-style: none ;
边框合并: border-collapse:collapse; ( 该属性只适用于表格标签 )
网友评论