一、选择器的优先级：考虑选择器的权重，数值越大优先级越高
标签selector： 1
类选择器： 10
ID选择器： 100
行内样式： 1000
群组选择器不参与计算
后代和子代选择器由各种选择器权值相加得到最终的优先级
伪类选择器的权值与类选择器保持一致，都是10
二、尺寸单位与颜色取值
1.尺寸单位
px：像素单位，浏览器默认单位
%：百分比，参照父元素对应属性的值计算
in：inch 英寸 1 inch = 2.54 cm
pt：磅 1 pt = 1 / 72 in
cm、mm
em：默认字体大小为16px，1 em = 16px；
2.颜色取值
英文单词：blue、red、black、orange......
rgb(r,g,b)：根据红绿蓝三原色组合呈现不同的颜色，取值范围0~255，值越大，颜色越饱和
红色：rgb(255,0,0) ; 绿色：rgb(0,255,0); 蓝色：rgb(0,0,255); 黑色：rgb(0,0,0); 白色：rgb(255,255,255)
rgba(r,g,b,alpha) alpha：透明度取值范围 0（透明）~ 1（不透明）
颜色的十六进制表示法：把三原色的十进制范围0-255转换成十六进制表示，以#开头，跟上6位16进制，每两位为一组表示一种三原色
短十六进制表示颜色：以#开头，跟上3位16进制，浏览器解析时，自动对每一位进行重复，补全成长十六进制
三、HTML标签分类
1.块级元素：body、h1-h6、div、ul、ol、li、table、form、p
特点：独占一行，不与其他元素共行，可以手动调整宽高，默认块元素的宽度与父元素保持一致
2.行内元素：span、label、i、b、s、u、sup、sub、strong
特点：可与其他元素共行显示，不可以手动调整宽高大小，实际大小由元素的内容多少决定
3.行内块元素：img、input、button
特点：可以共行显示，可以手动调整宽高
四、尺寸与边框
1.尺寸
属性：width、height
溢出：内容超出元素尺寸范围，默认溢出部分可见
溢出处理：属性overflow
值：visible 默认值，溢出部分仍然可见
scroll 添加滚动条，包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条
auto 自动添加滚动条，哪个方向发生内容溢出就添加该方向上的滚动条
hidden 隐藏溢出部分
2.边框 border：border-width border-style border-color 三个值分别为：宽度、样式、颜色，缺一不可
border-width：取像素值，设置四个方向边框宽度
border-style：边框样式 solid：实线 dashed：虚线 dotted：点线 double：双线
border-color：边框颜色，取颜色值
注意：使用border属性为元素设置边框是同时设置四个方向的边框；取消默认边框，border：none；
单边框设置：
border-top：设置顶部边框 border-right：设置右边边框
border-bottom：设置底部边框 border-left：设置左边边框
取值同border
3.网页三角标制作：
<style> 标签选择器给div添加样式 div{ width:0; 宽0 height:0; 高0 border-top:20px solid red; 边框顶部红色，其他方向透明色 border-right:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid transparent; 边框四个方向必须等宽 } </style> </head> <body> <div></div> </body>
4.轮廓线 outline：width style color
轮廓线围绕在元素内容区域四周，与边框类似，但轮廓线在网页中不占位
取消轮廓线 outline：none；
5.圆角边框 border-radius：像素值或百分比；
border-radius：20px；表示四个角都以20px做圆角
border-radius：20px 40px；按照上右下左（顺时针方向）设置圆角，从左上角开始取值，给两个值的时候，上下一致，左右一致
border-radius：10px 20px 30px；取三个值，缺少的第四个值与第二个值保持一致
border-radius：10px 20px 30px 40px；分别设置四个角的圆角程度
border-radius：50%； 参照当前元素的尺寸进行计算，若元素本身为长方形则会变成椭圆，若为正方形则变成圆
6.盒阴影 box-shadow：offset-x offset-y blur spread color；
offset-x：阴影的水平偏移距离，取像素值
offset-y：阴影的垂直偏移距离，取像素值
blur：阴影的模糊程度，取像素值，值越大越模糊
spread：阴影的延伸距离（可选），取像素值，可以扩大阴影的范围
color：设置阴影颜色，默认为黑色
注意：不管是浏览器窗口中还是元素本身都存在坐标系，都以左上角为（0，0）点，向右、向下代表X轴和Y轴的正方向
五、盒模型（框模型） 在css中认为一切元素都是框，都是矩形区域，可以计算元素在文档中的实际占位情况
盒模型组成：margin（外边距）、border（边框）、padding（内边距）、content（元素的宽高尺寸）
实际计算：最终宽度=左右外边距+左右边框+左右内边距+width
最终高度=上下外边距+上下边框+上下内边距+height
1.margin：元素边框与其他元素边框之间的距离，取像素值
margin：10px； 表示设置四个方向都为10px的外边距
margin：10px 20px； 表示上下外边距为10px，左右外边距为20px
margin：10px 20px 30px； 缺少的第四个值和第二个值保持一致
margin：10px 20px 30px 40px； 上下左右外边距依次为10、20、30、40px
2.单方向外边距的设置，只给当前方向设置外边距，给一个值，取像素值
margin-top：上方外边距
margin-right：右边外边距
margin-bottom：底部外边距
margin-left：左边外边距
3.特殊取值
margin：0；设置元素外边距为0，常用于初始化页面样式，取消一些元素的默认外边距
margin：0 auto；设置左右外边距自动，用来实现元素的居中效果。auto只对左右外边距起作用。
取负值：会移动元素的位置，负值表示向上向左移动元素，常用页面元素位置的微调
4.自带默认外边距的元素：body、h1-h6、p、ul、ol