CSS选择符&布局CSS选择符有哪些？哪些属性可以继承？ CSS选择器：通配（*），id选择器（#），类选择器（.），标

核心概念与基础

CSS选择器

通配（*）
id选择器（#）
类选择器（.）
元素选择器（div，p，h1）
相邻选择器（+）
后代选择器（ ul li）
子元素选择器（ >）
属性选择器（[title = 'haha']）

选择器优先级

!important > 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配符。

CSS属性哪些可以继承

文字系列：font-size，color，line-height，text-align。
不可实现继承：border、padding、margin。

能继承的属性都是不影响布局的，简单说：都是和盒子模型没关系的。

行内元素有哪些？块级元素有哪些，空（void）元素有哪些

行内元素(不独占一行，行内元素能包含行内元素，不能包含块级元素)：
行内元素有：span，img，input...
块级元素（独占一行，可以包含行内元素、块级元素）：
块级元素有：div，footer，header，section，p,h1...h6...
空元素：br，hr...

diplay有哪些值？说明他们的作用（元素之间的转换）

none 隐藏元素
block 元素转换成块元素，独占一行，可以设置宽高
inline 元素转换成行内元素，不独占一行，并且不能设置宽高。
inline-block 元素转换成行内块元素，不独占一行，可以设置宽高

如何让一个元素消失

display:none 会完全移除元素，不占用布局空间，没有任何位置，没有大小宽高。
visibility：hidden 元素会隐藏但仍占用布局空间（元素的大小依然保持），visibility属性默认值是show，
opacity：0 元素保持占位并保持可交互，但完全透明。占据布局空间。

opacity 和 rgba 区别

rgba 表示颜色的方式，它的格式为rgba(red, green, blue, alpha)，其中alpha代表透明度，取值范围从0(完全透明)到1(完全不透明)‌1

opacity属性用于设置元素的透明度，其值范围也是从0(完全透明)到1(完全不透明)。当使用opacity设置透明度时，这个效果会应用到元素及其所有子元素上‌1

::before和::after中双冒号和单冒号有什么区别？::before和::after这2个伪元素的区别

单冒号表示伪类，定义元素的特殊状态，去改变元素的样式，双冒号表示伪元素，为html中没有的元素设置样式。

::before 表示元素之前添加隔离，防止margin合并，::after 表示元素之后清除浮动，或者添加样式。

nth-child和nth-of-type区别

nth-child 选择器先按照位置选择元素，再考虑元素类型。
nth-of-type 先过滤元素类型，再找元素位置。

<style>
    /*只要判断奇数行即可，再判断是不是div元素*/
    div:nth-child(2n+1){
        color:red
    }
    /*先过滤所有的div元素，再找奇数行的div元素*/
    div:nth-nth-of-type(2n+1){
        color:red
    }
<style>

line-height和height区别

line-heigt是每行文字高度，文字换行高度增大（行数*行高）
height 代表盒子高度，是死值。

scoped作用

作用：关键字为 style 标签加作用域，可以让样式仅作用于当前组件，避免样式污染。这在大型项目或组件库开发中非常实用。
原理：给节点新增定义属性，然后css根据属性选择器添加样式

Vue中如何做样式穿透

父元素 /deep/子元素

盒模型

CSS的盒子模型区别：

标准盒子模型：margin、border、padding、content
IE盒子模型：margin、content（border+padding+content）

通过CSS如何转换盒子模型

box-sizing：content-box //标准盒模型
box-sizing：border-box //IE盒模型

行内块的幽灵空白问题

产生问题： 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案

方案1:给行内块设置vertical，值不为baseline即可，设置middel、bottom、top均可。
方案2；若父元素中只有一张图片，设置图片为display:block
方案3:给父元素设置font-size：0.如果该行内块内部还有文本，则需要单独设置font-size。

元素之间的空白问题

<style>
    div {
        height:200px;
        background-color:gray;
        font-size:0px;
    }
    .s1 {
        background-color:skyblue;
    }
    .s2 {
        background-color:orange;
    }
    .s3 {
        background-color:green;
    }
