1 浮动
1.1 浮动的简介
1. 浮动最初实现文字环绕效果
2. 现在浮动是主流的页面布局方式之一
1.2 元素浮动之后的特点
1. 元素浮动之后会脱离文档流，浮动的元素如果与文档流中的元素位置发生重叠，浮动元素显示到上面。
2. 多个兄弟元素全部设置浮动，会水平排列；父元素宽度不够，自动换行。
3. 不论元素原来的显示模式是块级、行内、行内块，设置浮动之后就是浮动元素，独立于原来的显示模式，拥有自己的显示特点
4. 浮动元素的显示特点：
① 浮动元素默认的宽高被内容撑开
② 浮动元素可以完美地设置宽高、内外边距
③ 没有外边距的塌陷和合并问题（区别于块级元素）
④ 不会被父元素作为文本区处理（区别于行内块元素、行内元素）
1.3 浮动元素产生的影响
① 对后面兄弟元素的影响
影响：
浮动元素后面的兄弟元素会占据浮动元素原来的位置，会显示在浮动元素的下层。
解决：
给紧邻浮动元素后面的那一个兄弟块元素设置 clear:left/right/both
② 对父元素的影响
影响：
如果父元素没有设置固定高度，子元素设置浮动之后，父元素高度会塌陷（父元素高度不能被浮动的子元素撑起来）
解决：
- 方案一 ： 给父元素设置固定高度（不推荐）
- 方案二 ： 给父元素设置浮动（以浮制浮）（不推荐，会产生新的问题）
- 方案三 ： 给父元素设置 overflow，值不为 visible 即可（推荐）
- 方案四 ： 在浮动元素的后面添加一个兄弟块级元素，设置 clear:both; 该元素不要有高度和内容。
- 方案五 ： 实现原理同方案四，利用伪元素选择器动态地为父元素创建最后一个子元素（在所有浮动元素的后面），设置成块级元素，设置为 clear:both（方案五）
.wrapper::after {
content: "";
display: block;
clear: both;
}
---
.wrapper:after {
content: "";
display: block;
clear: both;
}
1.4 浮动相关的 CSS 属性
| CSS 属性 | 功能 | 属性值 |
|---|---|---|
| float | 设置浮动 | none：不浮动，默认值。 left：左浮动。 right：右浮动。 |
| clear | 清除浮动 | left： 清除左浮动影响。 right：清除右浮动影响。 both：清除左右浮动的影响。 |
2 行内元素或行内块元素在布局中的特点
2.1 父元素设置的文本属性作用于行内元素和行内块元素
① 让行内块元素或行内元素水平居中（在父元素中设置样式）
text-align: center;
② 让行内元素或行内块元素垂直居中（在父元素中设置行高）
1. 父元素中设置行高与父元素高度一致
2. 行内块本身还需要设置 vertical-align: middle;
注意点：
1、行内块元素，默认情况下底线与文本的基线对齐，所以行内块元素垂直居中还需要设置 vertical-align:middle，让行内元素与文本的中线对齐
2、当行内块元素内有文本时，为了不让父元素设置的行高影响行内块元素内的文本，需要重新设置行高，保证文本的正常显示
2.2 行内元素或行内块元素之间的空白问题
① 元素之间的空白（左右）
产生原因：
写代码的时候，保证代码可读性，每个html标签后面有换行，换行会被识别为空格。
解决方案：
方案一： 每个标签后面不换行
方案二： 父元素设置字体大小为 0，再单独给行内块元素设置字体大小
② 底部的空白（图片的幽灵空白）
产生原因：
默认行内块元素的底部与文本的基线对齐，底部的空白就是文本基线与文本底线的距离
解放方案：
方案一： 给父元素设置字体大小为 0
方案二： 给行内块元素本身设置 vertical-align，值只要不是 baseline 都可以
方案三： 修改显示模式为块级（主要针对于图片）
③ 文字内容个数不同的行内块元素水平排列无法对齐
产生原因：
⭐️⭐️⭐️行内块元素的基线对齐具体说明
行内块元素基线对齐：
1. 有多行文字的行内元素最后一行文字与基线对齐
2. 单行文字的行内元素就是该行文字与基线对齐
3. 没有文字元素的行内元素底部与基线对齐
解决方案：
给行内块元素本身设置 vertical-align，值只要不是 baseline 都可以
3 页面布局
3.1 页面的组成部分
3.2 重置样式表
reset.css
normalize.css
3.3 版心 container
1. 宽度固定
2. 水平居中
3.4 编码规范
- 短横线分隔符
- 可以使用这个顺序写css
Positioning 定位相关属性
Box model 盒子模型相关属性
Typography 文字字体相关属性
Visual 视觉效果相关属性（背景等）
标签：浮动,元素,布局,行内,设置,对齐,文本 来源： https://www.cnblogs.com/yunyublog/p/16036830.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。