首先来盗个图
image.png
-
border 盒子边框
基础语法：
border : border-width border-style border-color
或者：
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;
盒子边框写法总述
| 设置内容 | 样式属性 | 常用属性 |
|---|---|---|
| [上下左右]边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
-
表格标题边框线
以前的表格中因为外框和内框的区分会导致有两行表格线非常丑此处可以使用此属性
table{ border-collapse:collapse; } collapse 单词是合并的意思
美容前：
image.png
美容后：
image.png
可以复习下其他表格相关内容
样式文件如下
table{
border-collapse: collapse;
}
th , td{
border: 1px solid red;
padding: 10px;
text-align: center;
}
需要注意一点的内容是 padding 属性是添加在th 和td上的而非table
- 内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
| 值的个数 | 表达意思 |
|---|---|
| 2个 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 2个 | padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 2个 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
- 外边距
常用属性有：
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同如上标。
可以让一个盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素。
2.盒子必须指定了宽度（width）
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
以上代码可以指定水平居中
-
内外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
在这里插入图片描述
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
在这里插入图片描述
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
-
真实宽高计算
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
- 圆角边框
语法格式
border-radius: 50%; 让一个正方形 变成圆圈
-
阴影
语法格式：
box-shadow: 10px 10px 8px 12px #FF44AA inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必填，水平阴影位置，可以为负 |
| v-shadow | 必填，垂直阴影位置，可以为负 |
| blur | 选填，模糊距离 |
| spread | 选填，阴影尺寸 |
| color | 选填，阴影颜色 |
| inset | 选填，外部阴影改为内部 |
案例代码：
box-shadow: 10px 10px 8px 12px #FF44AA ;
效果：
image.png
