盒模型,BFC以及行内块级元素

一.盒模型篇

css基础框盒模型介绍：
当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将所有元素表示为一个个矩形的盒子，每个盒子由四部分组成，分别是内容内边距边框外边距（但是行内元素不会因内边距（padding）和边框（border）而增加其占用的垂直空间，它们的垂直高度主要由line-height属性决定。这意味着，尽管边框和内边距会在视觉上增加元素的大小，但它们在布局上不会增加元素的高度）

1.标准盒模型content-box（默认）：

块的总宽度= width + margin(左右) + padding(左右) + border(左右)

    <div class="bzBox">标准盒模型</div><style>.bzBox{width: 100px;height: 50px;margin: 2px;padding: 2px;/* 这里设置1px，但是浏览器查看盒模型显示的不是1px，这是因为系统的缩放导致的，打开电脑设置调整缩放比例为100%后即可正常 */border: 2px solid black;box-sizing: content-box;//因为默认就是标准盒模型所以这段不要也可以}</style>

在这里插入图片描述

2.怪异盒模型border-box：

一个块的总宽度(页面中占的宽度)= width + margin(左右)（即width已经包含了padding和border值

	<div class="gyBox">怪异盒模型</div><style>.gyBox{width: 100px;height: 50px;margin: 2px;padding: 2px;border: 2px solid black;box-sizing: border-box;}</style>

在这里插入图片描述

3. 从父元素继承box-sizing：

	<div class="ParentBox"><div class="inherit">继承</div></div><style>.ParentBox{width: 100px;height: 50px;margin: 2px;padding: 2px;border: 2px solid black;box-sizing: border-box;}.inherit{width: 50px;height: 40px;margin: 2px;padding: 2px;border: 2px solid black;box-sizing: inherit;}</style>

在这里插入图片描述

二.BFC

BFC（Block formatting context）是W3C规范中的一个概念，是一个完全独立的渲染区域，它规定了内部的Block-level Box如何布局，让空间里的子元素布局不会影响到外面的布局，也不会受到外界的影响

特性：
1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3.每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
4.BFC的区域不会与float box叠加。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动元素也参与计算。
触发BFC的方式：
1.浮动元素（float不为none）。
2.绝对定位的元素（position为absolute或者fixed）。
3.overflow不为visible的块级元素。
4.display值为flex、flow-root 、inline-block、table-cell等。
可以解决以下问题：
1.浮动元素的父元素高度塌陷问题。
2. 两栏自适应布局问题。
3.外边距垂直方向重合问题。

1.父子关系的边距重叠（父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距）
在这里插入图片描述

 <div class="parentBoxBFC1"><div class="BFCBox1"></div></div><style>.parentBoxBFC1{width: 200px;height: 100px;overflow:hidden;background-color: red;}.BFCBox1{width: 80px;height: 50px;margin: 20px;background-color: yellow;}
</style>

父盒子设置完overflow:hidden;后效果：

在这里插入图片描述
2.同级关系的边距重叠（同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个））

<div class="BoxBFC1"></div>
<div style="overflow:hidden"></div>
<div class="BoxBFC2"></div>
<style>.BoxBFC1{width: 200px;height: 100px;background-color: red;margin: 100px;}.BoxBFC2{width: 200px;height: 100px;margin: 20px;background-color: yellow;}
</style>

添加一个空元素并设置overflow:hidden后的效果：

在这里插入图片描述

二.行内块级元素篇

1.常见的行内元素有：a,button,i,span,select,option,strog,b
2.常见的块级元素有：div p h1-h6 ul table form,dl-dt-dd,ul-li,ol-li…
3.常见的行内块级元素：img,input。
行内块元素结合了块级元素（block-level elements）和行内元素（inline elements）的特性。它们像块级元素一样可以设置宽度、高度、内外边距等，同时又像行内元素一样不会独占一行，可以和其他行内元素并排显示
4.块级元素的特点
1.独占一行,每一个块级元素都会从新的一行重新开始
2.排列方式:从上到下依次排布
3.可以直接控制宽度、高度以及盒子模型的相关css属性
4.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度,高度是它本身内容的高度
5.块级元素可以嵌套行内元素
6.ul/ol下面只能是li;dl下面只能是dt,dd;
7.p不能包裹其他块级元素包括它本身,可以嵌套行内元素
5.元素之间的相互转换
1.行内元素=> display: inline
2.块级元素=>display: block
3.行内块元素=>display: inline-block