1-HTML+CSS

标签：BFC box 重叠 元素 开启 HTML div CSS

一、HTML

1. src和href的区别

请求的资源类型不同

• href主要建立当前元素和引用元素的链接关系，常用link, a 标签
• src是将其指向的资源下载并应用到当前位置上，常用标签script，img，ifame等

浏览器解析方式不同

• 用 href时，加载到对应位置的时，不会暂停其他资源的下载或行为。
  所以CSS样式可以放在html结构的头部优先加载（因为不影响页面的核心加载，只是HTML标签的对应样式表）
• 用src时候，会暂停其他资源的下载，直到当前资源加载，编译，执行完成。
  所以js脚本一般放到document底部加载而不是头部

二、CSS

1. CSS盒子模型概念

宽度：

• 标准盒子的总宽度=width+左右padding+左右border之和+左右margin之和
• IE盒模型的总宽度=width+margin（因为 width=content+padding+border）

高度：

• 盒子的总高度=height+上下padding之和+上下border之和+上下margin之和
• IE盒模型的总高度=height+margin（因为 height=content+padding+border）

box-sizing:content-box(默认) 即标准盒子模式
box-sizing:border-box 是IE盒模型

标准盒模型 vs IE盒模型

• （标准盒模型）在box-sizing属性不设置（默认为content-box）时，width=元素的内容区
• （IE盒模型）在box-sizing属性为border-box的时，width=元素内容区+padding+border

---

2. BFC

2.1 什么是BFC

什么是BFC？看这一篇就够了

BFC（Block formatting context），块级格式化上下文。

BFC就是页面上的一个隔离的独立渲染容器，容器内的子元素与外面的元素互不影响。

BFC是一种css的布局方式，只是我们常用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

当开启元素的BFC以后，元素将会具有如下的特性：

• 1.父元素的垂直外边距不会和子元素重叠
• 2.开启BFC的元素不会被浮动元素所覆盖
• 3.开启BFC的元素可以包含浮动的子元素，计算BFC高度时，浮动元素也参与计算。
• 4.注意：属于同一个BFC的两个相邻Box的margin会发生重叠（可以设置两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC）

2.2 如何开启元素的BFC

• 开启浮动 float: left/ right;
• overflow值不是visible：overflow: auto/ hidden;
• display: flex/ inline-block/ table-cell/ table-caption/ inline-flex (inline-block可以解决高度塌陷问题，但是会导致宽度丢失，不推荐使用这种方式）
• 设置元素绝对定位或fixed定位: position: absolute/ fixed

2.3 BFC的原理？(面试可不说，但要理解)

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。

2.4 BFC的应用

1. 可以用来自适应布局：利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

2. 可以清除浮动

3. 可以解决垂直边距重叠

---

3. 边距重叠（双边距 ）

1. 什么是边距重叠？
2. 什么情况下会发生边距重叠？
3. 如何解决边距重叠？

边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况：

3.1 父子关系的边距重叠

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

解决1：给父元素添加 overflow：hidden，这样父元素就变为 BFC，不会随子元素产生外边距

解决2： 可以添加伪元素，通过display: table，来实现父子边框隔断：

.box1::before{
  display: table;
  content:"";
}

同级兄弟关系的重叠：

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

解决1：

因为属于同一个BFC的两个相邻Box的margin会发生重叠，所以可以在其中一个box的外面包裹一个容器，并使用其触发一个BFC，这样两者就处于不同的BFC中，也就不会相互影响了。

思考：

.box1{
 overflow: hidden;
}

为什么这样给box1开启了BFC，还是不行呢？非要给box1套上一个div再给div开启BFC呢?

答案：

因为给box1开启BFC时，相当于将其变成了一个特殊的容器，容器内的子元素不会影响到外面的元素，而box1和box2并非是box1的子元素与box1/box2。

---

4. 高度塌陷

开发中，如果有父元素和子元素且子元素会浮动的情况下，就要注意高度塌陷问题

4.1 解决高度塌陷

（1）将父元素高度写死

缺点：一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

（2）创建空元素

在父元素里面最底下创建一个空元素（块级元素），p/div，对该块级元素清除浮动

div {
  clear: both;
}

缺点：

• 会在页面产生多余结构，浪费资源
• 使用div/p等容易被之前设置的样式选中

（3）BFC

为父元素开启BFC，BFC见上面第2大点

当开启元素的BFC以后，元素将会具有如下的特性：

• 1.父元素的垂直外边距不会和子元素重叠

• 2.开启BFC的元素不会被浮动元素所覆盖

• 3.开启BFC的元素可以包含浮动的子元素 ！！！

那如何开启元素的BFC呢？

• 1.设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

• 2.设置元素绝对定位

• 3.设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

• 4.将元素的overflow设置为一个非visible的值

推荐方式：

div{
	overflow: hidden;  
}

缺点：

IE6不支持BFC，但是具有另一个隐含的属性叫做hasLayout，直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍。
zoom: 1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持。

.box1{
  /*为box1设置一个边框*/
  border: 10px red solid;
  /*开启元素BFC属性*/
  overflow: hidden;
  /*IE6*/
  zoom: 1;
}

（4）设置after伪类（推荐）

可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是最推荐使用的方式，几乎没有副作用。

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}
//终极写法：既可以解决高度塌陷，又可以解决父子边距重叠：
.clearfix::before,
.clearfix::after{
  content: "";
  display: table; //block还是table对于解决高度塌陷无影响
  clear: both;
}
/*想要兼容IE6*/
.clearfix{
  zoom: 1;
}

