导航

(八).元素浮动，行内块和行内元素在布局上的特点，页面布局的些许事项

Posted on 2022-03-21 21:50  云语不知  阅读(366)  评论(0)    收藏  举报

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=middle时，就是行内元素中间与中线对齐   
当使用vertical-align=bottom时，就是行内元素底部与底线对齐
当使用vertical-align=top时，就是行内元素顶部与顶线对齐

解决方案：

给行内块元素本身设置 vertical-align，值只要不是 baseline 都可以

3 页面布局

3.1 页面的组成部分

3.2 重置样式表

reset.css
normalize.css

3.3 版心 container

1. 宽度固定
2. 水平居中

3.4 编码规范

  1. 短横线分隔符
  2. 可以使用这个顺序写css
Positioning 定位相关属性
Box model 盒子模型相关属性
Typography 文字字体相关属性
Visual 视觉效果相关属性（背景等）