边框+盒子模型

边框

一、边框属性

作用：给元素加上一个边框
第一种：
border-top
border-bottom
border-left
boder-right
三个属性 粗细 线型 颜色
第二种：
border ：粗细 线型 颜色
透明色：transparent

二、轮廓

作用：绘制于元素周围的一条线，位于边框外
属性： 粗细 线型 颜色
粗细：outline-width
线型：outline-style
颜色：outline-color

边框弧度

border-radius: 50%;

三、元素的分类

块级元素：独占一行，对宽高设置有效，如果我们不给宽度的话，撑满整行，如果不给高度，高度会随着内容的变化而变化。
行内元素：设置宽高是无效的，不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
行内块元素：不是独占一行，设置宽高有效，并且可以多个标签存在一行。

可以使用 display 来改变元素的分类

display: inline-block;

inline 行内元素
block 块级元素
inline-block 行内块元素

盒子模型

组成： 内容 内边距（padding） 边框（border） 外边距（margin）

内边距：padding 边框和内容之间的距离

1. 存在一个值 上下左右都是改值
2. 存在两个值 上下一个值 左右一个值
3. 存在三个值 上 左右 下
4. 存在四个值 上右下左

可以单独的去设置 例如

padding-top: 10px;上内边距
padding-bottom: 20px;下内边距
padding-left: 30px;左内边距
padding-right: 40px;右内边距

外边距：margin 元素和元素之间的距离

1. 存在一个值 上下左右都是改值
2. 存在两个值 上下一个值 左右一个值
3. 存在三个值 上 左右 下
4. 存在四个值 上右下左

依旧可以单独的去设置 例如

margin-top: 10px;上内边距
margin-bottom: 20px;下内边距
margin-left: 30px;左内边距
margin-right: 40px;右内边距

切记：border：10px 20px 30px 40px
border 不可以这样取值

今天就分享到这了，如有错误，可以提出，我会加以改正！