CSS篇

名词定义

CSS：cascading style sheet 层叠样式表，用于装饰html。

引入方式

1. 行间引入。对应html标签加上属性style
2. 页面级。在head标签写style标签
3. 外部引入。<link rel="stylesheet" type="text/css" href="css文件路径">

权重

!important（Infinity）>行间样式（1000）>id（100）>class/属性/伪类（10）>标 签/伪元素（1）>通配符（0）

**256进制**

元素分类

1. 行级元素 inline (span,strong,em,a,等) 特点：内容决定元素所占位置，不独占一行，不可以通过 css 改宽高。宽=内部元素的宽，高＝内部元素的高   **具有文字特性，回车换行会当成文字分隔符**
2. 块级元素 block (div,p,ul,li,ol,form) 特点：独占一行；可以通过 css 改宽高。在没有设置宽高时，宽=100%，高＝内部元素的高。
3. 行级块元素 inline-block (img等) 特点：内容决定大小，不独占一行，可以改宽高。在没有设置宽高时，宽=内部元素的宽，高＝内部元素的高。**具有文字特性，回车换行会当成文字分隔符**

盒模型

margin+border+padding+content(width&&height)

**body标签在默认情况下有8px的margin值**

层模型（定位）

1. 绝对定位  脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
2. 相对定位  会保留原来的位置进行定位（原来的位置还占着，但是没东西），它是相对于自己原来的位置进行定位。
3. 固定定位  不随着滚动条的拖曳而改变，配合着 top、left、right、bottom 一起用

margin塌陷

垂直方向的 margin 父子元素是结合在一起的，取最大的一个值。 当子元素的值小于父元素的值时，子元素的 值不起作用，当子元素的值大于父元素的值时，子元素会和父元素一起动。

解决这个问题的办法就是给父级元素触发 BFC，方法：

（1）position：absolute；

（2）display：inline-block；

（3）float：left/right；

（4）overflow：hidden；（溢出部分隐藏）

margin合并

两个兄弟级别的元素垂直方向上的 margin 会合并。解决办法：通过计算，只添加一个元素的margin值

浮动

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了 bfc 的元素和文本类属性的元素（inline）以及文本都能看到浮动元素。

清除浮动的方法：

1.把父级元素后边的伪元素调用出来 content=“”；，然后转为块级元素，再清除浮动。比如：

div::after {

content: "";

display: block;

clear: both;

}

2.给父级元素触发 bfc。凡是设置了 float：left/right 或者 position：absolute 的元素内部会自动把其转化为行级块元素（inline-block）。

文字溢出处理

（1）单行文本：三件套： white-space：nowrap；（禁止换行），overflow：hidden； （溢出部分隐藏），text-overflow：ellipsis；（文字打点） (当文字的宽度小于容器 的宽度时，没有变化，当文字的宽度大于容器的宽度时就打点显示)

（2） 多行文本只做截断，不做打点（打点是手写上去的），先让行高和容器的高成比 显示（比如容器 40px，line-height 是 20px，你也就只能放两行，所以得把数字算好）， 然后溢出部分隐藏处理

图片代替文字

当网速不好的时候，图片加载不出来（系统会把 css 和 js 屏蔽掉），就得用文字代替， 当网速好的时候显示图片，隐藏文字，这就需要在 HTML 里边加上文字信息（只能用于背景图片）

方法一：text-indent：（填数字）px；（文字首行缩进，值要大于容器的宽），然后 white-space：nowrap；（禁止换行），再 overflow：hidden；（文字溢出部分隐藏）即可。

方法二：背景上是可以展示背景图片和背景颜色的，但是不能展示内容，那么就给容器 hight：0px；（先把容器的高清零），然后再用 padding-top：（填数字）px；padding 就会把图片撑开，这时图片就显示出来了，文字就顶出去了，再 overflow：hidden； （文字溢出部分隐藏）即可。

细节

margin:0 auto实现居中，要求该元素和父级元素都是块级元素

行级元素的padding-top,padding-bottom,margin-top,margin-bottom无效