常用的HTML/CSS知識總結(jié)

1. HTML語義化

1.1 語義化和非語義化對比

<!-- 非語義化 -->
  <div>標(biāo)題</div>
  <div>
    <div>一段文字</div>
    <div>
      <div>列表一</div>
      <div>列表二</div>
  </div>
  </div>

  <!-- 語義化 -->
  <h1>標(biāo)題</h1>
  <div>
    <p>一段文字</p>
    <ul>
      <li>列表一</li>
      <li>列表二</li>
    </ul>
  </div>

兩段代碼可以看出银受，使用了語義化標(biāo)簽可以更清晰分辨出標(biāo)題践盼、段落和列表。同時宾巍，也有利于SEO優(yōu)化咕幻。

讓人更容易讀懂（代碼可讀性高）
讓搜索引擎更易讀懂

2. HTML默認情況下的塊級元素和內(nèi)聯(lián)元素

2.1 塊級元素

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

2.2 內(nèi)聯(lián)元素

display: inline/inline-block;
span img input button等
特點：不會獨占一行，相鄰的內(nèi)聯(lián)元素會挨在同一行顶霞，直到瀏覽器邊緣才會換行

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 = （內(nèi)容寬度 + 內(nèi)邊距 + 邊框)，不包含外邊距
因此选浑，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>

如下圖：內(nèi)容蓝厌、內(nèi)邊距以及邊框都包含再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會發(fā)生重疊，且取大的值
空內(nèi)容的元素會被忽略margin發(fā)生重疊
因此古徒，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 的負數(shù)情況</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 的負數(shù)情況</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>

運行結(jié)果

image.png

3.3.2 margin-top設(shè)置負值

給item1的margin-top設(shè)置負值

<!-- 在style中給item1的margin-top設(shè)置負值   -->
.item1{
    margin-top: -20px;
}

運行結(jié)果拓提，item1與item2都向上移了20px

image.png

3.3.3 margin-bottom設(shè)置負值

<!-- 在style中給item1margin-bottom設(shè)置負值   -->
.item1{
    margin-bottom: -20px;
}

運行結(jié)果，item1沒動隧膘，item2向上移了20px

image.png

3.3.4 margin-left設(shè)置負值

給item3的margin-left負值

<!-- 在style中給item3margin-left設(shè)置負值   -->
.item3{
    margin-left: -20px;
}

運行結(jié)果： item3與item4都向左移動20px

image.png

3.3.5 margin-right設(shè)置負值

給item3的margin-right負值

<!-- 在style中給item3margin-right設(shè)置負值   -->
.item3{
    margin-right: -20px;
}

運行結(jié)果： item3沒動代态，item4向左移了20px

image.png

3.4 BFC的理解和應(yīng)用

3.4.1 什么是BFC

Block format context，塊級格式化上下文
一塊獨立的渲染區(qū)域疹吃，內(nèi)部元素的渲染不會影響邊界以外的元素

3.4.2 常見形成的BFC條件

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

3.4.3 BFC的應(yīng)用

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

此時缤谎，給容器添加觸發(fā)BFC的條件，box就不會因為浮動而脫離父級container

.bfc{
      overflow: hidden;
  }

效果如下

image.png

3.5 float布局

3.5.1 使用float實現(xiàn)圣杯布局和雙飛翼布局

三欄布局，中間一欄最先渲染和加載判莉，目的是為了第一時間顯示重要的內(nèi)容
兩側(cè)內(nèi)容固定豆挽，中間內(nèi)容隨著寬度自適應(yīng)
主要用于PC網(wǎng)頁

3.5.1.1 圣杯布局的實現(xiàn)

使用float
使用position
使用margin負值
通過父容器給兩邊留白

基礎(chǔ)樣式布局

<!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

實現(xiàn)圣杯布局步驟以及詳情代碼如下

