CSS的一生

最新推荐文章于 2023-03-31 16:25:28 发布

女挨踢

最新推荐文章于 2023-03-31 16:25:28 发布

阅读量168

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39807883/article/details/104806054

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

关于css

浏览器渲染的流程如下：

HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
将Dom Tree和CSSOM Tree结合，生成Render Tree(渲染树)
根据Render Tree渲染绘制，将像素渲染到屏幕上。

css加载特点：

css加载不阻塞DOM解析
css加载阻塞DOM渲染
css加载会阻塞后面的js执行
js加载会阻塞DOM解析

解释：

DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

DOMContentLoaded 和 onLoad

onLoad：所有资源加载完毕才会触发
DOMContentLoaded：当页面的内容解析完成后触发（解析到</html>）

如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。
其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

五种布局方式

静态布局

 特点： 元素的尺寸一律使用px，宽度使用min-width，小屏横滚动，大屏居中显示
 缺点：不能随着屏幕尺寸变化而变化

流式布局

 特点：主要宽度划分区域使用%，高度使用px， 会随着屏幕的分辨率适配调整，但整体布局不变
 缺点：尺寸跨度大的时候会不能正常显示

自适应布局

 特点：使用@media根据不同的分辨率范围切换不同的布局，大小不变，位置变化
 静态布局的一个系列

响应式布局

 开头需加：<meta name="applicable-device" content="pc,mobile"><meta http-equiv="Cache-Control" content="no-transform ">
 特点：每个屏幕分辨率下面都会有一个布局范围，大小位置都会变化
 流式布局+自适应布局（媒体查询@media）
 缺点：媒体查询是有限的，不能一一枚举要匹配多个屏幕分辨率，工作量大，设计也需要几套

弹性布局

 特点：使用rem/em更加灵活，适合移动端，不过现在可以使用vh，vm

分割线

BFC

block formatting context：** 块级格式化上下文 **

Formatting Context
指页面中的一个渲染区域，并且拥有一套渲染规则，它决定了子元素如何定位，以及与其他元素的相互关系和作用
BFC定义
BFC是用来格式化块级盒子的，指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关
如何创建BFC — 满足一条即可
- 根元素，即html元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption、table(生成table-cell)
- position的值为absolute或者fixed
- flex boxes (元素的display: flex或inline-flex)
BFC的渲染/布局规则
1、内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流
2、元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠
3、每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块
4、BFC的区域不会与float元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
使用BFC的使用场景
- 边距重叠
  1、父与子之间：子级的上下margin会与父级上下margin重叠一最大值为标准去渲染 – 上述规则3
  2、空元素：如果设置了margin-top和margin-bottom 他会在这两之间取一个最大值作为他的最终边距值 – 上述规则6
  3、兄弟元素之间：每个兄弟之间都有上边距或每个兄弟之间都有下边距，原则就是取最大的值 – 上述规则2、6
- 子元素浮动，父元素塌陷 – 上述规则5
- 兄弟元素浮动，覆盖其他元素 – 上述规则4

参考文章：https://blog.csdn.net/Hhy_9288/article/details/79401592
分割线

层级上下文

https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

盒模型

盒模型
标准模型：宽度和高度为content的宽度和高度，box-sizing:content-box;
IE模型：宽度和高度为content+padding+border，box-sizing:border-box;
分割线

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex / display: inline-flex
兼容的话需要加display:box，加浏览器前缀

flex属性：

flex-direction：指定主轴的方向
row / row-reverse / column / column-reverse
flex-wrap: 项目超出容器长度如何换行
nowrap / wrap / wrap-reverse
flex-flow: flex-direction flex-wrap
justify-content：主轴对齐方式
flex-start / flex-end / center / space-around / space-between
align-items：交叉抽对齐方式
flex-start / flex-end / center / stretch / baseline
align-content：多个交叉轴才起作用
flex-start / flex-end / center / stretch / space-around / space-between

容器内项目属性：

