CSS-0809

---

title: “CSS 0809”
date: 2022-08-09T09:20:36+08:00

隐藏元素

1. display: none;隐藏元素，且隐藏之后不占据原来的位置
2. visibility: visible(显示)/hidden(隐藏);隐藏之后占据原来位置
3. opacity: 0-1;透明度，0:完全隐藏，隐藏之后占据原来位置

滑过显示某个元素：

1. 初始隐藏根据之后是否占位选择对应隐藏方法;
2. 结合:hover
   • 设置display覆盖none
   • 设置visibility值为visible覆盖hidden
   • 设置opacity值为1覆盖原本的0

BFC(Block formatting context)

BFC又名块级格式化上下文，是一部分特殊的独立渲染的区域

触发条件

1. overflow:hidden/auto/scroll
2. float:left/right
3. position:absolute/fixed
4. display:inline-block/table-caption/table-cell/flex(弹性盒子)/inline-flex(内联弹性盒子)

此处只是列举了部分常用触发条件，具体其他触发条件请点击此处查询：详细见此处

特性

1. 浮动元素的高度会计算在内 —解决高度塌陷
2. BFC区域内的元素不会影响到外面的元素 — 解决margin的bug
3. 浮动元素不会和BFC区域重叠 — 解决浮动元素和普通元素重叠的问题

基线问题

问题1

给元素不设置高度的时候,高度由内容(行高=字的大小+字的上下两部分的白色间距)撑开

代码：

<!-- html代码 -->
<div class="box1">我是问题一的内容</div>

<!-- css代码 -->
.box1{
	width: 200px;background-color: aqua;
}

结果如图：

此时的div是由内容(行高=字的大小+字的上下两部分的间距)撑开，上下并没有和内容的字体紧紧贴在一起。

问题2（主要针对英文）

多个内联(块)元素出现在一行时候,文字大小更改会导致元素不在同一行显示,而是以基线对其为准，例如：

<!-- html代码 -->
<div class="box2">
    <span>english</span><b>iphone</b><i>snpix</i>
</div>

<!-- css代码 -->
.box2{width: 300px;height: 80px;border: 2px solid;}
.box2 span{background-color: red;vertical-align: bottom;}
.box2 b{background-color: orange;font-size: 30px;}
.box2 i{background-color: green;vertical-align: bottom;}

结果如图：

扫描二维码关注公众号，回复： 17492995 查看本文章

通过垂直方向的对齐方式 vertical-align调整：

• baseline 基线,x底部的线
• top 顶线,行框(当前行的元素的顶部和底部所形成的框)的顶部
• bottom 底线, 行框(当前行的元素的顶部和底部所形成的框)的底部
• middle 中线, 行框中x的1/2高度和该元素垂直中心点的位置

问题3

多个内联块元素在一行的时候,默认以基线(最后一行的x底部的线)对齐，例如：

代码：

<!-- html代码 -->
<div class="box3">Lorem ipsum dolor</div>
<div class="box4">Lorem ipsum dolor sit amet co</div>
<div class="box5">Lorem ipsum dolor sit amet,g elit. Necessitatibus praesentium fuga omnis magnam!</div> 

<!-- css代码 -->
.box3,.box4,.box5{
    width: 200px;height: 200px;
    background-color: orchid;
    border: 3px solid red;
    display: inline-block;
}

结果：

• 如果内联块元素里面没有内容的时候，基线在内联块元素的底部
• 如果内联块元素中有内容的时候，基线在最后一行x的底部
• 可通过vertical-align调整位置，同问题2

问题4

文字和内联块元素一起出现的时候，文字大小更改后，导致文字和内联块对齐不一致，可以给改内联块元素加vertical-align调整位置，调整后不合适可以再借助margin

代码：

<!-- html代码 -->
<div class="box7">
    snpix <textarea name="" id="" cols="30" rows="10"></textarea>
</div>

<!-- css代码 -->
.box7{
    width: 800px;
    border: 1px solid black;
	font-size: 14px;
}

结果如图：

当加大snpix的字体大小时，间距会随之变大，如图，当字体大小为50px时：

解释：出现这种现象的原因是当文字(英文字母)和块级元素一起出现(在同一行)时，块级元素会和文字(英文字母)的对齐方式为默认基线(baseline)对齐，而不是和底部对齐。解决这种办法可以给块级元素用vertical-align属性设置底部对齐即可，即vertical-align: bottom;结果如图:

注意：常用的块级元素有：<img>和<input>

基线问题只存在于内联元素和内联块元素中，对于块级元素不存在这种问题。所以给一些行内(块)元素元素加display/float属性转为块级元素也可以解决基线文本不对齐的问题