前端之CSS盒模型

時間  2019-11-17
標籤 前端 css 模型 欄目 CSS 简体版
原文   原文鏈接

一 CSS基礎選擇器

1.統配選擇器css

統配選擇器是指在html、body下使用，用於顯示的標籤。html

<!--語法-->
    * {
            樣式塊
        }

2.標籤選擇器架構

標籤選擇器選擇的是html文件中標籤名與選擇器標籤名一致的標籤。ide

/*語法（以div標籤爲例）*/
       div{
            樣式塊
        }

3.class選擇器佈局

class選擇器選擇的是html文件中類名與選擇器類名一致的標籤。spa

/*語法（div爲自定義的類名）*/
        .div{
             樣式塊   
        }

4.id選擇器設計

id選擇器選擇的是html文件中id與選擇器id一致的標籤。code

/*語法（top爲自定義的id）*/
        #top{
            樣式塊
        }
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基礎選擇器</title>
    <style>
        /*在實際開發中, 儘可能少用或不用標籤名來做爲選擇器*/
        /*標籤名做爲選擇器通常在該標籤爲最內層(語義|功能)標籤*/
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="css/1.css">
    <!--總結: 內聯和外聯, 相同屬性採用下者覆蓋上者, 不一樣屬性疊加-->


    <style>
        /*在css語法中如何來表示class名 => .就表明class*/
        .div1 {
            background-color: cyan;
        }
        .div2 {
            background-color: brown;
        }

        /*問題:css中用什麼標識id => #*/
        #did1 {
            background-color: tan;
        }
    </style>
    <style>
        * {
            background-color: yellow;
        }
        /*html和body顏色被改變了, 但全部的div顏色並無改變
        緣由: 不一樣的名字(選擇器)具備優先級*/
    </style>
</head>
<body>
    <div>1</div>
    <div style="background-color: pink">2</div>
    <!--總結: 行間式屬於邏輯最下方, 相同的屬性必定會覆蓋內聯和外聯-->
    <div class="div1">3</div>
    <!--問題: 不使用行間式單獨操做(可讀性差), 那又如何來單獨改變其顏色 => 其別名-->
    <div class="div2"></div>
    <!--總結: 用class起名, 分類別, 能夠重名 => 用什麼方式惟一標識一個標籤-->
    <div id="did1"></div>
    <!--給該標籤設置惟一標識符 id-->

    <!--瞭解: 統配選擇器 => css符合 => * -->
    <!--控制着: html body 及 body下全部用來顯示的標籤-->

</body>
</html>
基礎選擇器

選擇器的優先級htm

控制範圍越精確，優先級越高，所設置的樣式就會覆蓋優先級低的相同屬性樣式。blog

優先級順序：統配選擇器 < 標籤選擇器 < class選擇器 < id選擇器 < 行間式 < !important

