CSS

（让块元素依照想法显示）

实体：

&nbsp
&lt
&gt

单位

相对单位
10px

绝对单位
1em em绝对于元素的字体大小
1rem rem绝对于html元素选择器中设定的字体大小

色彩
关键字 pink
十六进制 #ffffff #000 #f4f4f4
函数 rgb（ ， ，）
rgba（ ， ， ，）a示意透明度

标签文字化：

1.定义网络字体

@font-face{  font-family："iconfont";  src:"";}

2.应用
根底款式

.iconfont{  font-family:"iconfont" !important;  font-size:16px;  font-style:normal;}

非凡款式

 .icon-aixin:before{     content："\e8ab"； }

援用
<span class:"icon-aixin">

一、规定

文本规定：(针对盒子内容润饰，可继承)

text-align:center

盒子居中：margin： 0 auto
盒子外面的内容程度居中：text-align：center
盒子外面的内容垂直居中：heigjt：50px；；line-height：50px；

vertical-align（行内元素垂直排列）

middle

text-decoration

underline（下划线）
overline（上划线）
line-through（删除线）
text-decoration-color（速写模式）

overflow：hidden/visable/initial/scroll（滚动）

overflow-x（左右）
overflow-y（高低）

字体规定：（针对盒子内容润饰，可继承)

字体：

font-family：'Microdoft YaHei'；

字体色彩

color：

字体粗细

font-weight：bold/light

字体款式

font-style：italic/normal

字体速写

font：font-weight font-size/line-height font-family（font：）Microdoft YaHei
12px/1.5

背景色

background-image:url("")
background-repeat:no-repeat
裁切终点background-clip:padding-box
铺设终点background-orgin:content-box
background-size:cover/contain
background-position:50px 100px/center
background-color:

列表规定

list-style：none

表格规定

border-collapse：

collapse（td增加边框时，加在table上能够合并隔壁的边框）
opacity（透明度）

二、浮动布局（块元素一行当中排列的问题）

盒子模型（块元素）

外边距margin
边框border：1px solid #ccc

border-top

border-top-style
border-top-width
border-top-color

border-right
border-bottom
border-left
boder是border-top，border-right，border-bottom，border-left的速写模式

内边距padding

padding-top
padding-right
padding-bottom
padding-left
速写：

  0 5px   高低0 左右5  0 5px 10px 上0 左右5  下10  0 5px 10px 20px 上右下左

宽width
高height
1）怪异盒模型（ie） jquery

vue/react/angular 不反对ie8——
box-sizing:contenr-box
盒子所占的宽度=width（蕴含boder+padding+内容宽度）

1）传统盒模型
box-sizing:contenr-box

盒子所占的宽度 = border+padding+width
多个块元素在一行显示

1.float：left/right

块元素脱离默认文档流，默认宽度为0，失去对父元素撑持的能力

在浮动流中，多个浮动元素在一行中显示，并且会主动换行。
一个i
2.清理浮动
为容器增加一个子元素，个别应用为伪元素

ul.list::after{    content:"";    display:block;    clear:both;}

二、定位布局

position：static//默认动态

relative
绝对点：该元素所在文档流的初始地位
是否脱离文档流：不脱离
如何应用：个别不挪动，作为绝对点

absolute
绝对点：间隔最近的父定位元素元素，若没有则绝对于浏览器视口
是否脱离文档流
看
fixed
绝对点：绝对于视口，不会随着浏览器的滚动而滚动
是否脱离文档流：脱离

sticky
绝对点
是否脱离文档流

当position的取值为上述四个之一，则称之为定位布局，能够应用定位属性：left，right，top，bottom

绝对点
是否脱离文档流