</style>
<div>
    <span class="s1">人之初</span>
    <span class="s2">人之初</span>
    <span class="s3">人之初</span>
    <hr>
    <img src="../images/wukong.jpg">
    <img src="../images/wukong.jpg">
    <img src="../images/wukong.jpg">
</div>

产生原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案

方案1:去掉换行和空格（不推荐）
方案2:给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）

布局小技巧

1.行内元素、块内元素，可以被元素当做文本处理即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。例如：text-align，line-height，text-indent等。

2.如何让子元素，在父亲中水平居中：若子元素为块元素，给父元素加上：margin：0 auto；若子元素为行内元素、行内块元素，给父元素加上：text-align：center

3.如何让子元素，在父元素中垂直居中若子元素为块元素，给子元素加上：margin-top，值为：（父元素content-子元素盒子总高）/2 若子元素为行内元素，行内块元素：让父元素的height = line-height，每个子元素都加上：vertical-align：middle；补充：若想绝对垂直居中，父元素font-size设置为0.

布局与定位

浮动

浮动布局特点

脱离文档流
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
不会独占一行，可以与其他元素公用一行
不会margin合并，也不会margin塌陷，能够完美的设置方向的margin和padding
不会像行内块一样被当做文本处理（没有行内块的空白问题）

浮动后会有影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素。

解决浮动影响（重点第五种）

第一种：解决方案：给父元素设置高度
第二种：给父元素也设置浮动，带来其他影响
第三种：给父元素设置overflow：hidden （触发BFC）
第四种：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear：both。
第五种；给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。==》推荐使用

.parent::after {
     content:'',
     display:block,
     clear:both
 }

布局中一个原则；设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

定位

相对定位

如何设置相对定位

给元素设置position：relative即可实现相对定位
可以使用left、right、top、bottom四个属性调整位置

相对定位的参考点在哪里？

相对自己原来的位置

相对定位的特点：

不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是：
- 定位的元素会盖在普通元素之上。
- 都发生定位的元素，后写的元素会盖在先写的元素之上。
left不能和right一起设置，top和bottom不能一起设置。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对定位的元素，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。或者对自己微调。

绝对定位

如何设置绝对定位

给元素设置postion：absolute即可实现绝对定位
可以使用left、right、top、bottom四个属性调整位置

绝对定位的参考点在哪里？

参考它的包含块。

什么是包含块？
1.对于没有脱离文档流的元素：包含块就是父元素；
2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

绝对定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？--默认宽、高都被内容所撑开，且能自由设置宽高。

固定定位

如何设置固定定位

给元素设置postion：fixed即可实现固定定位
可以使用left、right、top、bottom四个属性调整位置

固定定位的参考点在哪里？

参考它的视口。

什么是视口？-- 对于PC浏览器来说，视口就是我们看网页的那扇“窗户”

固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left不能和right一起设置，top和bottom不能一起设置。
固定定位、浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过margin调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。

可以通过css属性z-index调整元素的显示层级。

z-index的属性值是数字，没有单位，值越大显示层级越高

只有定位的元素设置z-index才有效。

如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

定位的特殊应用

父元素设置相对定位，子元素设置决定定位，子元素向撑满父元素，left、right、top、bottom 设置为0。
父元素设置相对定位，子元素设置top：0，bottom：0，left：0，right：0，marin：auto 垂直水平全局居中。该定位元素必须要设置宽高，

width:400px
height:100px;
background-color:orange
fonst-size:40px
positon:absolute;
left:50%
margin-left:-200px;
top:50%
margin-top:-50px

`position: relative`、`absolute`、`fixed`、`sticky` 的区别？

绝对定位和固定定位会脱离文档流，相对定位参照自身正常位置，决定定位和固定定位参照最近的已定位祖先元素或初始包含快；粘性定位滚动到特定位置时表现出固定定位的行为。决定定位和相对定位配合使用，在设置图标的数字气泡时常常使用，固定定位通常用于按钮悬浮，导航栏，广告悬浮。

position有哪些值？分别是根据什么定位