<!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容器設(shè)置左右內(nèi)邊距，為兩側(cè)留白*/
        #container {
          padding-left: 200px;
          padding-right: 150px;
        }
        /*
        *3. 由于浮動券盅，container容器元素脫離文檔流帮哈，導(dǎo)致容器高度塌陷
        *因此容器需要清除浮動
        */
        .clearfix::after {
          content: ' ';
          display: block;
          clear: both;
        }
        /*4.為left設(shè)置margin-left為負值*/
        #left{
          margin-left: -100%; /*-100%是相對父級內(nèi)容寬度，即除去內(nèi)邊距之后的寬度*/
        }
        /*5.left設(shè)置相對定位锰镀，并將其左移自己的寬度*/
        #left {
          position: relative;
          right: 200px;
        }
        /*6.為right元素設(shè)置margin-right*/
        #right {
          margin-right: -150px; /*當(dāng)margin-right設(shè)置為負值娘侍，父容器會忽略自身的寬度*/
        }
    </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>

代碼實現(xiàn)效果

image.png

3.5.1.2 雙飛翼布局實現(xiàn)

基礎(chǔ)結(jié)構(gòu)代碼如下

<!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

雙飛翼布局的關(guān)鍵點

使用flot布局

中間容器(#main)的子容器(#main-wrap)設(shè)置margin-left/margin-right為左右兩欄留白

左邊容器設(shè)置margin-left: -100%;

右邊容器設(shè)置margin-left: 負的自身寬度

以下是實現(xiàn)雙飛翼布局的步驟代碼

<!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. 為三個容器設(shè)置左浮動*/
        .col {
            float: left;
        }
        /*2. 設(shè)置中間容器子元素的左右外邊距，目的是給兩側(cè)留白*/
        #main-wrap {
            margin-left: 190px;
            margin-right: 190px;
        }
        /*3. 將left容器margin-left設(shè)置為-100%*/
        #left {
            margin-left: -100%;
        }
         /*4. 將left容器margin-left設(shè)置為-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 // 設(shè)置主軸的方向
justify-content // 主軸對齊方式
align-items // 交叉軸的對齊方式
flex-wrap // 是否換行
align-self // 子元素在交叉軸的對齊方式

具體可以學(xué)習(xí) 阮大神的flex教程

3.6.2 flex布局小案例

實現(xiàn)三點骰子

<!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設(shè)置為flex布局泳炉，并設(shè)置子元素的對齊方式

設(shè)置子元素在交叉軸上的對齊方式

具體代碼步驟如下

<!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. 將容器設(shè)置為flex布局*/
      display: flex;
      justify-content: space-around; /*子元素在主軸上的對齊方式為：兩端對齊憾筏，項目之間的間隔都相等。*/
      align-items: center;/*子元素在交叉軸上的對齊方式為： 中間對齊*/
    }
    .item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #fff;
    }
    /*2. child1設(shè)置：交叉軸的起點對齊*/
    #child1{
      align-self: flex-start;
    }
    /*3. child3設(shè)置：交叉軸的終點對齊*/
    #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根據(jù)自身定位
不會對外界元素有影響

4.1.2 absolute

absolute依據(jù)最近一層的定位元素定位花鹅，如果沒有找到則依據(jù)body元素定位
position設(shè)置為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設(shè)置為0; margin: auto;

5. CSS圖文樣式

5.1 line-height繼承

5.1.1 繼承數(shù)值

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

上面的代碼氧腰，body元素line-height為20px，此時p標(biāo)簽的line-height會直接繼承這個數(shù)值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標(biāo)簽繼承的是body的line-height比例倍數(shù)盔然，p標(biāo)簽的line-height = （自身的font-size） * （繼承的line-height比例倍數(shù)）桅打，因此，上面的代碼p標(biāo)簽的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標(biāo)簽繼承的是父級元素body計算后的line-height結(jié)果崇众，所以上面的代碼p標(biāo)簽的line-height最終為40px掂僵。

6. CSS響應(yīng)式

常見的長度單位

px，絕對長度單位顷歌，由于是絕對長度锰蓬，所以無法做響應(yīng)式

em，相對長度單位眯漩，相對于父元素的font-size

rem芹扭，相對長度單位麻顶，相對于根元素的font-size
這里主要介紹rem

6.1 rem

0.16rem結(jié)果如下

image.png

0.32rem結(jié)果如下

image.png

0.48rem結(jié)果如下

image.png

6.2 響應(yīng)式的常見方案

6.2.1 使用media-query(媒體查詢)和rem實現(xiàn)

