CSS专项

最新推荐文章于 2023-02-06 15:21:44 发布

后知后觉sss

最新推荐文章于 2023-02-06 15:21:44 发布

阅读量137

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44604443/article/details/127917691

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1 display：none与visibility:hidden区别

display: none不占据空间，即不在文档流中，而visibility:hidden还在文档流中。

display: none子元素不可见。visibility:hidden的子元素如果设置visibility:visible则还可以看到

2 隐藏元素的方法

参考答案
display: none;

visibility: hidden;

opacity: 0;

也可以用left: -9999px或者transform: translateX(-9999px);将元素移出视口外部。

3 css画三角形

先把高度宽度都设置为0，边框设置宽度样式，想要哪个角就把其余三个border设为透明即可。例如，我想要最上面的三角形，那就把下、左、右设为透明。

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <style type="text/css">  
        #triangle {  
            /*1.内容区面积为0*/  
            width: 0;  
            height: 0;  
            /*2.设置边框样式*/  
            border: 10px solid;  
            border-color: transparent transparent red transparent;  
        }  
    </style>  
</head>  
<body>  
    <div id="triangle"></div>  
</body>  
</html>

4 盒模型

标准盒模型：width height只包含content
怪异盒模型：width height 包含content+padding+border
box-sizing设置 border-box 怪异盒模型
content-box 标准盒模型

5 盒模型盒子的宽度计算

题目
一个盒子，宽度设为100px，padding设为100px，整个在页面占多少px？

参考答案
盒子宽度 = width + padding + border + marign。

由于padding包括padding-left和padding-right，所以这个盒子水平占据100px + 100px × 2 = 300px。

6 两种盒模型对比

题目

在两种盒模型下获取div的宽度分别是多少？

参考答案
div的宽度指通过div.clientWidth获取的宽度，这个宽度包括content、padding和border。

标准盒模width指的是content的宽度，因此获取的宽度为200px + 10 × 2 = 220px。

怪异盒模型width包括content、border和padding，因此width是200px。

7 有哪些CSS选择器

参考答案
1、id选择器（#myid）
2、类选择器（.my-classname）
3、标签选择器（div,h1,p）
4、后代选择器（h1 p）后代选择器的祖先和后代之间用空格分割
5、相邻后代选择器（子）选择器（ul>li）
6、兄弟选择器（li~a）
7、相邻兄弟选择器（li+a）
8、属性选择器（a[rel=“external”]）
9、伪类选择器（a:hover,li:nth-child）
10、伪元素选择器（::before、 ::after）
11、通配符选择器（*）

8 css优先级

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

9 css优先级计算

题目
判断以下选择器优先级顺序
1、#foo div
2、#foo .bar div
3、#foo~.bar div

参考答案
根据知识点中介绍，这3个选择器优先级计算结果为：
0,1,0,1
0,1,1,1
0,1,1,1
后两个优先级计算结果相同，则后出现的优先级更高

12 为什么不推荐用多层css选择器

参考答案
由于选择器的匹配需要在整个DOM树中查找节点，层级越高性能越低，因此不建议CSS选择器层级太多。

13 css选择器处理

题目
div .child p是是从左边往右边开始定位还是从右边往左边开始？为什么？

参考答案
当存在后代选择器时候，CSS选择器的匹配是从右往左的，原因是从左往右匹配的话，需要遍历DOM树，可能会有多次回溯，而从右往左的话，先匹配所有的子节点选择器，然后向上查找，这样性能更好。

14 css居中

水平居中
行内元素的居中
父元素text-align: center;
块级元素居中
指定宽度后，设置margin: auto。
width: 100px; margin: 0 auto;

垂直居中
行内元素居中
设置line-height与height相等。
块级元素居中
● flex
● 已知高度
○ 用CSS3的新属性calc，计算top，top: calc(50% - 50px);
○ 用top + margin-top实现
position: relative;
height: 100px;
margin-top: 50%;
top: -50px;
● 未知高度：用margin-top: 50%; + translate: -50%实现

15 多列等高布局

16 元素margin合并

题目
两个兄弟盒子A在上、B在下，A margin-bottom：20px，B margin-top：30px A和B的最终距离是多少？
A和B是父子关系A在外、B在内，A margin-top：30px ，B margin-top： 20px，A和B之间的距离是多少？
边距塌陷的解决方法是什么？

参考答案
30px
30px
解决方法是触发BFC

17 BFC、IFC

BFC

BFC（block formatting context 块级格式化上下文）布局方式的核心就是“隔离”，让满足条件的元素内部的子元素不会影响到元素外部。
BFC触发条件
1、根元素（整个页面就是一个大的BFC）
2、float 为 left / right
3、 overflow 为 hidden auto scoll
4、 display 为 inline-block table-cell table-caption flex inline-flex
5、position 为 absolute fixed
BFC功能
BFC的初衷为了解决margin塌陷，但是BFC还有其他功能
● 解决垂直、包含塌陷
● 清除浮动
● 防止普通文档流被浮动元素遮挡（可以实现两栏布局）

IFC

IFC也是一种布局规则，inline元素和inline-block符合IFC的布局规则。

框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框时，它们在水平方向的内外边距+边框所占用的空间都会被考虑；在垂直方向上，这些框可能会以不同形式来对齐：水平的margin、padding、border有效，垂直无效。不能指定宽高;
行框的宽度是由包含块和存在的浮动来决定; 行框的高度由行高来决定

18 如何清除浮动

题目
为什么需要清除浮动？
如何清除浮动？
clear为什么能清除浮动？
overflow: hidden为什么能清除浮动？

参考答案
浮动的元素会造成父元素高度塌陷，因此需要清除浮动。
有3种办法：1. 在浮动元素后面增加一个元素，设置clear: both；2. 父元素设置伪元素，给伪元素设置clear: both；3. 父元素设置overflow: hidden。
设置clear的元素不受前面浮动元素影响，位置会放在浮动元素后面，因此可以把父元素撑开。
overflow: hidden让父元素形成一个BFC，所以可以清除浮动。

19 block、inline和inline-block的元素有什么差别

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

20 display属性

CSS的display有哪些值？

inline和block的区别？

inline的元素能设置宽高、margin属性吗？
参考答案
display的属性值：
● block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
● none 元素不显示，并从文档流中移除。
● inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
● inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
inline元素可以设置水平的padding、margin，但不能设置垂直的padding和margin，也不能设置width和height。