框模型

定义元素框出来元素内容内边距边框和外边框的方式
标签是由border（边框），padding（标签内容到边框的距离）
contant （最外面）
三部分组成！

框模型基本样子.PNG
width 和 height 内容区域的宽度和高度
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸.

实际宽度.PNG

边框的重叠

body下的div+id.PNG

head下的CSS渲染div正方形样式.PNG

渲染效果.PNG

外边距 margin

margin （外边距）不属于标签，它只设置外边距，边框距离父标签contant边界的距离，或者距离同级标签边框的距离。
margin 纵向取大的值,横向值相加
外边距：与下一个元素之间的空间量
margin:value
单边设置
margin-top(上)right(右)bottom(下)left(左):value
margin可以取值auto实现水平居中的效果
margin:auto
外边距简写方法：

margin:value(四个方向相同)
margin:value(上下)value(左右)
margin:value(上)value(左右)value(下)
margin:value(上)value(右)value(下)value(左)

display 转化标签的属性，

将行标签转化我块标签，将块转化为行，或者将块转化为内联块。

注意坑点

父子之间用padding，兄弟之间用margin，如果父子之间想用margin，就必需将子标签转化为inline-block；负责margin的参照系会变成父标签的兄弟。

内边距

内边距：内容与边框之间的距离
padding:value
简写方法和margin一致，方向一致。

随堂笔记
-transparent 有边框但是是透明的。不可见，但是源代码可以查到。

背景默然包含 border padding content。
background-clip 规定背景的绘制区域

取值border-box：边框被裁减，为默认值
padding-box：内边距被裁减
content-box：被裁减到内容框

背景图片不撑开高度

background-image:url(7.jpg);

background-repeat 默认的背景图片是重复的，可以设置

repeat 默认为重复
repeat-x 仅水平重复
repeat-y 仅垂直重复
no-repeat 仅把图片显示一次

background-size 设置背景尺寸

只有一个参数的时候，默认是宽
两个参数分别是宽高
如果设置单位百分比，默认以本标签作为参照物
如果是cover必须保证将本标签全部覆盖
contain 只是放大到浏览器认为的最大尺寸的合理值

background-attachment：fixed背景图片固定

scroll 跟着标签滚动
fixed 固定背景图片

background-position 背景定位

两个参数时，表示横向和纵向的偏移量
百分比 % % 第一水平第二个垂直
left：在左边显示
center：居中
right：右边
top:顶部
bottom：底部
只有之歌参数另个默认center

background-origin 主要针对背景图片的位置

border-box：背景图像相对与边框定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位

background 背景属性

语法结构：background：color url repeat attachment position.

渐变属性、

渐变语法：background-image

取值：linear-gradient：线性渐变
radial-gradient:径向渐变
repeating-linear-gradient:重复线性渐变
repeating-linear-gradient:重复径向渐变

线性渐变 linear-gradient(angle,color-point1,color-point2,...)

默认从上到下渐变，angle:
第一个参数传to 方向即
to top(0deg),
to right(90deg),
to bottom(180deg),
to left(270deg).
color-point:表示颜色的起始点，中间点或者结束点，取值颜色还有位置的组合，如：red 0%,green 50%