CSS-尺寸与边框

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