CSS 布局技巧

宽宽的背景颜色、内容、内容位置以及文本细节的控制,从外部到内部都可见。

CSS 通用布局

默认问题：

• 一些在线组件有默认的内部和外部边距,不同浏览器设置的边距不一致。
• 框的宽度将添加到内边距和框中。

线内的项目无效, 高度和宽度, 直接设置无效 。

将线条中的组件转换成块块元素作为解决方案。

• 转换为块元素：display: block;(由于对宽度的经常要求,该行的部件一般改为块状元素。 )
• 转换为行内块：display: inline-block;（常用）

版心居中

如果符合以下两项要求,外部边界允许将区块箱横向存放在中心:

• 盒子必须指定了宽度width
• 保险箱的外外环外 设置为:auto

使单行文字垂直居中

相邻区块组件垂直外部边缘的合并

当两个区块元素(兄弟)相撞时,如果上述元素的外部边界小于以下元素的外部边界,则上述两个区块元素(兄弟)相撞。margin-bottom,以下所列因素是以上及以后的因素。margin-top然而,它们之间的垂直距离并不是margin-bottom与margin-top之和。而是取两个值中的较大者，这种现象被称为相邻区块组件垂直外部边缘的合并（准确的描述应该是：大的外边距覆盖小的）。

解决方案：
尝试简单地添加一个框。margin值。

嵌入区块组件的垂直外部距离已经崩溃 。

当两个嵌入(父差)区块元素的外缘较高时,母差元素会折成更大的外差值(外差效应显示在母差元素上方)。

解决方案：

• 您可以指定父元素的顶端边界( 例如, 透明半透明边界 ) 。
• 您可以指定父元素的内部边距 。
• 可以为父元素添加overflow: hidden推荐
• 转化成行内块元素。

还有一些没有崩溃问题的替代解决方案,如浮动的、固定的和位置完美的箱。

边距或贴布可用于改变行中标签的垂直位置。

要修改垂直位置, 请使用行高度来改变行高度, 使用行高度来改变行高度 。

当浏览器剖析线条或线内标签的内部部分时,如果标签以新行写入,则在显示时会形成空白。

CSS 书写顺序

使用浏览器更有效率。

1. 显示/浮动
框模式中边边框边贴布宽背景颜色
3、文字样式

使用伪元素清除浮动

为什么必须清除浮标?

• 父级没高度
• 子盒子浮动了
• 它正在影响设计,我们需要除掉浮标