media-query(媒體查詢)，根據(jù)不同的屏幕寬度設(shè)置不同的font-size舱卡。如下代碼辅肾，通過媒體查詢?yōu)椴煌氖謾C設(shè)置根元素的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>響應(yīng)式布局</title>
    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的寬度（320px）比例設(shè)置 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）比例設(shè)置 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實現(xiàn)響應(yīng)式

vh網(wǎng)頁視口高度的1/100
vw網(wǎng)頁視口寬度的1/100
vmax取兩者(vh\vw)最大值矫钓，vmin取兩者(vh\vw)最小值
解決了rem階梯性問題

最后編輯于：2021.09.22 21:10:41

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市舍杜，隨后出現(xiàn)的幾起案子新娜，更是在濱河造成了極大的恐慌，老刑警劉巖既绩，帶你破解...
沈念sama閱讀 218,525評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件概龄，死亡現(xiàn)場離奇詭異，居然都是意外死亡饲握，警方通過查閱死者的電腦和手機私杜，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,203評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來互拾，“玉大人，你說我怎么就攤上這事嚎幸⊙湛螅” “怎么了？”我有些...
開封第一講書人閱讀 164,862評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵嫉晶，是天一觀的道長骑疆。經(jīng)常有香客問我，道長替废，這世上最難降的妖魔是什么箍铭？我笑而不...
開封第一講書人閱讀 58,728評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮椎镣，結(jié)果婚禮上诈火，老公的妹妹穿的比我還像新娘。我一直安慰自己状答，他們只是感情好冷守，可當(dāng)我...
茶點故事閱讀 67,743評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著惊科，像睡著了一般拍摇。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上馆截，一...
開封第一講書人閱讀 51,590評論 1贊 305
城市分裂傳說
那天充活，我揣著相機與錄音蜂莉，去河邊找鬼。笑死混卵，一個胖子當(dāng)著我的面吹牛映穗，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播淮菠，決...
沈念sama閱讀 40,330評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼男公，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了合陵？” 一聲冷哼從身側(cè)響起枢赔，我...
開封第一講書人閱讀 39,244評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎拥知，沒想到半個月后踏拜，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,693評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡低剔，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,885評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年速梗，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片襟齿。...
茶點故事閱讀 40,001評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡姻锁，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出猜欺，到底是詐尸還是另有隱情位隶，我是刑警寧澤，帶...
沈念sama閱讀 35,723評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布开皿，位于F島的核電站涧黄，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏赋荆。R本人自食惡果不足惜笋妥，卻給世界環(huán)境...
茶點故事閱讀 41,343評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望窄潭。院中可真熱鬧春宣，春花似錦、人聲如沸嫉你。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,919評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽均抽。三九已至嫁赏，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間油挥，已是汗流浹背潦蝇。一陣腳步聲響...
開封第一講書人閱讀 33,042評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工款熬，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人攘乒。一個月前我還...
沈念sama閱讀 48,191評論 3贊 370
代替公主和親
正文我出身青樓贤牛，卻偏偏與公主長得像，于是被迫代替她去往敵國和親则酝。傳聞我的和親對象是個殘疾皇子殉簸，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,955評論 2贊 355

常用的HTML/CSS知識總結(jié)

1. HTML語義化

1.1 語義化和非語義化對比

2. HTML默認情況下的塊級元素和內(nèi)聯(lián)元素

2.1 塊級元素

2.2 內(nèi)聯(lián)元素

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設(shè)置負值

3.3.3 margin-bottom設(shè)置負值

3.3.4 margin-left設(shè)置負值

3.3.5 margin-right設(shè)置負值

3.4 BFC的理解和應(yīng)用

3.4.1 什么是BFC

3.4.2 常見形成的BFC條件

3.4.3 BFC的應(yīng)用

3.4.3.1 清除浮動

3.5 float布局

3.5.1 使用float實現(xiàn)圣杯布局和雙飛翼布局

3.5.1.1 圣杯布局的實現(xiàn)

3.5.1.2 雙飛翼布局實現(xiàn)

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 繼承數(shù)值

5.1.2 繼承比例

5.1.3 繼承百分比

6. CSS響應(yīng)式

6.1 rem

6.2 響應(yīng)式的常見方案

6.2.1 使用media-query(媒體查詢)和rem實現(xiàn)

6.2.2 使用vw-vh實現(xiàn)響應(yīng)式

推薦閱讀更多精彩內(nèi)容