选择器优先级
判断
根据选择器的权重（值）进行优先级判断
id 选择器 100
类/伪类 选择器 10
标签选择器 1
注意：
1.组合选择器的权重，由各个选择器的权重相加得到
2.选择器的优先级与书写顺序无关，只看权重
3.行内样式的优先级最高
尺寸与边框
尺寸
尺寸单位： px 像素，最常用的单位，也是游览器默认单位% 百分比 占据父元素对应属性的占比-----------------以下为绝对单位，不常用----------------
in 英寸 1 in = 2.54 cmpt 镑 1 pt = 72/1 incm 厘米mm 毫米注意： css 中的尺寸单位是不能省略的 0 除外
尺寸属性： 作用：
改变元素的宽度和高度
属性 width height
取值为数值，单位为px 或 %
使用：所有的块级元素可以设置宽高
默认情况下宽度与 父元素保持一致，
高度由内容决定；
所有的行内元素不可以设置宽高，大小由内容决定
内容溢出处理：属性： overflow
取值： 1.visible 默认值，溢出部分可见
2.hidden 溢出部分隐藏，不可见
3.soroll 设置内容滚动显示，显示滚动条
4.auto 自动，当内容溢出时，
自动添加滚动条并且可用
注意：
scroll 表示显示水平和垂直方向的滚动条，
不管是否真的需要
auto 根据内容需要，
添加水平或者垂直方向的滚动条
颜色
颜色取值： 英文单词 red green blue…取值十六进行 #aabbcc每两位一组代表一种三原色，
三组分别对应红绿蓝
每一位取值范围 0-9 a-f
短十六进行 #abc由三位组成，每一位就代表一种三元色
游览器在渲染时会自动对每一位进行重复，
补全成六位的十六进行 #abc = #aabbcc
Css 提供的颜色表示法rgb（r,g,b）每个值取值 0 – 255
红色 rgb（255,0,0）#f00 red
Css 提供的颜色表示法rgba（r,g,b,alpha） 颜色取值0 – 255
alpha 表示透明度 取值0-1 （透明-不透明）
边框
属性 border取值 border-width 宽度border-style
设置边框线的样式，取值
Solid 实线Dashed 虚线Dotted 点线Double 双线（不常用）boreder-color 颜色
transparent 表示透明色
特殊用法取消边框 border ：none；
单边框设置：border 属性用来设置 上右下左
四个方向的边框
四个方向单独设置边框：
Border-top ： 5px solid red；
Border-right： 10px solid green；
Border-bottom：10px solid green；
Border-left：10px solid green；
网页三角标制作 元素尺寸为0为元素添加四个方向的边框设置其中三条边框颜色为透明
圆角边框
属性： border-radius
取值： px 或 %
作用： 将边框的直角变成圆角
例子：
border-radius ： 10px；
表示四个角都按照10px的半径取生成圆角
border-radius： 5px 10px 15px 20px；
四个值代表了上右下左四个角
border-radius：10px 20px；
第一个值表示上下，第二个值表示左右
border-radius 5px 10px 15px；
第四个值默认跟第二个值一致
注意：边框圆角在元素不设置边框的情况下依然有效，
可以通过设置50%
呈现圆形或椭圆形，修改元素形状
边框阴影
属性：box-shadow
取值：h-offset v-offset blur spead color;
h-offset : 表示阴影的水平偏移距离
（取值数字 正数向右偏移 负数向左偏移）
v-offset : 表示阴影的垂直偏移距离
（取值数字 正数向下偏移 负数向上偏移）
blur： 阴影的模糊程度
（取值数字 值越大越模糊）
spread ：阴影扩大或是缩小的距离
（取值数字 正数会扩大 负数会收缩）
color： 设置 阴影颜色
游览器坐标系
默认游览器左上角为原点，
向右向下为x轴y轴的正方形，
向左向上为负方向
盒模型/框模型
1.元素皆为框
作用：
元素在文档中占据尺寸的计算方式
组成：外边距margin 边框border 内边距 padding 内容尺寸
计算方式：
标准盒模型：
最终width = 左右外边距+左右边框+左右内边距+内容宽度
最终height= 上下外边距+上下边框+上下内边距+内容高度
（了解）怪异盒模型：
元素内容宽度 = 左右内边距+边框+内容
外边距：
元素边框与边框之间的具体
语法：
属性 margin（2） 取值：
margin ：10px ;
表示上右下左四个方向都设置10px外边距
margin : 10px 20px;
表上下为10px 20px
margin : 10px 20px 30px;
表示上右下左四个方向的外边距
（3）特殊值：
margin : 0 auto；
表示自动，可以用来设置元素居中
（4） margin 取值可以分为正负
正值： 代表正方向
负值： 代表负方向
margin 设置为负值，元素将进行偏移
（5）四个方向单独设置外边距
margin-top 设置上方的外边距
margin-right 设置右边的外边距
margin-bottom 设置底部外边距
margin-left 设置左边外边距
取值同样是数值，取一个值
（6）具有默认外边距的元素：
body， h1 , h2 , h3 , h4 , h5 , h6 , p , ul , ol{
margin：0；#取消默认外边距
}
内边距padding
元素的内容与元素边框之间的距离
通过设置width height 属性，
实际上设置的是元素内容的大小
使用：
属性 padding取值 数值，可以给定 1/ 2/ 3/ 4/个值Padding： 2px；
上右下左四个方向都为2px的内边距
Padding： 10px 20px；
Padding： 10px 20px 30px；
Padding： 10px 20px 30px 40px；
具有默认内边距的元素ol, ul, input(文本框，密码框，按钮会存在)
ol, ul, input{
padding：0；
}
页面开发时，清除游览器的默认边距
body，ul, ol, h1, h2, h3, h4 ,h4 h5 ,h6 ,p{
magin:0;
Padding:0;
}
input 可以根据需求单独设置
盒模型属性的支持度
盒模型属性：margin border padding width height块元素对盒模型属性完全支持行内元素对盒模型属性部分支持：
行内元素可以设置 左右 的内外边距
不可以设置 宽高 及 上下外边距
元素类型转换
属性: display
取值：
inline 行内元素
block 块元素
inline-block 行内块
none 元素隐藏
文本居中显示
水平居中：text-align：center；
垂直居中：设置隐藏 高度height与行高
line-height：保持一致
