Day04 css三大特性 颜色、文本属性 字体图标库 隐藏元素 重排和重绘 列表样式 其他样式 overflow px/em/rem 盒模型

1 css三大特性

1.1继承性：父元素设置样式后代元素继承

一、可被继承的css属性

1.字体系列属性:font、font-family、font-weight、font-size、fontstyle;
2.文本系列属性:
	2.1内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符强制转为大写，lowercase转小写，capitalize首字符强制转为大写);
	2.2块级元素：text-indent、text-align;
3.元素可见性：visibility
4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）;
5.列表布局属性：list-style

二、不可以被继承的css属性

1.display：规定元素应该生成的框的类型；
2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 );
3.盒子模型的属性：width、height、margin、border、padding;
4.背景属性：background、background-color、background-image;
5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

1.2 层叠性

使用多个选择器给一个标签设置样式 发生层叠

1.3 优先级 权重

!important 优先级最高
style属性 权重1000
id选择器 权重100
类选择器 伪类选择器 属性选择器 权重10
标签选择器 伪元素选择器 权重1
通配符选择器/普通选择器 权重0

2 颜色属性

1.设置颜色关键字 

color: red;

2.十六进制 0-f 0-9 a-f 3/4/6 

 color: #ff00ff; 

3.rgb 三原色 red green blue 取值范围:0-255

color: rgb(23, 197, 29); 

4.rgba alpha 透明度 0-1  0完全透明 1完全不透明

3 文本属性

color:1.关键字(red,blue) 2.十六进制(#346) 3.rgb(red,green.blue)0-255 
4.rgba(r,g,b,alpha透明度0-1)
text-开头属性
text-decoration 设置上划线underline 下划线overline 删除线line-through
text-align left center right
text-transform 设置形变 lowercase uppercase full-width captialize 
text-indent 设置首行缩进 2em 
text-shadow 设置文本阴影 h-shadow v-shadow blur color
font-开头属性
font-style:设置是否开启斜体 italic normal
font-weight 设置文本加粗 bold 100-900
font-size 设置文字大小 28px 
font-family 设置文字类型 "宋体","楷体","微软雅黑",serif;
网络字体库 webfont 
	1.@font-face:"Zoom-A550" style标签第一行
	2.font-family:;

4 字体图标库

iconfont  
	1.单色图标库 
		link标签引入css文件 
		2.class='iconfont xxx'
	2.多色图标
		使用script标签引入iconfont.js文件
		svg>use标签 use href='#icon-lvshu-5'
font-awesome
	1.使用link标签引入font-awesome.css文件 bootcdn 
	2.class='fa fa-tubiao fg-2x'
iconmoon

5 隐藏元素方式

1.display:none 隐藏元素
	不占据原先在浏览器中的位置  js事件不会生效 会引起重排/回流
2.visibility:hidden 
	占据原先在浏览器中的位置  js事件不会生效  会引起重绘
3.opacity:0
	占据原先在浏览器中位置  js事件会生效   不一定 只有一个图层引起重绘 

6 重排（回流）和重绘

当一个dom元素(标签)的改变影响到几何信息(位置),浏览器计算dom元素的几何信息,
将其正确的显示在页面中，这个过程就叫重排，也叫回流

当dom元素外观被改变,但是不影响布局排列,路蓝旗将其重新绘制的过程就叫重绘。
重绘不一定引起重排，重排会引起重绘.

重排重绘会占据浏览器性能(占据cpu)页面卡顿,ui迟缓j.
重排：dom元素 增加 删除 插入 替换 display：none 
重绘:css一些样式 color 背景色    隐藏元素 visibility

7.列表样式

list-style-type 设置列表标志类型 disc circle square ...
list-style-image 自定义列表标志项
list-styel-position 设置列表标志项位置 inside outside(默认值)
简写:list-style:type image position
取消列表标志项:list-style:none

8 其他样式

1.display:  class布局方式 可以将块级元素显示在一行
    inline 将当前元素设置为行内元素
    block 将昂前元素设置为块级元素
    inline-block 将当前元素设置行内块元素
2.cursor 游标 pointer help

9 overflow(父元素内容溢出处理)

auto 自适应 当内容宽高超出父元素 浏览器设置滚动条
scroll 滚动条
hidden 超出父元素的部分隐藏起来

10 px和em和rem区别？

1.px是相对单位，相对于当前设备分辨率 绝对单位:1cm 1cm
2.em是相对单位，相当于当前元素的字体大小而言，font-size:28px 
	1em=28px 默认(1em=16px)
3.rem是相对单位，相对于html元素的字体大小而言，默认1rem=16px

11 盒模型

1.盒子属性:width height margin padding border max-width min-width max-height min-height
2.盒模型:
    1.盒子种类：
        1.1内容盒子 标准盒子 w3c盒子 普通元素就是标准盒子 box-sizing:content-box
        1.2边框盒子 IE盒子 怪异盒子 box-sizing:border-box
    2.盒子区别:
        2.1内容盒子的宽高设置给内容区
            计算公式:
                盒子宽:width+paddingLeft+paddingRight+bordrLeft+bordrRight
                盒子高:height+paddingTop+paddingBottom+borderTop+borderBottom
                盒子所占页面宽:盒子宽+marginLeft+marginRight
                盒子所占页面高:盒子高+marginTop+marginBottom
        2.2边框盒子的宽高设置给盒子本身
            计算公式:
                盒子宽:width:contentWidth+paddingLeft+paddingRight+borderLeft+borderRight
                盒子高:height:contentHeight+paddingTop+paddingBottom+borderTop+borderBottom
                盒子所占页面宽:盒子宽+marginLeft+marginRight
                盒子所占页面高:盒子高+marginTop+marginBottom