css盒模型、浮动

最新推荐文章于 2022-10-13 17:59:04 发布

Tautus

最新推荐文章于 2022-10-13 17:59:04 发布

阅读量318

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Snoopyqiuer/article/details/83451496

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、css盒模型

1. 盒 (框)模型介绍

(1) 文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的css属性调整。相关属性如下：

content：框内容显示区域，包括框内的文本内容以及表示嵌套子元素的其他框；
width：设置内容的宽度，还有min-width，max-width两个属性可设置内容的宽度限制；
height：设置内容的高度，还有min-height，max-height两个属性可设置内容的高度限制；
padding：css框的内边距，位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。
border：css框的边界，是一个分隔层，位于内边距的外边缘和外边距的内边缘之间。边界的默认大小为0，即不可见状态，可以通过设置边界的厚度、风格、颜色让其展示。设置属性方法分为简写和详写，简写即使用border属性进行设置，详写即使用border-top、border-right、border-bottom、border-left属性分别设置css框某一边的厚度、风格、颜色；使用border-width、border-style、border-color分别设置css框四条边的厚度/风格/颜色；也可以单独设置某一个边的某一个属性，如border-top-style等。
margin：css框的外边距，即与其他css框的间距，可以使用margin属性设置，也可以用margin-top、margin-right、margin-bottom、margin-left分别设置。注意：外边距有一个特别行为称为“外边距塌陷”，也称为外边距合并或者外边距折叠，即当两个css框彼此接触时，它们的间距为两个css框所设置的外边距的最大值，而不是两个css框外边距的总和。

(2) 外边距塌陷的基本情况(除去浮动元素和绝对定位元素)：

相邻元素之间：外边距会折叠；
父元素与其第一个或最后一个子元素之间：若父元素与其第一个子元素之间不存在边界、内边距、行内内容，没有创建块格式化上下文、没有清除浮动将两者的margin-top分开，或者父元素与其最后一个子元素之间不存在边界、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开，则这两对外边距之间会产生折叠，此时子元素的外边距会“溢出”到父元素的外面。
空的块级元素：若一个块级元素中不包含任何内容，并且在其margin-top与margin-bottom之间没有边界、内边距、行内内容、height、min-height，将两者分开，则该元素的上下外边距会折叠。

(3) css框元素的总宽度为：content的width + padding-right + padding-left + border-right + border-left。border忽略百分比宽度设置，因此若设置border或padding为像素表示，则在响应式布局下会产生不友好的体验，此时可使用 box-sizing属性调整框模型。box-sizing属性用于更改默认的计算元素宽度/高度的css盒子模型，可用该属性模拟不正确支持csss盒子模型规范的浏览器行为。

box-sizing属性值 - 关键字值：

content-box：默认值，即默认css框模型设定的width属性为content的width，最终css框的总宽为content、border、padding 的宽总和；
border-box：告知浏览器当前css框设置的width属性为content、border、padding宽的总和，即将默认的css框模型更改为新的模型：，大多数情况下该设置可以更容易的去设定一个元素的宽度。

box-sizing属性值 - 全局值：inherit、initial、unset。

(4) css框的高度不遵守百分比设置，总是采用content的高度，除非设置一个指定的绝对高度，例如使用px或em等。

2. 盒(框)模型的其他属性

除了width、height、border、padding、margin属性之外，还有其他属性可以改变它们的行为。

(1) 溢流：overflow

当使用固定值设置框的大小时，要放置的内容可能超出了固定值的大小，此时内容就会从盒子中溢流，可使用 overflow属性进行控制。overflow属性值：

visible：默认值。内容不会被修剪，当内容超出元素框固定值范围，则会呈现在元素框之外；
hidden：当内容超出元素框固定值范围，超出部分会被修剪，为不可见状态；
scroll：内容超出元素框的部分会被修剪，浏览器会显示滚动条以供查看超出框固定值范围的内容，此时内容撑开的宽度不包括滚动条的宽度
auto：当内容超出元素框时会被修剪，浏览器呈现滚动条一共查看超出框的内容，此时内容撑开的宽度包括滚动条的宽度；
inherit：规定应该从父元素继承overflow属性的值。

(2)背景裁剪：background-clip

框的背景由颜色和图片组成，它们堆叠在一起被应用到一个盒子里，然后被画在盒子的下面。默认情况下，背景延伸到了边界外沿，若想只让其延伸到内容的边沿，则可以通过设置盒子的background-clip属性进行调整。background-clip属性值：