order：排序，小的排前面，默认为0
flex-grow：放大比例，占剩余空间的比例，默认为0
flex-shrink：缩小比例，默认为1，同比例缩小，设为0不缩小，默认宽度之和大于容器的时候才会发生收缩
flex-basis：分配多余空间之前，设定项目占主轴空间，默认为auto，项目本来大小
flex：flex-grow flex-shrink flex-basis
align-self：默认auto，继承容器的align-items，没有父元素默认stretch
也可单独设置flex-start / flex-end / center / stretch / baseline
eg.自适应的正方形
vh，vw
width:30%;
padding-top(bottom):30%;
height:0;
padding的百分比依据的是父元素宽度，高度的百分比依据的是父元素高度

h5、Android、iOS尺寸单位

像素px：组成屏幕的最小单位
分辨率：2560 x 1600（13英寸inch）
      意思是长2560个像素，宽1600个像素，对角线是13inch
ppi：每英寸包含的像素个数，屏幕像素密度
dpi：约等ppi，用于打印机，每英寸包含的开发像素点，屏幕像素密度
pt（iOS）：绝对长度单位，= 1/72 inch
dp（Android）：设备独立像素（css的px类似dp），相对长度单位
sp（Android）： (可缩放独立像素)相对长度单位
window.devicePixelRatio（h5）: 
    独立设备像素比 = dp(andriod)/px(h5)

分割线

CSS中的一些属性百分比值，相对于谁计算

font-size: 当前的字体大小等于100%
line-height: line-height的计算值就是当前字体的值乘以该百分比
width: 正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度
height:当父元素width属性为auto时，子元素宽度仍然可以使用百分比设置。但是对于height，只要子元素还是在正常文档流当中的，如果父元素的height属性为auto，则子元素height设置为百分比会被忽略(auto*100/100=NaN)
margin、padding:无论是垂直或水平方向，均是相对于父元素的宽度，正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度
定位元素的left/right/bottom/top百分比值:top,bottom设置百分比定位是按包含块padding-box的高度来计算的，同样left,right,设置百分比定位是按包含块padding-box的宽度来计算的

Less

概述：https://less.bootcss.com/

分割线

web尺寸获取

网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth

参考：https://www.cnblogs.com/wujindong/p/5592908.html
分割线

word-break、word-wrap、white-space

white-space – 控制空格和换行

作用	换行符	空格	自动换行	</br>、nbsp;
normal	×	×(合并)	√	√	初始情况
nowrap	×	×(合并)	×	√	永不换行(除了</br>)
pre	√	√	×	√	空格和换行符全保留
pre-wrap	√	√	√	√	preserve+wrap
pre-line	√	×(合并)	√	√	保留空格和换行符可以自动换行

word-break – 单词如何被拆分换行

作用	表现
normal	空格、长单词不换行，连续的中文字符超长会换行
keep-all	这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行
break-all	所有单词碰到边界一律拆分换行

word-wrap（overflow-wrap） – 单词如何被拆分换行，作为word-break的互补

作用	表现
normal	空格、长单词不换行，连续的中文字符超长会换行
break-word	当一个单词一整行都显示不下时，才会拆分换行该单词

分割线

动画

animation关键帧动画 (可定义任意多个帧)

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name：规定需要绑定到选择器的 keyframe 名称
animation-duration：规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function：规定动画的速度曲线
animation-delay：规定在动画开始之前的延迟时间
animation-iteration-count：规定动画应该播放的次数（ n|infinite ）
animation-direction：属性定义是否应该轮流反向播放动画（normal|alternate）

transition过渡动画 (从初始状态过渡到结束状态这个过程所产生的动画)

transition 属性是一个简写属性，让CSS属性值在一定的时间区间内平滑的过渡，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果的延迟时间。

transform我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变
分割线

auto

auto是自适应的意思，是很多尺寸值的默认值，由浏览器自动计算

有包裹性的元素（absolute，fixed，float，inline-box）auto不起作用
元素没有设置宽度，无法参考父元素的宽度来进行自身的auto

  <style>
    .box{
      background: red;
      text-align: center;
      width: 100px; // 2
      padding: 10px;
    }
    .content{
      display: inline-block;
      text-align: left;
      background: #fff;
    }
  </style>
  <div class="box">
    <div class="content">一行居中对齐，多行居左对齐。</div>
  </div>