1.基础选择器的优先级
?权值：标识当前选择器的重要程度，权值越大优先级越高。
???元素选择器 1
???类选择器 ??10
???伪类选择器 10
???ID选择器 ??100
???内联样式 ??1000
?选择器的权值加到一起，大的优先
?权值相同 以后定义的为主
2.尺寸与边框
?1.单位
???1.尺寸单位
?????1.px 像素 1024*768px
?????2.in 英寸 1in=2.54cm
?????3.pt 磅 1pt=1/72in 用于描述文字的单位
?????4.cm 厘米
?????5.mm 毫米
?????6.em 相对于父元素乘以倍数（12px*2em=24px）
?????7.rem 相对于根元素（body）
?????8.% 百分比
???2.颜色单位（颜色取值）
?????1.rgb(r,g,b)
???????r:red
g:green
b:blue
r,g,b:取值0-255
?????2.rgb(r%,g%,b%)
?????3.rgba(r,g,b,alpha)
???????alpha:透明度，0-1之间的小数，值越大越不透明。
ex:
rgb(0,0,0,0.3)
?????4.#rrggbb
???????由0-9和a-F组成
#ffffff
#000000
#dddddd
?????5.#rgb是上面的缩写
???????#ffffff-->#fff
#000000-->#000
#dddddd-->#ddd
?????6.颜色的英文单词
???????red,green,gray,purple,blue...
?2.尺寸
???1.作用
?????改变元素的宽度和高度
???2.语法
?????属性：
?????宽度：width
???????????min-width 最小宽度
???max-width 最大宽度
?????高度：height
???????????min-height 最小高度
???max-height 最大高度
???3.注意：页面中哪些元素能修改尺寸
?????1.所有的块级元素都允许修改尺寸
???????div,p,h1,h2...,结构标记，ul,ol,dl,dt,dd
?????2.行内块元素允许设置尺寸
???????表单控件元素（单选按钮和复选框除外）
?????3.本身具备width和height属性的元素
???????img,table
?????大部分的行内元素是无法修改尺寸的。
???4.溢出处理
?????当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
?????属性：
????????overflow,overflow-x,overflow-y
?????取值：
????????1.visible 可见的，默认值，溢出可见
2.hidden ?隐藏的，溢出的内容全部隐藏，不可见
3.scroll 显示滚动条，溢出时，可用
4.auto 自动，溢出时才显示滚动条并可用
?????练习：
???????完成如图所示效果
边框 border:1px solid #000;
?3.边框
???1.边框简写方式
?????属性：
???????border:width style color;
??????width:边框的宽度（粗细）
??????style:边框的样式
???????取值：solid 实线
?????dotted 虚线（圆点）
?????dashed 虚线（线条）
??????color:边框颜色（transparent透明色）
以上方式是同时设置四条边框的样式。
取消边框：border:0/none;
???????练习：
?网页中创建一个div元素，设置高宽各300px,并且设置四条边框为1px的宽度，橙色（orange）的实线条。
???2.单边框定义
?????设置四条边框中的某一个边框。
?????属性：
??????border-top/bottom/left/right:width style color;
???3.单属性定义
?????设置四条边框的某一个属性
?????属性：
??????border-width/style/color:值;
???4.单边单属性
?????设置某一条边的某一个属性
?????border-方向-属性：值;
????????????方向：top/bottom/left/right
????属性：width/style/color
????ex:
?????border-top-color:red;
????练习：
??????1.设置四个方向的边框样式都为虚线
??????2.设置下边框的颜色为黄色
?4.边框倒角
???将元素的直角倒成圆角。
???属性：border-radius
???取值：
??????1.以px为单位的数字
??????2.百分比 x%(设置圆形 50%)
???单角设置：
??????border-top-left-radius:左上角
??????border-bottom-left-radius:左下角
??????border-top-right-radius:右上角
??????border-bottom-right-raidus:右下角
?5.边框阴影
???属性：box-shadow
???取值：h-shadow v-shadow blur spread color ?inset
???h-shadow:阴影的水平偏移距离，必须值
????????????取值为正，阴影向右偏移
????取值为负，阴影向左偏移
???v-shaodw:阴影的垂直偏移距离，必须值
????????????取值为正，阴影向下偏移
????取值为负，阴影向上偏移
???blur:阴影模糊距离（可选值）
???spread:阴影尺寸（可选值）
???color:阴影颜色（可选值）
???inset:将默认的外阴影改为内阴影（可选值）
???练习：
?????1.设置圆形的外发光效果。
?????2.在溢出练习基础上，给每幅图设置5px的圆角，并且鼠标悬停在图片上时，设置向右下方5px的阴影效果，阴影颜色#ddd。
?6.轮廓
???轮廓指的边框的边框，绘制于边框外围的条线。
???属性：
?????outline：width style color;
?????outline:0/none; 取消轮廓
???练习：
?????在页面中创建一个文本框，尝试着取消轮廓，再观察效果。
3.框模型
?1.什么是框模型
???页面的元素皆为框
???框模型：box model盒子模型，定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。
???内边距：元素边框与内容区域之间的空白间距
???外边距：元素与元素之间的空白间距
???框模型默认的计算方式：
??????元素的实际占地宽度=左右外边距+左右边框+左右内边距+width
??????元素的实际占地高度=上下外边距+上下边框+上下内边距+height
?2.外边距
???1.什么是外边距
?????围绕在边框外的空白间距
???2.语法
?????属性：margin 定义四个方向的外边距
???????????margin-top/bottom/left/right单边定义
?????取值：
????????1.以px为单位的数字
2.取值为负
??margin-left
????取值为正，元素往右移动
????取值为负，元素往左移动
??margin-top
????取值为正，元素往下移动
????取值为负，元素往上移动
3.百分比 %
??外边距的值，占父元素的高或宽的比例
4.取值为auto
??自动计算外边距的值
??控制块级元素在水平方向居中对齐。
?练习：
??页面中设置两个div尺寸为200*200，两个div之间的间距为50px,然后设置第二div水平居中显示。
???3.简介写法
?????1.margin:value; 四个方向的外边距
?????2.margin:v1 v2;
???????v1:上下外边距
v2:左右外边距
?????3.margin:v1 v2 v3;
???????v1:上
v2:左右
v3:下
?????4.margin:v1 v2 v3 v4;
??????????????上 右 下 左
???4.自带外边距的元素
?????h1~h6,p,ul,ol,dl,pre,body
?????通过CSS Reset（CSS重写）的方式，来重置具备外边距的元素
?????body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,dt,pre{margin:0;}
???5.外边距的特殊效果
?????1.外边距合并
???????当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中距离较大的那个。
?????2.上外边距溢出
???????在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上。
?1.父元素没有上边框
?2.为第一个子元素设置上外边距时
解决方案：
?1.为父元素增加上边框
???弊端：对父元素的高度有影响
?2.使用父元素的上内边距取代子元素的上外边距
???弊端：对父元素的高度有影响
?3.在父元素的第一个子元素位置处，增加空<table></table>标记
?????3.行内元素以及行内块元素的外边距
???????1.行内元素垂直外边距无效（img除外），左右外边距相遇时会相加
2.行内块元素，设置垂直外边距时，整行元素都跟着发生改变
??????练习：
???????1.创建两个div元素，d1和d2,分别设置不同的背景颜色，尺寸都为200*200；
2.在d2中再添加一个子元素div,id为d3,设置d3的尺寸为100*100，并设置背景颜色；
3.设置d3的上外边距为50px,观察结果。
?3.内边距
???1.什么是内边距
?????元素边框与内容之间的空白间距
?????内边距会扩大元素边框的占地区域
???2.语法
?????属性：
???????padding:value; 四个方向的内边距
padding-top/bottom/left/right:value; 单边设置
?????取值：
???????1.以px为单位的数字
???????2.以%为单位的数字
???3.简洁写法
?????padding:value
?????padding:v1 ?v2
????????????上下 左右
?????padding:v1 ?v2 ?v3;
?????????????上 左右 下
?????padding:v1 v2 v3 v4;
?????????????上 右 下 左（顺时针）
?????练习：
???????创建两个div，d1和d2,尺寸200*200，并设置边框为2px solid #f00;
为d1设置四个方向的内边距为30px，观察两个div效果。
???4.box-sizing属性
?????作用：指定框模型的计算方式
?????取值：
????????1.content-box
??默认值，采用默认的计算方式。
??实际占地宽度=左右外边距+左右边框+左右内边距+width
??????????实际占地高度=上下外边距+上下边框+上下内边距+height
2.border-box
??元素的尺寸，会包含border以及padding的值。
??实际占地宽度=width(包含border和padding)+margin
??实际占地高度=height(包含border和padding)+margin
??????????
CSS-尺寸与边框
原文地址：https://www.cnblogs.com/QiliPING9/p/9027719.html