关于css:CSS复习笔记二规则和布局

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

绝对点
是否脱离文档流