border-box：背景延伸到边框外沿，但是在边框之下；
padding-box：边框下面没有背景，即背景延伸到内边距外沿；
content-box：背景裁剪到内容区(content)外沿；
text：背景被裁剪为文字的前景色(只有chrome支持)；
inherit：继承父级元素的同属性设置。

(3)轮廓：outline

一个框的outline时一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸，其被勾画于边界之外、外边距区域之内。outline属性是一个简写属性，详写轮廓属性有：outline-style、outline-width、outline-color。轮廓与边框的不同包括：

轮廓不占据空间，它们被描绘于内容之上；
轮廓可以是非矩形的。在Gecko/Firefox中，轮廓是矩形的，但是Opera则会围绕元素结构绘制非矩形的形状。

注：使用 outline 属性的时候要注意，它一般只在需要可用性的一些情况才被使用，例如在一些用户点击它的时候使用 outline 来表示高亮、可用，如果你要使用 outline，请确保不要因为它看起来像链接的高亮让用户迷惑。

3. css框类型

使用 display属性来设定元素的框类型，常见类型有三种：块状(block)、行内(inline)、行内块状(inline-block)。

块框(block box)：是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框；
行内框(inline box)与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
行内块状框(inline-block box)像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（若第一行没有足够的空间，行内块状框会放在第二行文本上，其不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，会失去一个框的形状）；

注意：默认状态下display属性值，块级元素display: block，行内元素display: inline。

二、浮动

1. float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。注意：由于float意味着使用块布局，它在某些情况下修改display 值的计算值。

float 属性的值被指定为单一的关键字：

2. 浮动元素的定位

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。而多个浮动元素在相同关键字下依次堆放(left：依次向右堆放，right：依次向左堆放)，当填满容器一整行时换行至下一行。

left：表明元素必须浮动在其所在的块容器左侧；
right：表明元素必须浮动在其所在的块容器右侧；
none：表明元素不进行浮动；
inline-start：表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧；
inline-end：表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

3. 清除浮动

如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，会影响下面不期望出现浮动的文档流的样式，此时可以给后面元素添加 clear：both 属性值来清除浮动，然而这个方法只是在同一块级格式化上下文（block formatting context）中没有其他元素的时候才是有效的。如果后面元素有兄弟元素是向左浮动和向右浮动的边栏，那么使用clear 会导致这个元素出现在边栏的下方，这显然不是期望的结果。

如果不能使用清除浮动，另一种做法是浮动容器的限制块级格式化上下文。可以设置浮动容器(块级)元素的overflow属性值变成hidden 或者auto，这样可以让容器元素伸展到能够所有的浮动子元素，而不是让他们超出块元素的底部。设置overflow为scroll 也可以让块元素撑大来包含所有的浮动子元素，但是这样不论内容有多少都会显示出一个滚动条。即使 height 默认值为 auto，还是设置了该属性，是为了表明容器应该增大高度以便包裹住里面的内容。

4. 浮动问题

(1) 整个宽度可能难以计算，这样当添加padding、border、margin等属性时容易造成布局混乱，解决方案：使用box-sizing属性更改盒模型。

(2) float元素在父级元素占用面积有效高度为0，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，因此不能给浮动元素后面添加clear：both属性的非浮动元素添加margin 属性以实现元素间分隔，解决方案：在浮动元素与非浮动元素之间添加一个空div元素，给该空div元素添加clear：both属性，然后再为非浮动元素设置样式。

(3) 浮动项目的背景高度不一，对于多列浮动，当其高度不同背景颜色不同时样式会非常不美观，解决方案：

flexbox布局：Flexbox可以自动地延长列，这样每列就会像最长的一列一样。
将这些列的背景颜色设置为父元素的背景颜色，从视觉上不会看到高度是不同的。这是目前最好的选择。但对于不同背景颜色的设计不适用；
将各列设置为固定的高度，设置overflow：auto属性使内容滚动；
使用一种叫做伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。

三、块格式化上下文（Block Formatting Context，BFC）

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

根元素或包含根元素的元素
浮动元素（元素的 float不是 none）
绝对定位元素（元素的 position为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overfolw 值不为 visible 的块元素
display 值为 flow-root 的元素
contain值为 layout、content或 strict 的元素
弹性元素（ display 为 flex 或 inline-flex元素的直接子元素）
网格元素（ display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。