static[默认]没有定位
fixed 固定定位，相对于浏览器窗口进行定位
relative 相对于自身定位，不脱离文档流
absolute 相对于第一个有relative父元素，脱离文档流

BFC

概念

BFC块级格式上下文就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC的布局规则

内部的盒子会在垂直方向，一个个地放置，每个块元素独占一行。
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
计算BFC的高度时，浮动元素也参与计算。

形成BFC的条件

float属性不为none
overflow为auto、scroll、hidden
display为inline-block、table-cell、table-caption、flex、inline-flex中的任何一个
position为absolute或fixed

产生bfc有几种方式 float + display + overflow + position

开启了BFC能解决什么问题

防止margin重叠（发生在同一个BFC内的相邻块级元素之间）。
清除浮动（父元素创建 BFC 可以包裹住其内部的浮动元素，就算子元素浮动，元素自身高度也不会塌陷。）
阻止元素被浮动元素覆盖（创建 BFC 的元素不会与浮动元素重叠）。
防止margin塌陷问题（在首末元素的设置的margin-top、margin-bottom）

响应式设计与移动端适配

px、em、rem、%、vw、vh、rpx的区别

rpx：小程序专用相对单位，用于在不同设备上实现响应式布局。1rpx在不同设备上会自动转换成不同的物理像素，以适应不同的屏幕密度（永远按照750来进行映射，例如：750rpx是750 的十分之一，如果在375的屏幕上，则会映射成37.5）
px:
em:相对于当前元素的font-size的倍数
rem：相对于根元素的font-size的倍数
% 相对于父元素的百分比
vh 浏览器窗口的高度百分比
vw浏览器窗口的宽度百分比

移动端适配方案有哪些

1.常见的移动端布局方式

FlexBox布局：适用于移动设备的自适应布局。它可以用于创建灵活的、自适应的网页布局，以适应不同屏幕尺寸和方向。
Grid布局：允许将页面划分为行和列，它可以用于移动设备上创建复杂的网格布局。
流式布局（百分比布局）：流式布局使用相对单位（如百分比）来定义元素的宽度和间距，使页面内容能够在不同屏幕尺寸下自动调整。
vw/vh布局：使用vm和vh作为单位，可以实现相对于视窗尺寸的自适应布局，适用于移动设备。
rem布局：使用rem单位来定义元素的尺寸，可以实现相对于根元素的自适应布局，适合移动设备。
响应式布局（媒体查询）：媒体查询是一种基本的响应式设计技术，允许根据不同的屏幕尺寸和分辨率应用不同的CSS规则，以确保页面在移动设备上呈现良好。

2.适配方案 1.媒体查询媒体查询是一种CSS3技术，用于根据设备特性和屏幕尺寸来应用不同呢的样式和布局。可在移动和PC设备上使用同一套代码，减少维护工作。但是需要处理多种设备和屏幕尺寸，可能导致复杂的样式表。

<link rel="stylesheet" media="(max-width:500px)" href ="mobile.css">
<link rel="stylesheet" media="(min-width:980px)" href ="pc.css">

@media screen and (max-width:768px){
    /*在屏幕宽度小于或等于768px时应用的样式*/
}
@media screen and (orientation:landscape){
    /*在屏幕为横向时应用的样式*/
}
@media screen and (orientation:portrait){
    /*在屏幕为纵向时应用的样式*/
}
@media screen and (min-width:768px) and (max -width:1024px){
    /*在屏幕宽度768px到1024px之间应用的样式*/
}

2.rem适配 rem适配的核心思想是根据屏幕分辨率动态调整根元素的字体大小，以便实现px和rem之间的转换。设计师会按照设备像素（device pixel）为单位制作设计稿，并使用一个比例来将设计稿中的像素值转换为rem单位值。

例如px2rem的使用

（假设设计稿750像素），设置的比例为75即会自动转换成10rem （假设设计稿375像素），设置的比例为37.5即也会自动转化成10rem。

设置font-size大小即可

