企业网站建设费现金流科目,青岛网站制作费用,wordpress怎样临时关闭网址,天津手机版建站系统价格目录
浏览器的渲染过程⭐⭐⭐
CSS 、JS 阻塞 DOM 解析和渲染
回流#xff08;重排#xff09;和重绘⭐⭐ 选择器
ID选择器、类选择器、标签选择器#xff08;按优先级高到低排序#xff09;⭐⭐
特殊符号选择器#xff08;#xff1e;,,~#xff0c;空格#xff0…目录
浏览器的渲染过程⭐⭐⭐
CSS 、JS 阻塞 DOM 解析和渲染
回流重排和重绘⭐⭐ 选择器
ID选择器、类选择器、标签选择器按优先级高到低排序⭐⭐
特殊符号选择器,,~空格逗号
属性选择器
伪类和伪元素选择器⭐手写伪类和伪元素选择器
优先级⭐⭐⭐
样式方式按优先级高到低排序⭐⭐
内联样式表在标签内设置元素的样式
嵌入样式表在head标签内
外部样式表在head标签内
transform旋转缩放平移⭐⭐
position关键字⭐⭐⭐
水平 垂直对齐 ⭐手写
水平居中
水平垂直居中
transform:translate
flex强烈推荐
flex布局⭐⭐⭐
align-items和justify-content的区别
flex:1
BFC规范⭐⭐⭐
问题
常见触发条件
规则
overflow: hidden示例 单位⭐⭐⭐
px转rem
px转vw
opacity: 0、visibility: hidden、display: none⭐⭐⭐
行内素、块级元素和行内块元素⭐⭐⭐
响应式布局⭐⭐ 浏览器的渲染过程⭐⭐⭐ 1.解析HTML的所有标签深度遍历生成DOM Tree 2.解析CSS构建层叠样式表模型CSSOM(CSS Object Model) 2.5.JS脚本加载
a. 普通js/sync 文档解析的过程中如果遇到script脚本就会停止页面的解析进行下载当脚本都执行完毕后才会继续解析页面。 因为JS可以操作DOM和CSS可能会改动DOM和CSS所以继续解析会造成浪费。
如果脚本是外部的会等待脚本下载完毕再继续解析文档。
所以常见的做法是将js放到页脚部分。
b. async异步HTML加载和解析js加载 async脚本会在加载完毕后执行。
script typetext/javascript srcx.min.js asyncasync/script async脚本的加载不计入DOMContentLoaded事件统计也就是说下图两种情况都是有可能发生的 HTML 还没有被解析完的时候async脚本已经加载完了那么 HTML 停止解析去执行脚本脚本执行完毕后触发DOMContentLoaded事件。 HTML 解析完了之后async脚本才加载完然后再执行脚本那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件 c. defer(推迟) 文档解析时遇到设置了defer的脚本就会在后台进行下载但是并不会阻止文档的渲染当页面解析和渲染完毕后会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发
script typetext/javascript srcx.min.js deferdefer/script
DOMContentLoaded事件也就是说下图两种情况都是有可能发生的 HTML 还没有被解析完的时候defer脚本已经加载完了那么 等待HTML 解析完成后执行脚本脚本执行完毕后触发DOMContentLoaded事件。 HTML 解析完了之后defer脚本才加载完然后再执行脚本脚本执行完毕后触发DOMContentLoaded事件。 defer是“渲染完再执行”依赖于页面中的DOM元素文档是否解析完毕或者被其他脚本文件依赖
async是“下载完就执行”并不关心页面中的DOM元素文档是否解析完毕并且也不会产生其他脚本需要的数据。
3.构建Render Tree渲染树
DOM和CSSOM根据一定的规则组合起来生成了Render Tree 4.布局Layout
确定各个元素的位置以及大小。浏览器使用一种流式处理的方法只需要一次绘制操作就可以布局所有的元素。
5.绘制Painting
浏览器会遍历Render Tree渲染树调用“paint”方法将渲染树的各个节点绘制到屏幕上。
CSS 、JS 阻塞 DOM 解析和渲染
浏览器将页面从网络下载到本地后
解析HTML创建DOM同时加载依赖的资源CSS、图片等加载资源的过程不会阻塞DOM解析然后调用渲染进程渲染到界面上。
所谓渲染就是显示
css不阻止dom的解析js阻止dom的解析js有可能影响dom的解析比如在js里面新增dom等这些操作css js都会阻止dom的渲染dom的渲染 是需要等jscss都解析完成后才进行的
尽量将CSS放头部JS放底部这样可以提高页面的性能。
为了减缓渲染被阻塞的情况现代的浏览器都使用了猜测预加载。
当解析被阻塞的时候浏览器会有一个轻量级的HTML或CSS扫描器scanner继续在文档中扫描查找那些将来可能能够用到的资源文件的url在渲染器使用它们之前将其下载下来。
回流重排和重绘⭐⭐
回流重排
元素改变 尺寸宽高边框内容位置 都会引起重排导致需要重新构建页面的时候
增删可见的 DOM 元素的时候元素的位置发生改变元素的尺寸发生改变内容改变页面第一次渲染的时候
重绘
外观发生改变但没有改变布局
列举一些相关的 CSS 样式color、background、background-size、visibility、box-shadow 选择器
ID选择器、类选择器、标签选择器按优先级高到低排序⭐⭐
htmlheadmeta charsetutf-8style typetext/cssdiv{color:#ff0000;font-size:20px;}.green{color:#008000;}#black{color:#000000;}/style/headbodydiv红色/divdiv classgreen绿色/divdiv idblack黑色/div/body
/html
特殊符号选择器,,~空格逗号
群组选择器’,’
/* 表示同时选择h1,h2 */
h1, h2 {...
}
子元素选择器空格
/* 表示选择 h1 下面的所有 span 元素不管是否以 h1 为直接父元素 */
h1 span {...
}
直接子元素选择器’’
/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素注意与空格的区别*/
h1 span {...
}
相邻兄弟选择器’’
/* 表示选择紧跟在 h1 后的首个兄弟 span 元素h1 和 span 必须有相同的父元素即二者必须是同一级元素 */
h1 span {...
}
兄弟选择器’~’
/* 表示选择 h1 后的所有兄弟 span 元素h1 和 span 必须有相同的父元素即二者必须是同一级元素。注意与 的区别 必须是紧跟着的兄弟元素而 ~ 不要求紧跟是所有兄弟元素 */
h1 ~ span {...
}
属性选择器
属性选择元素
[title]
{color:blue;
}
伪类和伪元素选择器⭐手写伪类和伪元素选择器
伪类选择器逻辑选择元素
selector:pseudo-class {property:value;}!DOCTYPE html
html
head
meta charsetutf-8
title菜鸟教程(runoob.com)/title
style
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
/style
/head
body
pba href/css/ target_blank这是一个链接/a/b/p
pb注意/b a:hover 必须在 a:link 和 a:visited 之后需要严格按顺序才能看到效果。/p
pb注意/b a:active 必须在 a:hover 之后。/p
/body
/html
nth-child(n)
nth-child(n)匹配属于其父元素的第n个子元素不论元素类型n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词第一个子元素的下标是 1
htmlheadmeta charsetutf-8style typetext/cssul li:nth-child(even) {background-color: rgb(255,0,0);}/style/headbodyulli1/lili2/lili3/lili4/li/ul/body
/html
伪元素
headmeta charsetutf-8style typetext/cssdiv::after{content:;width: 20px;height: 20px;background-color: rgb(255,0,0);display: block;}/style
/head
body
div/div
/body
/htmlhtml模块的div元素加一个后伪元素
伪类只能使用“”伪元素既可以使用“:”也可以使用“::”伪元素其实相当于伪造了一个元素伪类没有伪造元素例如first-child只是给子元素添加样式而已。本质区别就是是否抽象创造了新元素
优先级⭐⭐⭐
在同一层级下权值由高到低
!important 会覆盖CSS的任何声明其实与优先级毫无关系 权值内联样式(style“ ”) 1000ID选择器id “ 100伪类选择器如hover)属性选择器[title]{color:blue;}Class类选择器(class” ) 10HTML标签选择器 (p{}) 1通用选择器* 0
不同层级下
正常来说权重值越高的优先级越高但是一直以来没有具体的权重值划分所以目前大多数开发中层级越深的优先级越高
样式方式按优先级高到低排序⭐⭐ 内联样式表在标签内设置元素的样式 写一次只能设置一个
p stylebackground:red/p 嵌入样式表在head标签内
headtitle/titlestyle typetext/cssp{background-color:yellow;}/style/head 外部样式表在head标签内
relrelationshiphrefhypertext Referenceheadtitle/titlelink hrefxxx.css relstylesheet typetext/css//head 通过 link 进行对外部CSS样式文件的引用也可以引用网上别人写好的样式
transform旋转缩放平移⭐⭐
修改 CSS 坐标空间实现旋转缩放倾斜或平移
默认相对元素的中心点
Css3 Transform 各种变形旋转 | 菜鸟工具
position关键字⭐⭐⭐
static默认
该关键字指定元素使用正常的布局行为即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
inherit
从父元素继承 position 属性的值。
relative
相对于其正常位置进行定位。
元素先放置在未添加定位时的位置再在不改变页面布局的前提下调整元素位置因此会在此元素未添加定位时所在位置留下空白。
absolute
相对于 static 定位以外的第一个父元素进行定位。
元素会被移出正常文档流并不为元素预留空间。绝对定位的元素可以设置外边距margins且不会与其他边距合并。
fixed相对于浏览器窗口进行定位。在屏幕滚动时不会改变sticky(CSS3新增) 基于用户滚动的位置屏幕滚出时会粘住
水平 垂直对齐 ⭐手写
水平居中
指在水平方向上处于中间的位置。
元素/图片
margin: auto;
行内元素会占整行看不出来水平居中所以需要width: 50%;
文本
文本标签除了p都是行内元素text-aligncenter垂直居中
单行文本:
line-height height
图片:
vertical-align: middle;
水平垂直居中
transform:translate
top: 50%;left: 50%; 是以元素左上角为原点故不处于中心位置
加上transform:translate(-50%,-50%) 元素原点中心点往上x轴,左y轴移动自身长宽的 50%
flex强烈推荐
只需要设置 align-items:center; 属性
.wrap {width: 300px;height: 300px;border: 1px solid red;display:flex;justify-content:center;align-items:center;
}.box {height: 100px;width: 100px;border: 1px solid blue;
}
flex布局⭐⭐⭐
布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。
关键是flex布局能触发BFC规范
Flexible box设置或检索弹性盒模型对象的子元素如何分配空间
align-items和justify-content的区别
水平的主轴main axis和垂直的交叉轴cross axis
flex-direction 属性决定主轴的方向也就是排列方向。有4个属性值可以设置。
column主轴为垂直方向起点在上沿。column-reverse主轴为垂直方向起点在下沿。row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。
align-items 属性定义项目在交叉轴上如何对齐。
baseline 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条则该值与flex-start等效。其它情况下该值将参与基线对齐。 stretch 默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为auto则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸但同时会遵照min/max-width/height属性的限制。
justify-content 属性定义了项目在主轴上的对齐方式。
space-between均匀排列每个元素首个元素放置于起点末尾元素放置于终点。space-evenly均匀排列每个元素每个元素之间的间隔相等。space-around均匀排列每个元素每个元素周围分配相同的空间。
flex:1
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写默认值为 0 1 auto。后两个属性可选。
flex 属性属性有两个快捷值auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性而不是单独写三个分离的属性因为浏览器会推算相关值。
/* 一个值width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;/* 两个值flex-grow | flex-basis */
flex: 1 30px;/* 两个值flex-grow | flex-shrink */
flex: 2 2;/* 三个值flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
flex-grow 属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。
如果所有项目的flex-grow属性都为1则它们将等分剩余空间如果有的话。如果一个项目的flex-grow属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。
如果所有项目的flex-shrink属性都为1当空间不足时都将等比例缩小。如果一个项目的flex-shrink属性为0其他项目都为1则空间不足时前者不缩小。
负值对该属性无效。
flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小
BFC规范⭐⭐⭐
问题 外边距重叠
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距为单个边距的最大值
浮动导致父高度塌陷
不浮动的元素被浮动元素覆盖
BFC块级格式化上下文Block Fromatting Context
决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用
独立布局盒子内子元素样式不会影响到外面的元素。
常见触发条件
overflow: hiddendisplay: flex | inline-block | table-cellposition: absolute | fixed
规则
BFC就是一个块级元素块级元素会在垂直方向一个接一个的排列BFC就是页面中的一个隔离的独立容器容器里的标签不会影响到外部标签垂直方向的距离由margin决定 属于同一个BFC的两个相邻的标签外边距会发生重叠计算BFC的高度时浮动元素也参与计算
overflow: hidden示例
overflow属性指定如果内容溢出一个元素的框会发生什么
值描述visible默认值。内容不会被修剪会呈现在元素框之外。hidden内容会被修剪并且其余内容是不可见的。scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
overflow:hidden
避免外边距重叠
清除浮动
阻止元素被浮动元素覆盖
单位⭐⭐⭐
绝对长度单位px 像素百分比: %相对父元素字体大小单位: em相对于根元素字体大小的单位: rem默认16px相对于视口*宽度的百分比100vw即视窗宽度的100%: vw相对于视口*高度的百分比100vh即视窗高度的100%: vh
px转rem
相对于根元素字体大小的单位: rem默认16px
PostCss是一个用JavaScript工具和插件转换CSS代码的工具。postcss-pxtorem
px转vw 网页宽度1920px 网页高度1080px 1920px 100vw 1080px 100vh 宽 300px 和 200px 的 div 其所占的宽高以 vw 和 vh 为单位 vwDiv (300px / 1920px ) * 100vw vhDiv (200px / 1080px ) * 100vh 当屏幕放大或者缩小时div 还是以 vw 和 vh 作为宽高的就会自动适应不同分辨率的屏幕 可自定义scss函数。
$vm_base: 1920;
$vh_base: 1080;function vw($px) {
return ($px / $vm_base) * 100vw;
}
function vh($px) {
return ($px / $vh_base) * 100vh;
}.head{
font-size:vh(100);
}
opacity: 0、visibility: hidden、display: none⭐⭐⭐
区别opacity: 0visibility: hiddendisplay: none页面布局不改变不改变改变触发事件能触发不能触发不能触发
行内素、块级元素和行内块元素⭐⭐⭐
display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素
从 HTML 的角度来讲标签分为 文本级标签p、span、a、b、i、u、em容器级标签div、h系列、li、dt、dd 行内元素除了p之外所有的文本级标签都是行内元素p是个文本级但是是个块级元素
块级元素所有的容器级标签都是块级元素还有p标签 块标签div、h1~h6、ul、li、table、p、br、form。 特征独占一行换行显示可以设置宽高可以嵌套块和行 行标签span、a、img、textarea、select、option、input。 特征只有在行内显示不会自动进行换行内容撑开宽、高不可以设置宽、高img、input、textarea等除外。设置float后可以设置宽、高
对 margin 仅设置左右方向有效上下无效padding 设置上下左右都有效
响应式布局⭐⭐
使用媒体查询media使用flex弹性布局使用百分比单位rem单位VH、HW单位
