前端面试题--CSS系列（一）

最新推荐文章于 2024-07-19 14:40:55 发布

士女士女子

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量692

点赞数 8

文章标签：前端 css rust

本文链接：https://blog.csdn.net/weixin_52199120/article/details/129772953

版权

CSS系列--持续更新中

1.CSS预处理器有哪些类型，有什么区别

CSS是一门标记性语言，不利于复用，很难写出易于阅读且易于维护的代码。
于是就出现了CSS预处理器，增加了变量，函数，混入等功能，让CSS更易于维护。
类型：

sass：最早且最成熟的CSS预处理器，后缀名为.sass,scss.严格按照缩进形式省去大括号和分号。
less：基于sass,书写格式更像css,易上手，易兼容，但编程功能不够。
stylus：基于node.js社区，主要用于node项目进行预处理，stylus是新型语言，后缀名为.styl。

区别：

变量，less使用@开头，中间使用：隔开，sass使用$开头，中间使用：隔开，stylus开头前两种都可，但中间必须使用“=”隔开。

//less
@red: #c00;

strong {
  color: @red;
}

//sass
$red: #c00
strong{
  color: $red
}
  
//stylus
red = #c00
strong
  color: red

作用域：sass在全局作用域，最好不要重名，less和stylus会先找局部作用域，没有的话会一层一层网上找。
嵌套：三者都一致，引用父级选择器使用&，但sass和stylus不使用大括号
混入：将一部分样式抽出，作为一个单独定义模块，可以供多个选择器复用sass申明需要@mixin，stylus可以不要符号，但默认要“=”。
模块化：将代码分成一个个模块。

2.盒模型是什么，有哪两种类型

盒模型：在对一个文档进行布局时，浏览器引擎会根据css的基础盒模型标准，将每一个元素变为一个矩形盒子，盒子由四部分组成：content，padding，border，margin。

标准盒模型：width+ height代表的是content
IE盒模型： width + height代表的是content + padding + border

可以通过box-sizing来改变盒模型，content-box为标准盒模型，border-box为IE盒模型

3.css选择器有哪些，优先级是怎样的，哪些属性可以继承

CSS选择器：

id选择器（#myid)
类选择器 (.class)
标签选择器(div,p)
后代选择器(h1 p)
子选择器(ul > li)
兄弟选择器(li~a)
相邻兄弟选择器(li+a)
属性选择器(a[rel = “external”])
伪类选择器(a:hover)
伪元素选择器(::before, ::after)
通配符选择器(*)

优先级：

内联 > ID选择器 > 类选择器 > 标签选择器
（1）内联样式选择器x,0,0,0（行内样式）
（2）ID选择器0,x,0,0
（3）class选择器/属性选择器/伪类选择器 0,0,x,0
（4）元素和伪元素选择器0,0,0,x

继承属性：
在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

quotes：设置嵌套引用的引号类型

光标属性

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承

h1-h6标签字体的大下也是不能被继承的

无继承的属性
display

文本属性：vertical-align、text-decoration

盒子模型的属性：宽度、高度、内外边距、边框等

背景属性：背景图片、颜色、位置等

定位属性：浮动、清除浮动、定位position等

生成内容属性：content、counter-reset、counter-increment

轮廓样式属性：outline-style、outline-width、outline-color、outline

页面样式属性：size、page-break-before、page-break-after

4. 说说em/px/rem/vh/vw的区别

px:像素，即显示在页面上的一个小点，每个像素都是大小相同的, px大小与其他元素无关。绝对长度单位，页面按照精确像素进行展示。
em:相对长度单位。相当于当前对象的文本字体尺寸，默认字体尺寸1em = 16px,em值不固定，em会继承父节点的字体大小，使用级联方式计算尺寸。
rem:相对长度单位，相对的是html根元素font-size的值。rem集相对大小与绝对大小优点于一身。
vh,vw:vh表示窗口高度，vw表示窗口宽度，主要用于页面视图布局

5.元素实现水平垂直居中的方法有哪些，如果元素不定宽高呢？

使用绝对定位（absolute）：让left、right、top、bottom都为0，然后让margin：auto即可实现水平垂直居中。
子绝父相：水平居中left:50%,margin-left:(盒子宽度一半），垂直居中：top:50%,margin-top:(盒子高度一半）‘
flex布局：给父盒子一个弹性布局，并在父容器中写入justify-content:center,盒align-items:center表示水平居中盒垂直居中，即可。