常用的HTML/CSS知识总结

1. HTML语义化

1.1 语义化和非语义化对比

<!-- 非语义化 -->
  <div>标题</div>
  <div>
    <div>一段文字</div>
    <div>
      <div>列表一</div>
      <div>列表二</div>
  </div>
  </div>

  <!-- 语义化 -->
  <h1>标题</h1>
  <div>
    <p>一段文字</p>
    <ul>
      <li>列表一</li>
      <li>列表二</li>
    </ul>
  </div>

两段代码可以看出，使用了语义化标签可以更清晰分辨出标题、段落和列表。同时，也有利于SEO优化。

让人更容易读懂（代码可读性高）
让搜索引擎更易读懂

2. HTML默认情况下的块级元素和内联元素

2.1 块级元素

display: block/table;
div h1~h6 table ul ol p等
独占一行

2.2 内联元素

display: inline/inline-block;
span img input button等
特点：不会独占一行，相邻的内联元素会挨在同一行，直到浏览器边缘才会换行

3. CSS布局

3.1 盒模型的宽度计算

3.1.1 如下代码，div1的offsetWidth是多大

<style>
  #div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
  }
</style>
<div id="div1"></div>

offsetWidth = （内容宽度 + 内边距 + 边框)，不包含外边距
因此，offsetWidth = (100+10+10+1+1)px

3.2.1 如何让以上代码div的offsetWidth = 100px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  #div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box;  /*ie浏览器的怪异盒模型*/
  }
</style>
</head>
<body>
  <div id="div1">
    div1
  </div>
</body>
<script>
  let width = document.getElementById('div1').offsetWidth;
  console.log(width); // 100
</script>
</html>

如下图：内容、内边距以及边框都包含再div里面

image.png

3.2 margin纵向重叠问题

3.2.1 如下代码AAA与BBB之间的距离

  <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>

相邻元素的margin-top和margin-bittom会发生重叠，且取大的值
空内容的元素会被忽略margin发生重叠
因此，AAA与BBB的距离为15px

3.3 margin负值问题

3.3.1 代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin 负值</title>
    <style type="text/css">
        body {
            margin: 20px;
        }

        .float-left {
            float: left;
        }
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        .container .item {
            width: 100px;
            height: 100px;
        }
        .container .border-blue {
            border: 1px solid blue;
        }
        .container .border-red {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <p>用于测试 margin top bottom 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>

    <p>用于测试 margin left right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 3
        </div>
        <div class="item border-red float-left">
            this is item 4
        </div>
    </div>

</body>
</html>

运行结果

image.png

3.3.2 margin-top设置负值

给item1的margin-top设置负值

<!-- 在style中给item1的margin-top设置负值   -->
.item1{
    margin-top: -20px;
}

运行结果，item1与item2都向上移了20px

image.png

3.3.3 margin-bottom设置负值

<!-- 在style中给item1margin-bottom设置负值   -->
.item1{
    margin-bottom: -20px;
}

运行结果，item1没动，item2向上移了20px

image.png

3.3.4 margin-left设置负值

给item3的margin-left负值

<!-- 在style中给item3margin-left设置负值   -->
.item3{
    margin-left: -20px;
}

运行结果： item3与item4都向左移动20px

image.png

3.3.5 margin-right设置负值

给item3的margin-right负值

<!-- 在style中给item3margin-right设置负值   -->
.item3{
    margin-right: -20px;
}

运行结果： item3没动，item4向左移了20px

image.png

3.4 BFC的理解和应用

3.4.1 什么是BFC

Block format context，块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

3.4.2 常见形成的BFC条件

float不是none
position是absolute/fixed
overflow不是visible
display是flex/inline-block

3.4.3 BFC的应用

3.4.3.1 清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .box {
          display: inline-block;
          width: 50px;
          height: 50px;
          line-height: 50px;
          border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <div class="box left">box</div>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

给box加浮动以后，box不在container里，即脱离了文档流，影响布局

image.png

此时，给容器添加触发BFC的条件，box就不会因为浮动而脱离父级container

.bfc{
      overflow: hidden;
  }

效果如下

image.png

3.5 float布局

3.5.1 使用float实现圣杯布局和双飞翼布局

三栏布局，中间一栏最先渲染和加载，目的是为了第一时间显示重要的内容
两侧内容固定，中间内容随着宽度自适应
主要用于PC网页

3.5.1.1 圣杯布局的实现

使用float
使用position
使用margin负值
通过父容器给两边留白

基础样式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }
        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            width: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }
        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

