CSS基础知识点_两个div上下排列-CSDN博客

本文链接：https://blog.csdn.net/TanMengyi/article/details/119982011

1、什么是盒模型？

页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：外边距（margin）、边框（border）、填充（亦称内边距）（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

标准盒模型：box-sizing:content-box(W3C)

宽度为content的宽度

IE盒模型：box-sizing：border-box(IE)

宽度为content + border + padding的宽度

2、行内、块级元素有哪些？

行内：

a – 锚点
span – 常用内联容器，定义文本内区块
img – 图片
input – 输入框
button-按钮
label – 表格标签
textarea – 多行文本输入框
select – 项目选择
br – 换行
strong – 粗体强调

块级：

div – 常用块级容器，也是CSS layout的主要标签
p – 段落
h-标题标签和水平线
pre – 格式化文本
form – 交互表单
ol – 有序表单
ul – 无序列表
li
dl – 定义列表
menu – 菜单列表
table – 表格

区别

行内元素inline: 不能设置宽度和高度，左右可以设置padding和margin，上下设置无效；元素排列在一行，中间会有间隔

块级元素block: 自成一行，可以设置宽度高度，和内外边距

行内块元素inline-block：可以设置宽度高度，元素排列在一行

如何取消行内元素的间隙？

删除标签之间的空白（有效果但是不建议使用，代码看起来不太规范，一般不使用）

给转化显示模式为行内块的盒子添加margin-left: -10px;，取负值，可以把间隙遮挡。

给转化显示模式的盒子的父元素添加属性font-size: 0;,（可以取消间隙，但是会影响父元素盒子内其他元素的字体大小）
借助HTML注释

3、padding:1px2px3px;则等效于什么？

这四个值，分别代表上、右、下、左。如果没有写下的话，那就下复制上的，同理左复制右的值。

当padding的值只有一个时，就是后面三个都复制了第一个
当写两个时，就是写了top和right，因此bottom复制top，left复制right
当写了三个时，就是写了top，right，bottom，因此left复制right。

4、什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

同级关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个。

父子关系的边距重叠：
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。

5、什么是BFC？

就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

如何触发BFC

这里简单列举几个触发BFC使用的CSS属性

浮动元素，float 除 none 以外的值
overflow: hidden
定位元素，position（absolute，fixed）
display: table-cell，inline-block，flex

6、那么BFC的原理是什么呢？

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

7、BFC的使用场景有哪些呢

清除浮动解决高度塌陷、自适应布局、解决垂直边距重叠
参考: https://juejin.cn/post/6950082193632788493

8、什么是高度塌陷，清除浮动？

原因是，浮动的元素会脱离文档流，什么叫脱离文档流呢，举个例子，有一天你跟你老板说：“老子不想干了，世界那么大，我想去看看”，那从此以后，你老板就管不了你了。脱离文档流同理，一个元素一旦浮动，就会脱离文档流，那么他的父元素也管不了他了，布局也会往前推进，所以才出现了上面父元素高度坍塌的现象。
这时候就要提到BFC

9、清除浮动的方法

1、给父元素设置overflow：hidden
缺点，当父元素中有文本过长时，也会被隐藏
2、增加一个元素，clear：both
3、给父级添加伪元素进行clear

.box::after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

9、样式优先级

!important>style>id>class>tag

10、css3新特性了解哪些？

选择器、flex弹性盒布局和多列布局、背景和边框、媒体查询、转换、动画等

11、display:none与visibility:hidden的区别

display：none, 会让元素完全从渲染树中消失，渲染时不会占据任何空间；是非继承属性
visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。是可继承属性

opacity 会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘

12、元素垂直水平居中？

flex

display: flex;
justify-content: center;
align-items: center;
transform + absolute
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
table-cell
display: table-cell;
text-align: center;
vertical-align: middle;
position + margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

参考：定宽高和不定宽高的水平垂直居中

13、问：说一下你知道的position属性，都有啥特点？

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。