let docEl = document.documentElement
function setRemUnit(){
    //
    let rem = docEl.clientWith / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit()
window.addEventListener("resize",setRemUnit)

3.vm,vh适配 vm和vh是相对视口单位，用于响应式设计，可以根据视口的大小来调整元素的大小。与rem不同，它们不需要根字号的设置，而是直接基于视口大小进行计算。按照设计稿的尺寸，将px按比例计算转为vw和vh。假如设计稿750px，将其分成100份，每一份7.5px（转化比例7.5）

.box {
    width:375px;
    height:100px;
    font-size:40px;
    line-height:100px;
}
//转换后
.box {
    width:50vw;
    height:13.333333vw;
    font-size;5.333333vw;
    line-height:13.333333vw;
}

常见问题与解决方案

如何实现水平和垂直居中

居中的前提：父元素需要是块元素，而且有宽高

第一种：行类、行类块元素

text-align：center；line-height为height

第二种：flex 布局

<div class='container'>
   <div class='main'>main</div>  
</div>
.container {
    display:flex; 
    justify-content:center;  
    align-items:center;
    width:300px;
    height:300px;
    border:5px solid #ccc;
}
.main {
    background:red;
}

第三种：position定位 + 位移

<div class='container'>
   <div class='main'>main</div>
</div>
.container {
    position:relative
    width:300px;
    height:300px;
    border:5px solid #ccc;
}
.main {
    position:absolute;
    top:50%;
    left:50%;   
    background:red;
    transform:translate(-50%,-50%)  
}

第四种： position定位+ margin：0 auto ，四边都设置为0

<div class='container'>
   <div class='main'>main</div>
</div>
.container {
    position:relative
    width:300px;
    height:300px;
    border:5px solid #ccc;
}
.main {
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

总结：

行类、行类块水平、垂直居中；text-align：center；line-height为height
flex布局：display:flex; justify-content:center; align-items:center;
position定位布局1：父元素设置相对定位，子元素设置绝对定位，子元素设置top：0，botom：0，left：0，right：0，margin：auto
postion定位布局2:left：50%，top：50%，margin-left：子元素宽度的负一半，margin-top：子元素高度的负一半。

两列布局实现

<style>
    .aside{
        width:300px;
        height:100px;
        background:green;
        float:left;
    }
    .main{
        background:red;
        overflow:hidden; // main 就形成了bfc了
    }
</style>
<div>
    <!--左边固定，右边自适应 层叠上下文，使用浮动改变层叠顺序 -->
    <div class="aside">菜单</div>
    <div class="main">内容内容内容内容内容内容内容</div>
</div>

如何实现圣杯布局/双飞翼布局

圣杯布局、双飞翼布局（一般用于PC端网页布局）

目的

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来（主要内容）实现方法：float + margin

没有使用圣杯布局、双飞翼布局，center放在最后不利于seo优化，基于文档流的，重要的东西在前面。center里面的最重要，所以出现了圣杯布局、双飞翼布局。

<div id="container">
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
    <div id="center" class="column">center</div>
</div>
<style>
    #center {
        width:100%;
        background:green;
    }
    #left {
        widht:200px;
        background:red;
        float:left;
    }
    #right {
        widht:300px;
        background:red;
        float:right;
    }
    .column {
        height:200px;
    }
</style>

圣杯布局：

center在前，left、right在后，
全局浮动（原则上在同一行，但是center有限制，宽度100%）
父容器两端设置pandding-left，padding-right；
采用位置和负margin来实现，（-100%相当于移到了center的开始位置，postion:relative;left：-200px; 相对自己的位置左移到父视图开始位置。）

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
<style>
    #container{
        padding-left:200px;
        padding-right:300px;
    }
    #center {
        width:100%;
        background:red;
    }
    #left {
        widht:200px;
        margin-left:-100%;
        postion:relative;
        left：-200px;
        background:green;
    }
    #right {
        widht:300px;
        background:blue;
        margin-left:-300px; // 以自己宽度先移到center的右侧
        postion:relative;
        right:-300px;
    }
    .column {
        float:left;
        height:200px;
    }
</style>

双飞翼布局

优势比圣杯布局简单，问题就是增加了个盒子，来撑开。

