CSS常见样式（二）

边框border-*

• border-width（边框宽度）
• border-style：none, solid（实心）, dashed（短横线），dotted（点线）
• border-color（边框颜色）
• border-radius（边框半径）

一个例子

• border统一写法（宽度，样式，颜色）：border: 1px solid #f00;
• border 分 top right bottom left

border-top: 20px solid #f00;
border-right: 30px dashed #0f0;
border-bottom: 50px solid #00f;
border-left: 10px dotted #0ff;

• 覆盖写法

覆盖写法：需求，其他边都是5px，solid，黑色，只有右边是红色
border: 20px solid #000;
border-right-color: #f00;
border-radius: 20px;

• 关于方向的CSS样式，四种方法一次设定四个方向

以border-width为例

第一种：上右下左全部改成 40px    border-width: 40px;
第二种，上下40px，左右20px    border-width: 40px 20px;
第三种，上80px，下40px，左右 20px    border-width: 80px 20px 40px;
第四种，上80px, 右20px, 下40px, 左10px    border-width: 80px 20px 40px 10px;

border-color: #f00 #0f0 #00f #0ff;

内边距padding

padding也是上右下左四个方向
覆盖写法
padding: 5px;
padding-left: 1px;
一次性给出四个方向的设定

外边距margin

红色部分（background-color）是150+padding，黑色部分是border

border相当于盒子本身，padding就是相当于填充物，设定的高度宽度是瓷器大小，margin是这个盒子和其它盒子的间距

居中

块级元素居中-水平居中。经典的块级元素水平居中的办法

margin: 0 auto;

行内元素居中-水平居中-垂直居中

去除内外边距

外边距的合并

两个盒子的真实距离，不是两个盒子的margin之和，而是两个margin中最大的那个。
不要给两个盒子同时设定margin，把margin的值设定到一个盒子上

外边距的塌陷

TIPS:

什么情况下，padding不会撑开盒子？
当宽度没有设定的时候，padding不会撑开宽度
当高度没有设定的时候，padding不会撑开高度

一个例子

box-shadow（盒子阴影）

overflow（溢出）

visible-不剪切内容，不出滚动条（缺省）
auto-根据内容，决定使用hidden还是scroll
hidden-剪切内容，不出滚动条
scroll-剪切内容，无论如何都出滚动条，很丑

cursor（鼠标样式）

default        pointer（手）        move（移动）        text（文本）

resize  outline（轮廓）

outline：0        none

resize：none