css相关

原创已于 2025-05-12 16:25:32 修改 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2023-06-08 17:28:38 首次发布

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML语义化的意义，深入探讨了CSS中的块状元素与内联元素、盒模型宽度、margin问题、BFC概念及应用、浮动布局、定位技术、水平和垂直居中方法，以及rem、vw、vh的使用，并分享了双飞翼布局和圣杯布局的实现策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

在线编辑

如何理解html语义化

让人更容易读懂（增加代码的可读性，加强代码在可维护性）
让搜索引擎更容易读懂，更好在理解页面内容结构（SEO优化）
结构清晰

块状元素和内联元素

display：block/table， div，table，h1，h2，ul，ol，p
display：inline/inline-block，span，input，img，button

盒模型宽度

offsetWidth = （内容宽度+内边距+边框）
box-sizing：border-box （内容宽度+内边距+边框+外边距）= width

伪类选择器和伪元素选择器

伪类选择器：以单冒号(：)开头

链接相关：link、visited 、hover、active
表单相关：focus 、disabled 、checked 、invalid 、valid
结构相关：first-child、last-child、nth-child(n)、not(selector)、nth-of-type(n)
其它：target 、empty 、root
伪元素选择器：以双冒号(：：)开头
内容生成：before 、after
文本选择：selection
其他部分选择：first-letter、first-line、placeholder

如何实现单行、多行文本溢出省略号

单行文本溢出

text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
- clip：当对象内文本溢出部分裁切掉
- ellipsis：当对象内文本溢出时显示省略标记（…）
- 只有在设置了overflow:hidden和white-space:nowrap
white-space：设置文字在一行显示，不能换行
overflow：文字长度超出限定宽度，则隐藏超出的内容

p{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
    }

多行文本溢出

基于高度截断（伪元素 + 定位）
- position: relative：为伪元素绝对定位
- overflow: hidden：文本溢出限定的宽度就隐藏内容）
- position: absolute：给省略号绝对定位
- line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px：设定当前元素高度
- ::after {} ：设置省略号样式
基于行数截断（有兼容范围，常用移动端）
- -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
- display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical：和1结合使用，设置或检索伸缩盒对象的子元素的排列方式
- overflow: hidden：文本溢出限定的宽度就隐藏内容
- text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

// 基于高度截断
.demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }

// 基于行数截断
p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠

margin负值问题

margin-top和margin-left负值，元素会向上，向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响（相当于自生宽度减小）

BFC理解和应用

理解： BFC（block format context）块级格式化上下文
一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素
应用：(父级div的class里有bfc形成的条件，子元素始终在父级div内，父元素不会和子元素的外边距合并)
形成BFC的常见条件:
float不是none
position是absolute或者fixed
overflow不是visible
display是flex inline-block等

overflow

float布局：实现圣杯布局和双飞翼布局

固定两边宽度，中间自适应的布局

圣杯布局和双飞翼布局

中间优先渲染

圣杯布局：
中，左，右布局
主容器padding预留空位
左块：向左margin-left移动百分之百，再定位左移动自身宽距（left: -100px）
右块：向左margin-left移动自身宽度，再定位右移动自身宽度（right: -200px）
双飞翼布局：
（中外（中内）），左，右布局
中内margin预留空位
左块：向左margin-left移动百分之百（margin-left: -100%）
右块：向左margin-left移动自身宽度（margin-left: 200px）
三栏布局，中间一栏最先加载和渲染（内容最重要），两侧内容固定，中间内容随宽度自适应
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding，一个用margin
需要动态调整边栏宽度 → 双飞翼更灵活

清除浮动(手写clearfix)

使用overflow属性
给浮动元素的父级添加overflow：hidden
在父元素末尾插入清除浮动的元素，clear：bath清除浮动

absolute和relative定位

relative：依据自身定位
absolute：依据上一级定位元素（定位元素：absolute，relative，fixed，body）

水平居中

inline元素：text-align：center
block元素: margin: auto
absolute元素：left：50%+margin-left负值
inline元素：line-height的值等于height

垂直居中

block元素: top：50%+margin-top负值（知道子元素的宽高）
absolute元素：transform（-50%，-50%）
absolute元素：top，left，bottom，right = 0+margin：auto

line-height继承

具体数值和比例直接继承，百分比需要继承计算出来的值

rem

rem是一个长度单位（长宽字体大小都可以使用，font-size设置最初的）
px：固定长度单位，常用。
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局

vw、vh

屏幕高度：window.screen.height
网页视口高度：window.innerHeight
body高度：document.body.clientHeight

双飞翼布局和圣杯布局代码

<!-- 圣杯布局 -->
    <div class="content">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
<style> 
.content {
  padding: 0 200px 0 100px; /* 空出左边和右边的位置 */
  height: 200px;
}
.center {
  background-color: red;
  float: left;
  height: 200px;
  width: 100%;
}
.left {
  float: left;
  background-color: green;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  position: relative;  /** 相对于自身位置再向右移动 */
  left: -100px;
  /* right: 100px; 一样的效果 */
}
.right {
  float: left;
  background-color: blue;
  height: 200px;
  width: 200px;
  margin-left: -200px;
  position: relative;  /** 目的是要相对于自身位置再向左移动 */
  left: 200px;
}
</style>

<!--双飞翼布局 -->
    <div class="content">
      <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
<style> 
.content {
  float: left;
  width: 100%;
  height: 200px;
}
.center {
  background-color: red;
  margin-left: 150px;  /* margin预留左右的空位 */
  margin-right: 100px;
  height: 200px;
}
.left {
  background-color: green;
  float: left;
  width: 150px;
  height: 200px;
  margin-left: -100%; /** 整体向左100%，从下面移动到center左边的margin位置 */ 
}
.right {
  background-color: blue;
  float: left;
  width: 100px;
  height: 200px;
  margin-left: -100px; /** 自身元素左移动，占领center右边的margin位置 */ 
}
</style>