CSS 面试总结

最新推荐文章于 2024-07-18 09:03:14 发布

yolo_qi

最新推荐文章于 2024-07-18 09:03:14 发布

阅读量303

点赞数

文章标签： css 前端面试

本文链接：https://blog.csdn.net/Gay_Zhou/article/details/104483448

版权

1. CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：margin+border+padding+content

标准盒模型：一个块的总宽度=width(content)+padding+border+margin
IE盒模型：一个块的总宽度=width(content+padding+border)+margin
box-sizing：
content-box：height和width分别应用到元素的内容框，即标准盒模型
border-box：content+padding+border
inherit：继承父元素的box-sizing

2. visibility=hidden opacity=0 display=none（隐藏页面中某个元素的方法）

display:none; // 把元素隐藏起来，并且会改变布局，可以理解在页面中把该元素删除掉
visibility:hidden; //把元素隐藏起来了，但是不会改变页面布局，不会触发该元素已经绑定的事件
opacity:0; //可见度为0
position:移到可见区域外
z-index:采用其他元素进行遮挡涂层遮盖

3. position属性

fixed
可定为与相对浏览器窗口的置顶坐标，可通过left，top，right属性来定位
relative
可将其移至相对于其正常位置的地方
无论是否进行移动，元素仍然占据原来的空间，移动元素会导致它覆盖其他框
absolute
可定位与相对包含他的元素（最近的已定位父元素，如果没有，则相对于）的指定坐标，可通过left，top等属性规定
元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠
static
始终处于页面流给予的位置，会忽略任何top、button、left、right或者z-index声明
sticky
元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为绝对定位。
inheritbi
规定从父元素继承position属性的值

4. 浮动的清除

	<style>
	.box1 {
		width: 600px;
		background-color: pink;
	}
	.box2 {
		width: 600px;
		height: 240px;
		background-color: purple;
	}
	.son1 {
		width: 150px;
		height: 100px;
		background-color: skyblue;
		float: left;
	}
	.son2 {
		width: 300px;
		height: 100px;
		background-color: hotpink;
		float: left;
	}
	</style>
	<body>
		<div class='box1'>
			<div class='son1'></div>
			<div class='son2'></div>
		</div>
		<div class='box2'></div>
	</body>

上边的代码受浮动的影响，浮动元素不占位置，box1中的元素均为浮动元素，所以box2盒子在标准刘中，则会上移，所以需要清除浮动的影响。

添加额外的元素

<style>
.clear {
	clear: both;
}
</style>
<body>
	<div class='box1'>
		<div class='son1'></div>
		<div class='son2'></div>
		<div class='clear'></div>
	</div>
	<div class='box2'></div>
</body>

好处：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

父级添加overflow属性方法
```
<style>
.box1 {
	overflow: hidden; //auto scroll也可以 触发BFC
}
</style>
```
好处：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏调，无法显示需要溢出的元素

使用after伪元素清除浮动，为空元素的升级版

.clearfix:after {
	content: '.';
	display: block; // 转换为块级元素
	height: 0;
	visibility: hidden;
	clear: both; // 清除浮动
}
.clearfix {
	*zoom: 1; //兼容性问题 * 代表ie6 7能识别的特殊符号
}
// 同时给父元素添加该样式
<div class='box1 clearfix'>
...
<div>

空元素的升级版，不用单独添加标签
优点：符合闭合浮动思想，结构语义化正确
缺点：由于ie6 7不支持:after，需要使用*zoom:1触发hasLayout

使用before和after双伪元素清除浮动

<style>
	.clearfix:before, .clear:after {
		content: '';
		display: table; //触发BFC 防止外边距合并
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
</style>

优点：代码更简洁
缺点：由于ie6 7不支持:after，需要使用*zoom:1触发hasLayout

5. css3新特性

布局方面：新增了flex布局
选择器方面：新增了first-of-type，nth-child等选择器
盒模型方面：添加了box-sizing改变盒模型
动画方面：添加了animation，2d变换，3d变换等
颜色方面：添加透明，rgba等
字体方面：允许嵌入字体和设置字体阴影
还有媒体查讯等

6. css选择器及其优先级

id选择器
class选择器
标签选择器
伪类选择器
- 链接伪类选择器 :hover :active :visited :link
- 结构（位置）选择器 :first-child :last-child :nth-child(n) :nth-last-child(n)
- 目标伪类选择器 “target”当前活动状态只有一个
伪元素选择器 ::before ::after ::selection
属性选择器

优先级
- 标签选择器 0，0，0，1
- 伪元素选择器，属性选择器，伪类选择器，类选择器 0，0，1，0
- id选择器 0，1，0，0
- 行内样式 1，0，0，0
- 每个!import的贡献值无穷
注意：优先级之间的叠加不存在进位，高位优先级永远高于低位

7. css动画的实现和使用js动画和css动画的区别

8. BFC是什么

块级格式化上下文，用于清除浮动，防止margin重叠
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
生成BFC的元素：
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为 inline-block、table-cell、table-caption、flex、inline-flex的元素
- overflow不为visible的元素

9. z-index的定位方法

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素会处于较低顺序元素之前。z-index可以为负值，且z-index只能在定位元素上奏效，改属性设置一个定位元素沿z轴的位置。
属性值有：

auto：默认，堆叠顺序与父元素相等
number
inherit：从父元素继承z-index属性的值

10. display属性

none
block
block元素会单独占一行，多个block元素会各自新起一行，默认情况下：block元素宽度自动填满其父元素宽度。可设置height，width（会换行），margin，padding属性
inline-block
将对象呈现为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。可使得该元素既具有block的宽度高度特性又具有inline的同行特性。
inline
inline元素不会单独占一行，多个相邻的行内元素会排列在同一行内，直到一行排列不下，才会新换一行，宽度随内容变化而变化。设置width和height无效。水平方向的padding-left，padding-right，margin-left，margin-right产生边距想过，竖直方向上不产生边距效果。
flex
flex（flexible box）布局，弹性布局，用来为盒状模型提供最大的灵活性，指定容器display:flex即可
其属性可分为容器属性和元素属性
- 容器属性
  - flex-direction：决定主轴的方向
    - [row | cloumn]
  - flex-wrap：决定换行规则
    - [nowrap 默认 | wrap | reverse]
  - flex-flow：< flex-direction >||< flex-wrap >
  - justify-content：对其方式，水平主轴对齐方式
    - [flex-start | flex-end | center | space-between | space-around]
  - align-items：单行对其方式，竖直轴线方向
    - [stretch 默认 | center | flex-start | flex-end]
  - align-content：多行对其方式，前提是设置display:flex; flex-direction:row; flex-wrap: wrap;
    - [stretch 默认 | center | flex-start | flex-end | space-between | space-around]
- 元素属性
  - order：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
  - flex-grow：定义项目的放大比例，即使存在空间，也不会放大
  - flex-shrink：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义某个item的值为0，则为不缩小
  - flex-basis：定义了在分配多余的空间，项目占据的空间
  - flex：flex-grow || flex-shrink || flex-basis，默认“0 1 auto”
  - align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items；默认属性为auto，继承父元素的align-items

11. 垂直居中

父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
父元素固定宽高，子元素设置position：absolute；margin：auto平均分配margin
利用transform属性。子元素设置position：absolute；left：50%；top：50%；transform：translate（-50%，-50%）
将父元素设置程display：table；子元素设置为单元格display：table-cell
弹性布局display：flex。设置align-items：center；justify-content：center