center在前，left、right在后，center在外层套一个Container容器，
全局浮动（原则上在同一行，但是center有限制，宽度100%）
left设置margin：-100%压在center上，right设置margin-left：负的右侧宽度压在center上。
center左右两侧设置maring-left，margin-right。向中间收缩，让出left、right压的部分。

<div id="container">
    <div id="center" class="column">
        <div id="center-wrapper">center-wrapper</div>
    </div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
<style>
    #center {
        width:100%;
        background:red;
    }
    #center #center-wrapper{
        margin-left:200px;
        margin-right:300px;
    }
    
    #left {
        widht:200px;
        margin-left:-100%;
        background:green;
    }
    #right {
        widht:300px;
        margin-left:-300px;
        background:blue;
    }
    .column {
        float:left;
        height:200px;
    }
</style>

如何实现 1px 边框问题？

通过使用CSS伪元素（如::before或::after）和transform: scale()来模拟0.5px边框。

解决浮动影响（重点第五种）

第一种：解决方案：给父元素设置高度
第二种：给父元素也设置浮动，带来其他影响
第三种：给父元素设置overflow：hidden （触发BFC）
第四种：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear：both。
第五种；给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。==》推荐使用

.parent::after {
     content:'',
     display:block,
     clear:both
 }

布局中一个原则；设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

css塌陷（因为浮动元素引起的塌陷问题）

<style>
    header,footer {
        height:60px;
        backgroud:red;
    }
    .main-left{
        backgroud:yellow;
        width:300px;
        height:300px;
        float:left;
    }
    .main-right{
         backgroud:red;
        width:300px;
        height:300px;
        float:right;
    }
    .aside{
        width:300px;
        height:100px;
        background:green;
        float:left;
    }
    .main{
        background:red;
        overflow:hidden; // main 就形成了bfc了
    }
</style>
<div class="main">
    <!--左边固定，右边自适应 层叠上下文，使用浮动改变层叠顺序 -->
    <header>头部<header>
    <div class="main-left">左边</div>
    <div class="main-right">右边</div>
    <footer>底部<footer>
</div>

解决办法

触发BFC，清除浮动

<header>头部<header>
    <!-- 会把子元素截取，形成BFC，BFC会计算浮动元素的高度 -->
   <div style="overflow:hidden">
        <div class="main-left">左边</div>
        <div class="main-right">右边</div>
   </div>
<footer>底部<footer>

2.通过clear：both清除浮动，会多产生一个元素

<header>头部<header>
    <div class="main">
        <div class="main-left">左边</div>
        <div class="main-right">右边</div>
        <div style="clear:both">
    </div>
<footer>底部<footer>

3.通过伪元素清除浮动

<style>
    .main::after{
           content:'',  
           display:block,  
           clear:both;
    }
</style>
<header>头部<header>
    <div class="main">
        <div class="main-left">左边</div>
        <div class="main-right">右边</div>
        <div style="clear:both">
    </div>
<footer>底部<footer>

BFC的使用场景

如何让浮动元素和周围的内容等高(解决子元素浮动而父元素高度塌陷的问题)

<style>
/*
    产生bfc有几种方式 float + display + overflow + position
    
    float： let ｜ right 因为子元素浮动，导致父元素浮动不可取，代码中要清除浮动
    display: table | inline-block| table-caption| flex 结构就变化。
    overflow auto | scroll | hidden 创建bfc hidden 有风险产生， 截取定位子元素的问题。
    position absolute 缺点转换成定位了
    
*/
    *{
        margin:0;
        padding:0;
    }
    .box {
        backgroud:red;
        /*flat:left;*/
        /*display:table*/;
        overflow:hidden
    }
    .float {
        width:200px;
        height:200px;
        backgroud:green;
        flat:left;
    }
</style>
<! --计算BFC的高度时，浮动元素也参与计算，bfc中的内容（浮动元素与其他元素不能重叠）-->
<div class="box">
    <div class="float">浮动盒子</div>
    <p>容器内容</p>
</div>

没有设置bfc前，是这样显示，因为子元素浮动，父元素高度塌陷。

设置了bfc后，是这样显示