代码效果

image.png

实现圣杯布局步骤以及详情代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }
        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            width: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
        }
        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
        /*1.为container里面的left/center/right元素添加浮动*/
        #container .column {
          float: left;
        }
        /*2.将container容器设置左右内边距，为两侧留白*/
        #container {
          padding-left: 200px;
          padding-right: 150px;
        }
        /*
        *3. 由于浮动，container容器元素脱离文档流，导致容器高度塌陷
        *因此容器需要清除浮动
        */
        .clearfix::after {
          content: ' ';
          display: block;
          clear: both;
        }
        /*4.为left设置margin-left为负值*/
        #left{
          margin-left: -100%; /*-100%是相对父级内容宽度，即除去内边距之后的宽度*/
        }
        /*5.left设置相对定位，并将其左移自己的宽度*/
        #left {
          position: relative;
          right: 200px;
        }
        /*6.为right元素设置margin-right*/
        #right {
          margin-right: -150px; /*当margin-right设置为负值，父容器会忽略自身的宽度*/
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

代码实现效果

image.png

3.5.1.2 双飞翼布局实现

基础结构代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

image.png

双飞翼布局的关键点

使用flot布局

中间容器(#main)的子容器(#main-wrap)设置margin-left/margin-right为左右两栏留白

左边容器设置margin-left: -100%;

右边容器设置margin-left: 负的自身宽度

以下是实现双飞翼布局的步骤代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
        }
        /*1. 为三个容器设置左浮动*/
        .col {
            float: left;
        }
        /*2. 设置中间容器子元素的左右外边距，目的是给两侧留白*/
        #main-wrap {
            margin-left: 190px;
            margin-right: 190px;
        }
        /*3. 将left容器margin-left设置为-100%*/
        #left {
            margin-left: -100%;
        }
         /*4. 将left容器margin-left设置为-190px*/
        #right {
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

image.png

3.6 flex

3.6.1 flex常用的语法

flex-direction // 设置主轴的方向
justify-content // 主轴对齐方式
align-items // 交叉轴的对齐方式
flex-wrap // 是否换行
align-self // 子元素在交叉轴的对齐方式

具体可以学习阮大神的flex教程

3.6.2 flex布局小案例

实现三点骰子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三点骰子</title>
  <style>
    .container{
      width: 240px;
      height: 240px;
      padding: 10px;
      background-color: #5596ff;
      border-radius: 10px;
    }
    .item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="child1" class="item"></div>
    <div id="child2" class="item"></div>
    <div id="child3" class="item"></div>
  </div>
</body>
</html>

image.png

代码要点

将container设置为flex布局，并设置子元素的对齐方式

设置子元素在交叉轴上的对齐方式

具体代码步骤如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三点骰子</title>
  <style>
    .container{
      width: 240px;
      height: 240px;
      padding: 10px;
      background-color: #5596ff;
      border-radius: 10px;
      /*1. 将容器设置为flex布局*/
      display: flex;
      justify-content: space-around; /*子元素在主轴上的对齐方式为：两端对齐，项目之间的间隔都相等。*/
      align-items: center;/*子元素在交叉轴上的对齐方式为： 中间对齐*/
    }
    .item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #fff;
    }
    /*2. child1设置：交叉轴的起点对齐*/
    #child1{
      align-self: flex-start;
    }
    /*3. child3设置：交叉轴的终点对齐*/
    #child3{
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="child1" class="item"></div>
    <div id="child2" class="item"></div>
    <div id="child3" class="item"></div>
  </div>
</body>
</html>

image.png

4. CSS定位

4.1 absolute和relative

4.1.1 relative

relative根据自身定位
不会对外界元素有影响

4.1.2 absolute

absolute依据最近一层的定位元素定位，如果没有找到则依据body元素定位
position设置为relative/absolute/fixed的元素策称为定位元素

