display，边框，背景，列表与表格

display属性：

block 把任意元素转换为块元素 显示

inline 把任意元素转换为行内元素

inline-block 把任意元素转换为行内块元素，既能不换行，又能设置宽高

none 隐藏

标准文档流：一个网页从上到下的渲染过程

浮动：所有具有浮动属性的元素，都会脱离标准文档流，宽度会变成仅仅能够容纳里面文本的宽度，位于后面的元素，会顶它的位置

所有元素全部浮动之后，父级盒子塌陷，不再能够包含所有元素。

clear属性：清除浮动元素所带来的影响 left right both

解决盒子塌陷的办法：

1.加一个空的div clear：both

2.加在父级上 ::after 常用

3.加在父级上 overflow:hidden 常用

CSS边框

1.声明边框

border-width:长度值，设置边框的宽度，可选

border-style：样式名称，设置边框的样式，必选

border-color：颜色值，设置边框的颜色，可选

2.边框样式

长度值 CSS长度值：px，em

百分数 直接设置百分数：1，2，3，

(thin，medium，thick)使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大。

none没有边框

dashed破折线边框

dotted圆点线边框

double双线边框

groove槽线边框

inset使元素内容具有内嵌效果的边框

outset使元素内容具有外凸效果的边框

ridge脊线边框

solid实线边框

(border-top-width，border-top-style，border-top-color)定义顶端

(border-bottom-width，border-bottom-style，border-bottom-color)定义底部

(border-left-width，border-left-style，border-left-color)定义左侧

(border-right-width，border-right-style，border-right-color)定义右边

(border,border-top，border-bottom，border-left，border-right)<宽度><样式><颜色>设置四条的边框，只设置上边框，只设置下边框，只设置左边框，只设置右边框

3.圆角边框

border-radius长度值或百分数：四条边角

border-top-left-radius长度值或百分数：左上边角

border-top-right-radius长度值或百分数：右上边角

border-bottom-left-radius长度值或百分数：左下边角

border-bottom-right-radius长度值或百分数：右下边角

背景属性

background-color: ;背景颜色

背景图片

background-image: url(./img/loading.gif);

背景平铺:no-repeat 不平铺

repeat-x 横轴平铺

repeat-y 纵向平铺

background-size: cover;

background-size: contain;=100%

背景图像的位置坐标background-position

px

%

方向值:top left right center bottom

background-position

第一个值代表水平位置，第二个垂直位置

只写了一个值,第二个值默认为居中

background-position: top left;

背景滚起来,但是图片不动

background-attachment: fixed;

列表与表格

!important 优先级

list-style-type类型 none不显示

list-style-type: none;

list-style-image: url(img/bullet.png);

list-style-position: inside;

标记位于内容框内部