CSS总结

whisperSec

已于 2022-08-21 17:32:36 修改

阅读量164

点赞数

分类专栏：面试题总结文章标签： css css3 html

于 2021-04-23 18:15:03 首次发布

本文链接：https://blog.csdn.net/whisperSec/article/details/116064776

版权

面试题总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 实现垂直水平居中？

1. 已知子元素宽高

设置子元素为绝对定位，父元素为相对定位，通过calc计算

.father {
    position: relative;
}
.son {
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
}

设置子元素为绝对定位，父元素为相对定位，结合负margin

.father {
    position: relative;
}
.son {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

2. 已知父元素高度

子元素设为行级元素，父元素设置text-align和line-height

.father {
    text-align: center;
    height: 500px;
    line-height: 500px;
}
.son {
    display: inline-block;
}

3. 父元素和子元素宽高均未知

设置父元素为相对定位，子元素绝对定位，设置子元素边界为0，结合margin

.father {
    position: relative;
}
.son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

设置子元素绝对定位，left和top为50%，结合transfrom: translate()

.father {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

网格布局，可设置父类样式或者子类自身样式

// 1. 父类设置水平垂直居中
.father {
    display: grid;
    justify-items: center;
    align-items: center;
}

// 2. 子元素设置自身水平垂直居中
.father {
    display: grid;
}
.son {
    justify-self: center;
    align-self: center;
}

2. 两种盒模型的区别

1、标准盒模型
一块区域的总宽度 = width(content) + 2padding + 2border + margin

box的width属性 = content-width，不包括padding和border
2、IE6混杂模型（怪异模型）
一块区域的总宽度 = width + margin
width = 2padding + 2border + width(content)

box的width属性 = content-width + 2padding + 2border
3、box-sizing: border-box ; content-box

3. 列举一下行内和块级元素(至少6个)，以及二者的区别(笔试题)

block:

header center footer nav address div p form ul li table h1-h6
inline:

span img input label select textarea strong i em code sub sup
区别：

块级元素独占一行，宽、高、内边距、外边距可控。

行内元素和相邻的行内元素依次排列，宽高、上下的内边距和外边距不可控。

除非设置行内块元素

4. 说说你对语义化的理解

HTML语义化让页面结构更清晰，便于浏览器和搜索引擎解析，即使在没有CSS样式的情况下，也以一种文档格式显示，而且是容易阅读的；
搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重，利于SEO； - 阅读源代码的人更容易将网站分块，便于阅读理解和维护。

1. strong标签和b标签的区别

b标签只是一个简单的粗体标签，强调的是字体加粗的效果，strong标签具有语义化，更关注strong标签下的关键词，更利于SEO

2. i标签和em标签的区别

同上，i标签只是无意义的斜体，而em表示一般的强调文本，具有语义，更利于SEO

5. 利用CSS画出三角形和平行四边形

三角形和梯形利用border和transparent实现
平行四边形利用transform: skew(-30deg);实现

/* 三角形 */
.trangle {
    display: inline-block;
    border-width: 100px 100px 100px 100px;
    border-style: solid;
    border-color: transparent transparent orange;
}
/* 直角三角形 */
.spec {
    display: inline-block;
    border-width: 100px 100px 100px 0px;
    border-style: solid;
    border-color: transparent transparent orange;
}
/* 梯形 */
.trangle {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-width: 100px 100px 100px 100px;
    border-style: solid;
    border-color: transparent transparent orange;
}

/* 平行四边形 */
.parallelogram {
    width: 200px;
    height: 200px;
    background: orange;
    transform: skewX(-30deg);
}

6. position的取值方式有几种，sticky有了解过嘛？

absolute relative fixed sticky static inherit不常用

sticky粘性定位

元素在跨越特定阈值前为相对定位，之后为固定定位

.box {
    position: sticky;
    top: 10px;
    height: 100px;
    background-color: green;
}

sticky的应用场景

吸顶导航
固定侧边栏或者页脚
实现页面滚动条
列表锚点
时间轴

8. 为什么要清除浮动，不清除会有什么问题？有几种实现方式

float指定一个元素沿其容器的左侧或右侧放置，该元素会从正常的文档流中移除，产生浮动流。

会对后面元素的排版造成了影响，所以要清除浮动带来的副作用。

浮动的元素会具有行内块元素的特性
块级元素不能识别，比如image span 以及带有BFC属性的元素都可以识别到浮动的元素。

2. 清除浮动的几种实现方式

额外标签法

在浮动元素后添加一个空白的块级标签，设置clear:both属性

缺点：改变了DOM解构
触发父级BFC，inline-block, float , overflow

父级添加overflow属性，通过触发BFC的方式，实现清除浮动。

缺点：给父类增加了额外的属性，有可能影响元素的排版

使用after伪元素清除浮动

.clearfix::after {
	content: "",
	display: block;
	clear: both;
}

/* IE */
.clearfix {
	*zoom: 1
}

给父级添加双伪元素清除浮动

// 双伪元素清除浮动和单伪元素清除浮动的区别
.clearfix::before, .clearfix:after {
	content:"",
	display: block;
	clear: both;
}
/* IE */
.clearfix {
	*zoom: 1
}

双伪元素清除浮动，是清除容器的前后浮动，而after只能清除容器内部后面的浮动，如果容器外面的上方也有浮动元素，那下方的容器有可能跑到上方跟上面浮动的元素占一排
双伪元素清除浮动后等于是关闭了容器前后浮动流，无论前后有没有浮动流元素，都不会和当前容器产生任何关系