4.2 居中对齐有哪些方式

4.2.1 水平居中

inlin元素：text-align: center;
block元素： margin: auto;
absolute元素：left: 50%; margin-left: 负值(自身宽度的一半);

4.2.2 垂直居中

inlin元素：line-height: 容器的height值;
absolute元素：top: 50%; margin-top: 负值(自身高度的一半);
absloute元素：transform: translate(-50%, -50%);
absloute元素：top,left,bottom,right设置为0; margin: auto;

5. CSS图文样式

5.1 line-height继承

5.1.1 继承数值

 <style>
    body{
      font-size: 20px;
      line-height: 20px;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

上面的代码，body元素line-height为20px，此时p标签的line-height会直接继承这个数值20px。

5.1.2 继承比例

 <style>
    body{
      font-size: 20px;
      line-height: 1.5;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

上面的代码，body元素line-height为1.5，即font-size的1.5倍，body的line-height为30px；此时，p标签继承的是body的line-height比例倍数，p标签的line-height = （自身的font-size） * （继承的line-height比例倍数），因此，上面的代码p标签的line-height为24px。

5.1.3 继承百分比

 <style>
    body{
      font-size: 20px;
      line-height: 200%;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

上面的代码，body元素line-height为200%，此时，body元素的line-height为40px。由于是百分比，p标签继承的是父级元素body计算后的line-height结果，所以上面的代码p标签的line-height最终为40px。

6. CSS响应式

常见的长度单位

px，绝对长度单位，由于是绝对长度，所以无法做响应式

em，相对长度单位，相对于父元素的font-size

rem，相对长度单位，相对于根元素的font-size
这里主要介绍rem

6.1 rem

0.16rem结果如下

image.png

0.32rem结果如下

image.png

0.48rem结果如下

image.png

6.2 响应式的常见方案

6.2.1 使用media-query(媒体查询)和rem实现

media-query(媒体查询)，根据不同的屏幕宽度设置不同的font-size。如下代码，通过媒体查询为不同的手机设置根元素的font-size：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>
    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {
                font-size: 110px;
            }
        }

        body {
            font-size: 0.16rem;
        }
        #div1 {
            width: 1rem;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>

6.2.2 使用vw-vh实现响应式

vh网页视口高度的1/100
vw网页视口宽度的1/100
vmax取两者(vh\vw)最大值，vmin取两者(vh\vw)最小值
解决了rem阶梯性问题

最后编辑于：2021.09.22 21:10:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

常用的HTML/CSS知识总结

1. HTML语义化

1.1 语义化和非语义化对比

2. HTML默认情况下的块级元素和内联元素

2.1 块级元素

2.2 内联元素

3. CSS布局

3.1 盒模型的宽度计算

3.1.1 如下代码，div1的offsetWidth是多大

3.2.1 如何让以上代码div的offsetWidth = 100px

3.2 margin纵向重叠问题

3.2.1 如下代码AAA与BBB之间的距离

3.3 margin负值问题

3.3.1 代码如下

3.3.2 margin-top设置负值

3.3.3 margin-bottom设置负值

3.3.4 margin-left设置负值

3.3.5 margin-right设置负值

3.4 BFC的理解和应用

3.4.1 什么是BFC

3.4.2 常见形成的BFC条件

3.4.3 BFC的应用

3.4.3.1 清除浮动

3.5 float布局

3.5.1 使用float实现圣杯布局和双飞翼布局

3.5.1.1 圣杯布局的实现

3.5.1.2 双飞翼布局实现

3.6 flex

3.6.1 flex常用的语法

3.6.2 flex布局小案例

4. CSS定位

4.1 absolute和relative

4.1.1 relative

4.1.2 absolute

4.2 居中对齐有哪些方式

4.2.1 水平居中

4.2.2 垂直居中

5. CSS图文样式

5.1 line-height继承

5.1.1 继承数值

5.1.2 继承比例

5.1.3 继承百分比

6. CSS响应式

6.1 rem

6.2 响应式的常见方案

6.2.1 使用media-query(媒体查询)和rem实现

6.2.2 使用vw-vh实现响应式

推荐阅读更多精彩内容