前端面试之css_上下两个div设置margin为20px两个div的间距是多少为什么-CSDN博客

本文链接：https://blog.csdn.net/cc9200/article/details/101675320

1.行内元素与块级元素区别

1.1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

1.2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

1.3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

1.4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

原文链接：https://blog.csdn.net/qq_40283423/article/details/84941832

2.flex布局

原文链接：https://www.jianshu.com/p/4290522e1560

2.1采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。子元素，项目。父元素，容器。

容器的属性

以下6个属性设置在容器上。

flex-direction ： row|row-reverse|column|column-reverse;主轴和交叉轴上的对齐方式

flex-wrap :nowrap|wrap|wrap-reverse; 一条轴线排不下，如何换行。如果不换行，宽度不够，等比压缩内部盒子宽度。高度同理。

flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content :flex-start|flex-end|center|space-between|space-around; 定义了项目在主轴上的对齐方式。

align-items :flex-start|flex-end|center|baseline|stretch; 定义项目在交叉轴上如何对齐。

项目的属性

以下6个属性设置在项目上。

order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以是负数。

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

3.css预处理器

内容来源：https://blog.csdn.net/ly2983068126/article/details/77737292

学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。换句话说，CSS基本上是设计师的工具，不是程序员的工具。

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀。

CSS 预处理器为我们带来了几项重要的能力，由浅入深排列如下：

1.文件切分

CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。

2.模块化

3.选择符嵌套

4.变量

5.运算

6.函数

7.Mixin

4.CSS伪元素

:before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容

5.如果相对高度设置无效，会是什么原因？

父级元素的高度是auto计算而来，不确定;所以子级元素的相对高度无效。

或者本元素就是inline，并非block。

6.css3新特性

CSS3选择器 .class #id

边框（Borders）border-image border-radius box-shadow

背景 background-clip background-origin background-size

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

文本效果

hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

字体自定义字体

转换和变形

transform

适用于2D或3D转换的元素

过渡

transition

简写属性，用于在一个属性中设置四个过渡属性。

动画

animation

7.display、float、position的关系

1，如果'display'设置为'none'，用户端必须忽略掉'position'和'float'。

2.float不为none，浮起，不可能再独占一行，而且可以设置高宽，display变为inline-block,

8.margin的计算方式问题

1.百分比是相对于谁的高度？父级元素的width

对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

2.两个并列的盒子，上下都有margin时，下面元素margin开始计算的位置是哪里？上面盒子的border

上下两个div设置margin为20px，两个div的间距是多少？20px
上下两个div设置,上面元素margin为20px，下面元素margin为40px，两个div的间距是多少？40px
同级关系时,垂直方向上两个盒子之间的margin会重叠

水平方向上两个盒子之间的margin会叠加
包含关系时，外层盒子为空时，不为空时

//html
<body>
    <div id='a'>
        <div id='b'></div>
    </div>
</body>

//css
    <style>
        body {
            height: 1000px;
        }

        div#a {
            width: 400px;
            height: 400px;
            background-color: dimgrey;
            margin: 30px;
        }

        div#b {
            width: 100px;
            height: 100px;
            background-color: grey;
            margin: 40px;
        }
    </style>