2020最全前端面试系列（CSS）（盒模型、flex）

2401_86401193

于 2024-09-02 21:32:36 发布

阅读量644

点赞数 4

文章标签：前端 css

本文链接：https://blog.csdn.net/2401_86401193/article/details/141830915

版权

}

.parent {

position: relative;

}

.child {

position: absolute;

margin: 0 auto;

}

.parent {

display: flex;

justify-content: center;

}

垂直居中

// 只适用于单行行内元素

.parent{

height: 100px;

}

.child{

line-height: 100px;

}

.parent{

display: table-cell;

vertical-align: middle;

}

.parent{

display:flex;

align-items: center;

}

水平垂直居中

.parent{

display: table-cell;

text-align: center;

vertical-align: center;

}

.child{

display: inline-block;

}

.parent{

position: relative;

}

.child{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.parent{

display:flex;

align-items: center;

justify-content: center;

}

Position

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

选择器

（1）普通选择器：通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:

（2）伪元素选择器::

（3）组合选择器：后代选择器、子选择器、兄弟选择器

优先级：

内联样式：1000；

id选择器： 100；

类、伪类和属性选择器：10；

标签选择器和伪元素选择器：1.

超链元素伪类的设置顺序:link :visited :hover :active

盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）、内边距（padding）、边框（border），外边距（margin）四个部分。

CSS3盒模型

box-sizing: border-box;

width = content + padding + border

标准盒子模型＝ margin + border + padding + content （content = width | height）

IE盒模型

box-sizing: content-box;

width = content;

IE盒子模型＝ margin + content （content = border + padding + width | height）

边距重叠

display: none 和 visibility: hidden 的区别

display: none 不在文档流中占位，浏览器也不会解析该元素。

visibility: hidden 在文档流中占位，浏览器会解析该元素，可理解为透明度为0的效果。

使用visibility: hidden 比display: none 性能上要好。

display: none切换显示时，页面产生回流reflow（页面中的部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建）。

而visibility: hidden切换是否显示时则不会引起回流，只是元素的外观被改变，且在没有改变布局的情况下发生

扇形loading

移动端适配

清除浮动

为什么要清除浮动？

设置浮动会造成元素脱离文档流，引起浮动塌陷（父元素自身没有设置高度，子级元素浮动引起的父元素高度为0）

清除浮动的几种办法

给父元素设置 overflow: hidden/auto 或 float: left 或 position: absolute 或 position: relative，触发块级格式化上下文（BFC），从正常文档流脱离，但专门这样设置，可能会改变布局。
在子元素后面添加空的block元素，并设置其样式为 clear: both。添加了额外的元素，语义不明。
（最佳方法）父元素设置伪类after，设置其样式为 clear: both。

.parent::after{

content: ‘’;

display: block;

clear: both;

}