BFC
块级作用域上下文(里面的元素是独立起来的,不会受外面的元素影响)
例子
- 解决margin合并 or 塌陷
设置了相同的margin只会生效最大值 。相同的话就是合并
让某个子元素添加父元素并使用bfc 格式化块级上下文
常见布局
flex伸缩盒子布局(常用)
设置了flex的元素称为容器,里面的项目叫做子项
整个容器分为两条轴 。水平的主轴(main axis)和垂直的交叉轴(cross axis)
注意。不常用的属性
子项属性:
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。(就是改变子项的顺序)
flex属性其实就是这三个
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink属性定义了项目的缩小比例,
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(人话:初始化占据多少px)
应用
- 常用于移动端 or 水平垂直居中
- 瀑布流
- 轮播图
position定位布局
口诀:父绝子相
这种布局会脱离文档流,也是生成bfc的一个条件。设置相对定位的元素会去找最近的绝对定位元素,以他为基准去实现偏移。没有就是html这个根
应用:
- 返回顶部 / 头部栏随着滚动条滚动
- 水平垂直居中
浮动布局
也是脱离文档流效果和postion差不多,也是生成bfc的一个条件。有浮动的地方一般需要在他的兄弟加清除浮动的属性,避免浮动带来的影响
应用
- 左边不变宽度,右边可变
grid布局(暂时还是兼容性不好的一个布局)
- 瀑布流
px rem em vh vm 计量单位的区别
- px像素单位,是相对于显示器屏幕分辨率而言的。不会变的。设计稿给的都是这个单位,但是我哦们需要根据项目的适配方案换算单位
- rem 一个相对单位。也是响应式布局的灵魂。1rem = 16px。宽高设置rem也是按照html来动态计算,只适用在html这个元素上
- em 也是相对单位它基准点为父节点字体的大小,子元素设置rm是根据他的父元素来计算的。宽高设置rem也是按照html来动态计算
- vh vm 更具屏幕的视口。
重绘、重排(回流)
- 重排我们可以理解为重新排列布局
怎么触发重排呢?
简单来说,就是JS动态控制DOM结构的时候,且有DOM结点的几何信息元素发生改变时,才会执行回流。
window大小被修改
增加删除DOM结构
元素的尺寸发生变化
offsetWidth 和 offsetHeight ,offset… ,clientWidth,client…,scrollTop,scroll… - 重绘这个词我们可以更加轻易地去理解它,即重新执行渲染,
所有导致元素非几何信息发生变化的操作都会触发重绘。
注意: 回流一定会重绘,但是重绘不一定会回流!
盒子模型
在css里面每个元素都是一个盒子,盒子由 margin+ border + padding + content 组成
标准模型(默认)
width = content
width设置了多少content就是多少,不会将width分给padding和border
ie模型
width = content + padding + border
width设置的值会被他们三个平分
常见的块级元素和行级元素
块级(可以直接设置宽高
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
行级 (不行直接设置宽高)
p span h1 a
语义化标签
header aside main footer table picture
link 和import 的区别
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。(加载更多类型)
- link引用CSS时,在页面载入时同时加载**(不阻塞DOM渲染);@import需要页面网页完全载入以后加载(阻止)**。
- link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
伪元素和伪类的区别和作用?
伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如
a:hover {color: #FF00FF}
p:first-child {color: red}
CSS 优化和提高性能的方法有哪些?
- 加载性能:
(1)css压缩:将写好的css进行打包压缩,可以减小文件体积。
(2)css单一样式:当需要下边距和左边距的时候,很多时候会选择使用 margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行效率会更高。
(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。 - 选择器性能:
(1)关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;
(2)如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。
(3)避免使用通配规则,如*{}计算次数惊人,只对需要用到的元素进行选择。
(4)尽量少的去对标签进行选择,而是用class。
(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。
(6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。 - 渲染性能:
(1)慎重使用高性能属性:浮动、定位。
(2)尽量减少页面重排、重绘。
(3)去除空规则:{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
(4)属性值为0时,不加单位。
(5)属性值为浮动小数0.**,可以省略小数点之前的0。
(6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。
(7)不使用@import前缀,它会影响css的加载速度。
(8)选择器优化嵌套,尽量避免层级过深。
(9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。
(10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
(11)不滥用web字体。对于中文网站来说WebFonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性:
(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。
(2)样式与内容分离:将css代码定义到外部css中。