我的观点是记住可继承属性就好了,其它的都是不可继承属性,而且开发过程中,如果发现样式问题,而代码又没加这样的样式,则有可能是样式从父级那里继承过来的。
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
font-style:字体的风格
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:单词之间的间距
letter-spacing:中文或者字母之间的间距
text-transform:控制文本大小写(就是uppercase、lowercase、capitalize这三个)
color:文本颜色
visibility:控制元素显示隐藏
list-style:列表风格,包括list-style-type、list-style-image等
cursor:光标显示为何种形态
引用外部css的方式通常就是这两种,
<style>
@import url("./style.css");
style>
或者
<link rel="stylesheet" href="./style.css">
1、link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。link标签除了引用css文件外,还可以引用其它文件。
2、link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。所以,如果遇到样式闪烁的问题,就用link标签引用css。
3、link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
4、可以通过JS操作DOM,插入link标签来改变样式;@import 肯定没办法通过js来添加。
选择器优化:
* {
margin: 0;
padding: 0;
}
尽量少的去对标签进行选择,而是用class。这个很容易理解,使用class更容易维护,后继维护者更改标签后,可以不需要更改样式。
尽量少的去使用后代选择器 后代选择器会影响到某个dom节点之下所有的dom,即便某些dom不符合条件,但也会被这条规则遍历一次来判断是否符合条件。
熟练运用继承属性,可以减少css代码的编写。比如父dom的样式中已经有font-size或者line-height,子dom就不需要添加这些样式了,因为这些样式可以继承。
样式选择器嵌套不要超过三层!这很重要,浏览器渲染时是会遍历css树的,如果层级太深,性能将会受到影响。而且真没必要为了防止样式权重不够,通过嵌套来提高权重。
渲染性能优化:
属性值为0时,不加单位。
属性值为浮动小数0.xx,可以省略小数点之前的0。
css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。
尽量减少页面重排、重绘。这个问题涉及的注意点很多,比如动画移动时,通过transform 来控制,而不是通过margin或者padding来控制。
正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。比如 本来是inline的标签span,就不要设置为block,设置为inline-block。
让样式更优雅:
.custom-a {
xxx
}
当a标签希望使用这个样式的时候,直接给a标签加上这个类名,够灵活,够节省。
我们常听说什么是css预处理器,但css后处理器是什么?
css 预处理器:less、sass
后处理器:postcss
现在的许多项目中,我们直接编写的样式代码一般都不是css,以less举例,它可以定义变量,选择器嵌套,混入复用,函数,循环等更自由的方式实现样式编码,这样能节省开发者的时间。
但最终,浏览器不认识less编写的代码,所以还要将less 转译为 css,这一部分的工作,一般交给其它工具来完成,比如webpack中的less-loader。
将less转为css后自然就能被浏览器识别,根直接写的css样式没啥区别,但也许你自己开发的浏览器显示没问题,但不能保证所有用户的浏览器都能正常显示,因为某些css语言针对不同的浏览器,不同的版本,存在兼容性的问题。
如果让人为来实现兼容大多数浏览器样式问题的工作,太痛苦,所以还需要postcss来进行再次编译。
postcss会为许多有兼容性问题的样式属性添加前缀,添加所有相同语义但写法不同的其它css样式语法,以确保不同的浏览器,总有一种写法能够匹配生效。并且越新的写法被放置在样式的最下面,这样一来新的浏览器将总是被最新的css语法匹配。
普通的前端开发者很难接触到postcss,一般在项目成立时,就已经设置好了,平时开发不会去重新配置,但你每一次编译,打包都会用上它,webpack中,它就是postcss-loader
扩展一下,我们已经知道了css大概经历的一个编译过程,所以,在webpack中,是先less-loader,后面才会有postcss-loader,所以postcss-loader总会写在less-loader的左边,因为webpack的loader执行规则是从下往上,从右至左的。
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
},
这个可不是面试造航母,工作拧螺丝,确实经常用到,如果不想每次都要去查,最好记一下
单行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
实现扇形的方式和实现三角行的方式思路一致,只是将一个矩形变成椭圆形而已。
div {
border: 100px solid transparent;
width: 0;
heigt: 0;
// 没有这个border-radius就是一个三角形
border-radius: 100px;
border-top-color: red;
}
.square {
width: 10vw;
height: 10vw;
background: red;
}
.square {
width: 10%;
padding-top: 10%;
background: red;
}
这其实是在考查设备的物理像素和css中像素单位之间的关系。
window.devicePixelRatio = 设备的物理像素 / CSS像素。
正常的pc端这个值为1,以csdn我的博客首页为例
iPhone se 时devicePixelRatio 就为 2 了。
devicePixelRatio = 2 为例,css为1px时,在物理屏幕上就会渲染2个像素点,所以比例看起来就很合理。
物理分辨率越高,devicePixelRatio 的值就会越大,所以内容呈现将会更加清晰,iPhone 12 pro 时devicePixelRatio 就为 3 了。