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可以调整外面的字的垂直方向上的位置

相关文章
相关标签/搜索