缺点：

IE6不支持after伪类，还需hasLayout来处理

---

5. 伪类和伪元素

伪类与伪元素的主要区别在于：有没有创建一个DOM树之外的元素

• 伪类：用于DOM元素处于某种状态时为其添加对应的样式。

• 伪元素：用于创建一些不在DOM树中的元素。

5.1 伪类

（1）锚点 5个

a:link | :hover | :active | :focus | :visited

（2）结构伪类

:nth-child(n) - 查找所有父元素第n个子元素，不管是什么都选中
div:nth-child(n) - 查找所有父元素第n个子元素，如果是div即选中
.box :nth-child(n) 选择父元素box的第n个子元素，不管是什么都选中
.box div:nth-child(n) 选择父元素box的第n个子元素，如果是div元素即选中
:nth-last-child(n) 同理
div:nth-last-child(n) 同理

//问题：我们想选中第二个div，但它实际是第三个子元素，第二是span
div:nth-type-of(2)

F div:first-child 父元素F的第一个子元素div，与F div:nth-child(1)等同
F div:last-child 父元素F的最后一个子元素div，与F div:nth-last-child(1)等同

（3）CSS3新增伪类（主要用于form元素）

:empty选择空标签   :focus选择获得焦点的元素
:enabled选择当前有效的表单元素
:disabled选择当前无效的表单元素
:checked选择当前已经勾选的单选按钮或复选框
:root选择根元素，即<html>标签

5.2 伪元素

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line :first-letter和::selection

用于创建一些不在DOM树中的元素，并为其添加样式

::before {content:"第一章：";}
::after {content:"Hot!";}
::first-line {background:red;}   /*设置元素中第一行文本的样式, 注:只能与块级元素关联*/
::first-letter {font-size:30px;} /*指定一个元素第一个字母的样式*/
::selection{color: red}/*匹配被用户选择的部分, 注：只支持颜色和背景颜色两个样式*/

---

6. css中怎么使盒子垂直居中

法1. 定位法，子绝父相

.father{
  width: 300px;
  height: 300px;
  background-color: #bfa;
  position: relative;
}
.son{
  width: 200px;
  height: 200px;
  background-color: red;

  position: absolute;
  /*写法一二：已知子元素宽高*/
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  
  /*写法二 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
  /*写法三 未知子元素宽高*/
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

法2. flex布局

*{
  margin: 0;
  padding: 0;/*不设置会出现滚动条*/
}
html,body{
  height: 100%; /*默认为0*/
}
/*当给body中的盒子设置时，必须要有上面两个设置，若给盒子中的盒子设置时，则不需要*/

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

标签：BFC,box,重叠,元素,开启,HTML,div,CSS
From： https://www.cnblogs.com/lin77/p/16885620.html