margin塌陷问题

什么是margin塌陷？

第一个子元素设置margin-top，最后一个子元素设置margin-bottom。

如何解决margin塌陷？

方案1:给父元素设置不为0的padding
方案2:给父元素设置宽度不为0的border.
方案3:给父元素设置css样式overflow:hidden（溢出显示隐藏）

相邻margin重叠问题

什么margin重叠？

上下兄弟元素的magin-bottom和margin-top合并，取一个最大的值，而不是相加。

什么margin重叠？ 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

外边距重叠计算规则

两个正数的外边距取最大的边距作为外边距
如果一个为正数，一个为负数，最终的外边距为两者之和
如果两个值都是负数的话，最终的外边距取绝对值最大的值

如何解决margin重叠 其实无需解决，布局的时候上下兄弟元素，只给一个设置上下外边距就可以了。

方式一：在父元素中可以设置border防止属性溢出，但是会导致多出1px

<style>
    .block1 {
        width:100px;
        height:100px;
        backgroud:red;
        margin-bottom:50px;
    }
    .block2 {
        width:100px;
        height:100px;
        backgroud:green;
        margin-top:100px;
        /*最终以间距大的为准*/
    }
</style>
<div class="block1">
<div class="parent" style="border-top:1px solid transparent">
    <div class ="block2"></div>
</div>

方式二：给父元素设置BFC，让BFC的方式有float，position，overflow：hidden，flex，虽然好用但是，内部和外部无法互相影响

<div class="parent" style="overflow：hidden">
    <div class ="block2"></div>
</div>

方式三：多产生一个元素，虽然用不到但是影响结构

<div class="block1">
<div style=“display:table”></div>
<div class ="block2"></div>

方式四：鉴于添加一个元素，隔开会多产生一个元素，虽然用不到但是影响结构，就想到用伪类

.parent::before {
    content:'';
    display:table;
    height:0
}
<div class="block1">
<div class="parent" >
    <!-- 使用伪类，添加一个平级的bfc渲染区域，通过bfc来进行隔离， -->
    <div class ="block2"></div>
</div>

 <!-- 通过bfc的阻断功能，解决margin合并问题，margin溢出问题 -->

CSS选择符&布局

核心概念与基础

CSS选择器

选择器优先级

CSS属性哪些可以继承

行内元素有哪些？块级元素有哪些，空（void）元素有哪些

diplay有哪些值？说明他们的作用（元素之间的转换）

如何让一个元素消失

opacity 和 rgba 区别

::before和::after中双冒号和单冒号有什么区别？::before和::after这2个伪元素的区别

nth-child和nth-of-type区别

line-height和height区别

scoped作用

Vue中如何做样式穿透

盒模型

通过CSS如何转换盒子模型

行内块的幽灵空白问题

元素之间的空白问题

布局小技巧

布局与定位

浮动

浮动布局特点

浮动后会有影响

解决浮动影响（重点第五种）

定位

相对定位

如何设置相对定位

相对定位的参考点在哪里？

相对定位的特点：

绝对定位

如何设置绝对定位

绝对定位的参考点在哪里？

绝对定位元素的特点

固定定位

如何设置固定定位

固定定位的参考点在哪里？

固定定位元素的特点

定位层级

定位的特殊应用

position: relative、absolute、fixed、sticky 的区别？

position有哪些值？分别是根据什么定位

BFC

概念

BFC的布局规则

形成BFC的条件

开启了BFC能解决什么问题

响应式设计与移动端适配

px、em、rem、%、vw、vh、rpx的区别

移动端适配方案有哪些

常见问题与解决方案

如何实现水平和垂直居中

总结：

两列布局实现

如何实现圣杯布局/双飞翼布局

圣杯布局：

双飞翼布局

如何实现 1px 边框问题？

解决浮动影响（重点第五种）

css塌陷（因为浮动元素引起的塌陷问题）

BFC的使用场景

margin塌陷问题

什么是margin塌陷？

相邻margin重叠问题

什么margin重叠？

`position: relative`、`absolute`、`fixed`、`sticky` 的区别？