CSS整理

CSS

 

1、

域名——>DNS——>ip地址——>服务器客户端握手交互——>传输数据

客户端浏览器获取一行显示一行的执行，遇到外链文件，比如.css，开启新的线程，同时（即异步）执行

 

2、

单选择器权重顺序

!important 权重 Infinity

——>行间样式style 权重 1000

——>id选择器 权重 100

——>class||属性||伪类 选择器 权重 10

——>标签选择器||伪元素 权重 1

——>通配符选择器 权重 0

权重的值是 256进制的（0到1之间差 256）

 

组合选择器——层级各权重相加

• 父子选择器（又叫派生选择器）
• 直接子元素选择器 div > div
• 并列选择器 div.class
• 分组选择器 div, span, p

 

3、

组合选择器 例如 div ul li span em，在DOC树中怎么个顺序遍历效率最高？

浏览器的一个内核原理就是，从右向左寻找是最快的。

 

4、

字体家族有（font-size font-weight font-style font-family color）

行块水平对齐方式有（text-align: left || right || center）垂直对齐方式有（line-height flex弹性布局）

font-size:50px 其实调整的是字体的高度

font-weight:light || normal || bold || boider 能不能看出效果，跟浏览器当前使用的字体包是否包含这么多的样式有关

 

5、

边框家族（border-width border-style border-dashed border-left border-right border-top border-bottom）

小三角形 css实现原理 下面是利用border实现的4个小三角形（刚好是一个正方形的对角线分割）

div{

width: 0;

height: 0;

border: 100px solid blank;

border-left-color: green;

border-top-color: red;

border-right-color: gray;

}

• 获得一个三角形，只需要把其它三个的颜色变成透明色（transparent）CSS专有的透明值

 

6、

text-indent: 2em 文本缩进

像素px也是一种相对单位，1em = 1* font-size

 

7、

行极元素 inline（span a ）

• 内容决定元素所占位置，不可以改变宽高

块级元素 block (div p ul li )

• 独占一行，可以通过css改变宽高

行级块元素 inline-block（img）

• 内容决定大小，可以改变宽高

凡是带有inline属性的元素，都有文字特性（文字分隔符 天生的4像素）

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

但是有两个特立独行：

P标签是块级元素，但是规定它独立，不能嵌套块级元素，否则被块级元素分割成前后两组p元素

a标签里面不能嵌套a标签

 

8、

大公司流程化开发都会先封装好一些相关功能，而不用每个新人都重新写一套代码

先写class的css，再导入html引用相关功能代码的class

比如初始化标签

body有个天生的8像素 margin:8px

a{text-decoration: none /*初始化去掉下划线，以后再用就可以直接使用*/}

ul{list-style:none;padding:0;margin:0;/*同理*/}

通配符初始化

*{

padding:0;

margin:0;

text-decoration: none;

list-style:none;

}

 

9、

盒模型： 内容宽高 + 内边距 + 边框 + 外边距

层模型：当一个元素成为绝对定位的时候，就会脱离文档流，独立一层，互不干扰，因此，后面的元素可能会产生回流和重绘的情况

比如

• absolute脱离原来位置进行定位，相对于最近的有定位的父级定位，如果没有就相对于文档进行定位
• relative保留原来位置进行定位
• fixed固定定位，相对于浏览器的可视区定位，以不变应万变

 

10

BFC（margin塌陷和margin合并）

margin塌陷：父子结构的元素，垂直方向的margin会共同选择最大的值

解决方式：

①父级元素加border

②让父级变成BFC块，加上overflow:hidden; || display:inline-block || position: absolute

margin合并：正常来说，元素占有区域不共用。但是兄弟结构的元素会出现margin区域共用的情况

解决方式：

①各个元素分别添加一个相同父元素，让问题转化为累加，但是这不应该应为bug增加无用的元素

②不解决是最好的解决方式，根据它的特性设置margin值

 

11、

float引发的问题

①浮动元素产生了浮动流，

②父子结构的元素，子元素使用float后，父级包不住的问题

原因如下

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

 

根据以上原因可以有解决方式：

• 清除周边的浮动流可以添加clear:both 这个一定要用在父级且是块级元素才起作用
• 让块级元素变成bfc
• （不选）在子元素最后边添加一个无用的元素并给它设置clear：both
• （优选）利用伪元素::after添加clear：both，并修改这个伪元素为块级元素display：block

 

凡是元素使用了position：absolute float：left || right ，

浏览器内部会自动将元素转换为inline-block

 

12、

文字溢出处理

①单行文本

text-overflow:ellipsis （三点省略号）

②多行文本

overflow:hidden 再配合一个伪元素::after{content:"..."}

 

13、背景图片处理

background-image:url(../..xxx.jpg)

background-size: 宽 高

background-position:50% 50%；(背景图片居中)

 

14、企业开发经验

没有加载CSS文件的时候，功能依然正常。

比如无法加载图片的时候，显示文字

 

15、

浏览器的一个特性，书本学不到的

行内块级元素内外都包含文字，外面的文字会根据里面的文字底对齐，vertical-align: 数值||middle可以调整外面的字的垂直方向上的位置