注意：!import書寫在屬性值後;前。！import會提升樣式的優先級。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>選擇器優先級</title>
    <style>
        #div {
            background-color: yellow;
        }

        .div {
            background-color: yellowgreen;
        }

        div {
            background-color: green!important;
        }

        * {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
        /*!important 優先級要強於行間式, 在屬性值與;之間設定*/
    </style>
</head>
<body>
    <div class="div" id="div" style="background-color: red"></div>
    <!--總結: 行間式優先級要高於內連外連全部選擇器的優先級, 可是不能高於!important-->
</body>
</html>
選擇器優先級例子

二 顯示方式display

display的三種方式  inline、block、inline-block

1.inline

/*
1.同行顯示
2.只支持部分css樣式（不支持寬高）
3.寬高由文本內容撐開
*/

2.block

/*
1.異行顯示
2.支持全部css樣式
3.設置了寬高就採用設置的值，寬高也就有默認的特性
*/

3.inline-block

/*
1.同行顯示
2.支持全部css樣式
3.設置了寬高就採用設置的值
*/

總結：標籤的顯示方式就是用dispaly屬性控制的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        span {
            width: 200px;
            height: 50px;
            background-color: yellow;
        }
        p {
            width: 200px;
            height: 50px;
            background-color: red;
        }
        img {
            width: 200px;
            /*height: 50px;*/
        }
    </style>
</head>
<body>
<span>123<i>456</i><b>789</b></span>
<span>123<i>456</i><b>789</b></span>

<p>123<i>456</i><b>789</b></p>
<p>123<i>456</i><b>789</b></p>

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">


<!--結論:
1. 有些標籤支持寬高, 有些標籤不支持寬高
2. 有些標籤同行顯示, 有些標籤異行顯示(獨佔一行)
3. 有些標籤有結束標識, 有些標籤沒有結束標籤(省略了)
-->

<!--
不一樣的標籤, 在頁面中書寫的方式不同, 顯示效果也不同, 支持的css樣式程度也不同
-->

<!--分類-->
<!--1.單雙標籤的分類-->
<!--
單標籤: br|hr|img|meta|link, 功能具體, 不須要內容, 設置爲單標籤, 單標籤結束符在標籤尾部, 能夠省略
eg: <img /> | <br />
結論: 主功能

雙標籤: h1|p|span|div, 具備子標籤, 包含內容, 設置爲雙標籤, 雙標籤首尾分離
eg: <h1>內容</h1> | <div>子標籤</div>
結論: 主內容
-->

<hr>

<!--
2.經過display屬性值進行劃分

-->
<style>
    /* dispaly
    what: 控制標籤在頁面中的顯示方式的屬性
    why: 經過設置該屬性的不一樣屬性值, 使其在頁面中的顯示方式達到設定的效果,
    且對於css的樣式支持程度也不同
    */
    owen {
        color: blueviolet;
        width: 200px;
        height: 50px;
        background-color: red;
    }
    .o1 {
        display: inline;
        /*
        1.同行顯示
        2.只支持部分css樣式(不支持寬高)
        3.寬高由文本內容撐開
        */
    }
    .o2 {
        display: block;
        /*
        1.異行顯示
        2.支持全部css樣式
        3.設置了寬高就採用設置的值, 寬高也就有默認的特性(後面講)
        */
    }
    .o3 {
        display: inline-block;
        /*
        1.同行顯示
        2.支持全部css樣式
        3.設置了寬高就採用設置的值
        */
    }
    /*結論:
    1.帶有inline的就會同行顯示, 帶有block的就會支持全部css樣式
    2.帶有inline的都是與內容相關的標籤, 帶有block的主要用來搭建架構的
    */

    /*嵌套關係
    why: 頁面架構就是由標籤一層層嵌套關係造成

    嵌套關係由必定的規則
    1. inline-block類型不建議嵌套任意標籤, 因此係統的inline-block都設計成了單標籤
    2. inline類型只嵌套inline類型的標籤
    3. block類型能夠嵌套任意類型標籤(注: hn和p只建議嵌套inline類型標籤)
    */
</style>
<owen class="o1">123</owen>
<owen class="o1">123</owen>
<hr>
<owen class="o2">123</owen>
<owen class="o2">123</owen>
<hr>
<owen class="o3">123</owen>
<owen class="o3">123</owen>

<hr>

<!--複習-->
<style>
    .div {
        width: 100px;
        height: 100px;
        background-color: orange;
        display: inline-block;
    }
    /*標籤的顯示方式就是用display屬性控制*/
</style>
<div class="div">000</div>
<div class="div">111</div>
</body>
</html>
display的三種類型

三 嵌套關係

在一個頁面中，頁面的架構就是由標籤一層層嵌套關係造成的。

嵌套關係的規則

1.inline-block類型不建議嵌套任意標籤，因此係統的inline-block都設計成了單標籤。

2.inline類型只嵌套inline類型額標籤。

3.block類型能夠嵌套任意類型標籤（注：h標籤和p標籤只建議嵌套inline類型標籤）

注意

1.inline嵌套block和inline-block，不起任何做用，因此只能嵌套Inline。

2.inline-block能夠嵌套其餘類型的標籤，但必定要結合vertical-align屬性操做，左右還有一空格間距。（若是不與vertical-align屬性一塊兒結合使用的話，因爲inline-block佈局會受內部文本的影響，即在佈局時文本底端會對其其餘盒模型的底端，會對咱們的頁面佈局產生影響，達不到想要的效果）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>嵌套關係</title>
    <style>
        .list {
            display: inline-block;
            vertical-align: middle;
        }
        /*總結: vertical-align
        baseline: 文本底端對齊(默認值)
        top: 標籤頂端對齊
        middle: 標籤中線對齊
        bottom: 標籤底端對齊
        */
        .box {
            width: 80px;
            height: 35px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <!--
    嵌套關係
    why: 頁面架構就是由標籤一層層嵌套關係造成

    嵌套關係由必定的規則
    1. inline-block類型不建議嵌套任意標籤, 因此係統的inline-block都設計成了單標籤
    2. inline類型只嵌套inline類型的標籤
    3. block類型能夠嵌套任意類型標籤(注: hn和p只建議嵌套inline類型標籤)
    -->
    <div class="list">
        <div class="box">呵呵呵呵呵呵呵呵呵呵呵呵</div>
    </div>
    <div class="list">
        <div class="box" style="height: 60px">呵呵</div>
    </div>

    <!--問題: inline-block佈局會受內部的文本影響(文本底端對其)-->
    <!--解決: 什麼屬性能夠控制文本垂直方向的對齊關係 => vertical-align -->

    <!--
    結果:
    1.inline嵌套block和inline-block,不起任何做用, 因此只能嵌套inline
    2.inline-block能夠嵌套其餘類型標籤, 但必定要結合vertical-align屬性操做, 左右還有一空格間距
    3.block任何同行顯示 ???
    -->
</body>
</html>
嵌套關係

四 盒模型

盒模型由四部分組成   margin + border + padding + content

1.margin：外邊距，控制盒子的位置（佈局），經過控制top和left控制自身位置，經過控制right和bottom控制兄弟盒子的位置（劃區域）。

2.border：給盒子加上邊框，參數爲樣式+寬度+顏色（樣式有：solid實線、dashed虛線、dotted點狀線）

3.padding：內邊距。從現實角度控制文本的顯示區域。

4.content：內容區域，由寬 * 高 組成

注意

1.margin,padding參數起始位上，順時針一次賦值,沒有參數的邊取對邊的值。

2.要作到文本內移，設置padding，若是又想現實區域不變，相應減小content。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型</title>
    <style>
        body {
            margin: 0;
        }

        /*margin | border | padding | content(width x height)*/
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;


            /*padding: 10px 10px 10px 10px;*/
            /*padding: 20px 30px;*/
            /*起始爲上, 順時針依次賦值, 不足邊取對邊*/

            /*border-style: solid;*/
            /*border-width: 10px;*/
            /*border-color: red;*/
            /*transparent透明色*/
            border: blue dashed 20px;

            /*margin: 100px 50px;*/
            /*起始爲上, 順時針依次賦值, 不足邊取對邊*/
        }

        .box {
            padding: 10px 0 0 10px;
            width: 190px;
            height: 190px;
            /*margin-left: -80px;*/
            /*margin-top: -80px;*/
            margin-bottom: 100px;
        }
        /*總結:
        盒模型由四部分組成: margin + border + padding + content
        1.margin: 外邊距, 控制盒子的位置(佈局), 經過左和上控制自身位置, 經過右和下影響兄弟盒子位置(劃區域)
        2.border: 邊框, 樣式/寬度/顏色
        3.padding: 內邊距, 從顯示角度控制文本的顯示區域
        4.content: 內容區域, 由寬 x 高組成

        注意:
        1.margin,padding: 起始爲上, 順時針依次賦值, 不足邊取對邊
        2.要作到文本內移,設置padding, 若是又想顯示區域不變, 相應減小content
        */
    </style>
</head>
<body>
    <div class="box">123</div>
    <div>456</div>
</body>
</html>
盒模型相關代碼

五 盒模型佈局

'''
1.上下兩個盒子的margin-bottom和margin-top功能相同, 同時出現, 取大值
2.第一個有顯示區域的子級會和父級聯動(margin-top重疊), 取大值

解決2:
1.父級設置border-top
2.父級設置padding-top
'''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型佈局</title>
    <style>
        div {
            width: 78px;
            height: 33px;
            background-color: orange;
            border: 1px solid black;
        }
        /*前提: 盒子顯示區域 80 x 35*/
        .d1 {}
        .d2 {
            margin-left: 80px;
            margin-top: -35px;
            /*margin-bottom: 35px;*/
        }
        .d3 {
            margin-left: calc(80px * 2);
            margin-top: -35px;
        }
        .d4 {
            margin-left: calc(80px * 3);
            margin-top: -35px;
        }
        .d5 {
            margin-left: calc(80px * 4);
            margin-top: -35px;
        }
        .d6 {
            margin-left: calc(80px * 5);
            margin-top: -35px;
        }
        .d7 {
            margin-left: calc(80px * 6);
            margin-top: -35px;
        }
    </style>
</head>
<body>
    <!--.d${$}*7-->
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>

    <hr>
    <!--需求: b1 與 b2 上下間接50px-->
    <style>
        .b1 {
            margin-bottom: 50px;
        }
        .b2 {
            margin-top: 50px;
        }
        /*總結: 上下兩個盒子的margin-bottom和margin-top功能相同, 同時出現, 取大值*/
    </style>
    <div class="b1"></div>
    <div class="b2"></div>

    <!--瞭解: 左右正常疊加-->
    <style>
        .s1 {
            margin-right: 10px;
        }
        .s2 {
            margin-left: 10px;
        }
    </style>
    <span class="s1">1</span><span class="s2">2</span>

    <hr>

    <style>
        .sup {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*margin-top: 40px;*/
            /*border-top: 1px solid black;*/
            padding-top: 10px;
        }
        .sub1 {
            /*border: 1px solid red;*/
            width: 50px;
            height: 50px;
            background-color: red;
            margin-top: 50px;
        }
        .sub2 {
            width: 50px;
            height: 50px;
            background-color: pink;
            margin-top: 50px;
        }
        /*總結: 第一個有顯示區域的子級會和父級聯動(margin-top重疊), 取大值*/
        /*解決方案: 1.父級設置border-top | 2.父級設置padding-top*/
    </style>
    <section class="sup">
        <section class="sub1"></section>
        <section class="sub2"></section>
    </section>
</body>
</html>
盒模型佈局代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程