CSS面试解析(2)

Devil
166 阅读6分钟

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

行内元素和块级元素什么区别，然后怎么相互转换?

块级元素

  • 各个块级元素独占一行。默认垂直向下排列
  • 高度、宽度、margin和padding都是可控的，设置有效，有边距效果
  • 宽度没有设置时，默认为100%
  • 块级元素中可以包含块级元素和行内元素

行内元素

  • 行内元素和其他行内元素都会在一条水平线上排列
  • 高度、宽度是不可控的，设置无效，由内容决定
  • 根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素

转换

  • HTML将元素分为：行内元素、块状元素和行内块元素三种。
  • 使用display属性将三者任意转换
    • display: inline 转换为：行内元素
    • display: block 转换为：块状元素
    • display: inline-block 转换为：行内块状元素

实现左边定宽，右边自适应的效果（4大类方法）

  • 之后的样式都是在这个基础之上
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>

.box {
  border: 2px solid rgb(171, 149, 231);
}
.box .left {
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  height: 150px;
  background-color: coral;
}
  • 当前布局是这样的

float左边定宽，右边自适应.png

浮动float

  • 左边浮动，右边overflow: hidden（float+BFC）
.box .left {
  /* 浮动 */
  float: left;
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  /* 子元素设置BFC */
  overflow: hidden;
  height: 150px;
  background-color: coral;
}
  • 左边浮动，右边设置左边宽度
.box .left {
  /* 浮动 */
  float: left;
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  /* 右边设置左边的宽度 */
  margin-left: 100px;
  height: 150px;
  background-color: coral;
}

定位position

  • 左边绝对定位，右边设置左边宽度
.box {
  /* 绝对定位 */
  position: relative;
  border: 2px solid rgb(171, 149, 231);
}
.box .left {
  /* 绝对定位，脱离标准流 */
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  /* 空出左边的宽度 */
  margin-left: 100px;
  height: 150px;
  background-color: coral;
}

flex布局

  • flex布局（弹性布局）
.box {
  /* flex布局，给flex容器设置 */
  display: flex;
  border: 2px solid rgb(171, 149, 231);
}
.box .left {
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  /* 给flex项目设置，可放大可缩小*/
  flex: 1 1 auto;
  height: 150px;
  background-color: coral;
}

table布局

  • table布局中，左边定宽度，其余子级容器会自动平分宽度沾满父级容器
.box {
  /* table布局 */
  display: table;
  width: 400px;
  border: 2px solid rgb(171, 149, 231);
}
.box .left {
  /* 设置子元素为单元格 */
  display: table-cell;
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.box .right {
  /* 设置子元素为单元格 */
  /* 如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器； */
  display: table-cell;
  height: 150px;
  background-color: coral;
}

总结

  • 主要的思路就是：让左边脱离标准流或者表格布局，右边让开宽度即可

三列布局（中间固定，两边自适应）

  • 待补充

清除浮动元素的方法和各自的优缺点

  • 清除浮动，实际上是清除父元素的高度塌陷。因为子元素脱离父元素的文档流，所以父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。
  • 浮动元素的特性
    • 在正常布局中位于浮动元素之下的内容，此时会围绕浮动元素，填满其右侧的空间。
    • 浮动到右侧的元素，其他内容会从左侧环绕它（浮动元素影响的不仅是自己，还会影响周围元素对其进行环绕）
    • float仍会占据其位置，position: absolute不占用页面空间，会有重叠问题。

解决办法（4种）

  • 内墙法：在浮动元素末尾添加空标签清除浮动clear:both（缺点：增加无意义标签）

    • clear:both就是规定在左右两侧均不允许浮动元素
    .box {
  border: 2px solid rgb(199, 233, 161);
}
.box .left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: coral;
}
.box .right {
  float: left;
  width: 200px;
  height: 300px;
  background-color: cornflowerblue;
}
.box .clear {
  /* 给额外添加的标签设置样式*/
  clear: both;
}

    <div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <!-- 额外添加的标签，用来清除浮动 -->
  <div class="clear"></div>
</div>
    • 缺点：浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签

  • 给父元素设置overflow:hidden(BFC)

  • 给父元素定高度

  • after伪类选择器(通常给父盒子设置`class='clearfix')

    • :after匹配在原始元素的实际内容之后出现的区域
    .box {
  border: 2px solid rgb(199, 233, 161);
}
.box .left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: coral;
}
.box .right {
  float: left;
  width: 200px;
  height: 300px;
  background-color: cornflowerblue;
}
.clearfix:after {
  /* 添加一个文字内容 */
  content: '1';
  /* 将文字转为块级元素，块级元素撑开父盒子底部全部 */
  display: block;
  /* 将盒子高度固定为0,避免影响父盒子高度 */
  height: 0;
  /* 清除前面的浮动影响 */
  clear: both;
  /* 将创建的元素占位隐藏，不能使用display:none */
  visibility: hidden;
}

    <div class="box clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>
    • 使用此方法，通过css方式解决了css样式属性带来的问题

position的值

  • absolute: 生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位
  • fixed(老IE不支持): 生成绝对定位的元素，通常相对于**浏览器窗口或frame**进行定位
  • relative: 生成相对定位的元素，相对于其在普通流中的位置进行定位
  • static: 默认值。没有定位，元素出现在正常的流中
  • sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出

display有哪些值？

  • block: 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
  • none: 缺省值。行内元素类型一样显示
  • inline: 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
  • inline-block: 默认宽度为内容宽度，可以设置宽高，同行显示
  • list-item: 像块类型元素一样显示，并添加样式列表标记
  • table: 此元素会作为块级表格来显示
  • inherit: 规定从父元素继承display属性的值

📑 CSS3有哪些新特性？

  • 新增各种CSS选择器
  • 圆角
  • 多列布局
  • 阴影和反射
  • 文字特效
  • 文字渲染
  • 线性渐变
  • 旋转
  • 缩放、定位、倾斜、动画、多背景

display: inline-block什么时候会显示间隙？（携程）

  • 间隙产生的原因: 换行或空格会占据一定的位置
  • 解决方法：
    • 移除空格（将HTML中的空格和换行移除，导致代码可读性较差）
    • 使用margin负值
    • 使用font-size:0: 设置字体的大小(设置给父元素即可,只有正值)
    • letter-spacing: 增加(正值)或减少(负值)字符之间的空白(设置给父元素即可)
    • word-spacing: 增加(正值)或减少(负值)单词间的空白(设置给父元素即可)
avatar
文章
阅读
粉丝