頁面布局

本文轉載自查看原文 2018-08-14 18:40 862 HTML5/CSS

1 頁面組成

2 布局相關的標簽

<div></div> 定義文檔中的分區或節
<span></span> 這是一個行內元素，沒有任何意義
<header></header> HTML5新增定義 section 或 page 的頁眉
<footer></footer> HTML5新增定義 section 或 page 的頁腳
<main></main> HTML5新增標簽規定文檔的主要內容。<main> 元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重復出現的內容，比如側欄、導航欄、版權信息、站點標志或搜索表單。IE都不識別
<nav></nav> HTML5新增表示鏈接導航部分如果文檔中有“前后”按鈕，則應該把它放到元素中
<section></section> HTML5新增定義文檔中的節通常不推薦那些沒有標題的內容使用section
<article></article> HTML5新增定義文章論壇帖子報紙文章博客條目用戶評論
<aside></aside> HTML5新增相關內容，相關輔助信息，如側邊欄

3 盒子模型

3.1 什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

Margin(外邊距) 清除邊框外的區域，外邊距是透明的。
Border(邊框) 圍繞在內邊距和內容外的邊框。
Padding(內邊距) 清除內容周圍的區域，內邊距是透明的。
Content(內容) 盒子的內容，顯示文本和圖像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 20px;  /*div中的內容距離邊框的距離*/
            border: 5px solid orange;   /*設置邊框的寬度、虛實線、顏色*/

            /*外邊距*/
            margin: 20px;  /*清除邊框外的區域，外邊距是透明的*/     

            background: pink; /*將邊框內的背景顏色為粉紅色*/
        }
    </style>
</head>
<body>
    <h1>盒子模型</h1>
    <hr>

    <div id="box">
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>

盒子模型

3.2 塊級元素和內聯元素(行內元素)

塊級元素

總是在新行上開始，占據一整行；
高度，行高以及外邊距和內邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
它可以容納內聯元素和其他塊元素。

內聯元素

和其他元素都在一行上；
高，行高及外邊距和內邊距部分可改變；
寬度只與內容有關；
行內元素只能容納文本或者其他行內元素。
外邊界只能對左右起作用，內邊距都起作用

塊級元素和內聯元素的轉換

display: block | inline | inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塊狀元素和內聯元素</title>
    <!--搞明白什么是塊狀元素什么是內聯元素，獨占一行的就是塊狀元素，否則就是內聯元素-->
    <style>
        h1 {width: 300px;}
        body {
            width: 200px;
        }

        strong {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1px solid red;
        }
        
        div {
            border: 1px solid red;
            padding: 50px;
        }


    </style>
</head>
<!--強調只要獨占一行就是塊狀元素-->
<body>
    <h1>塊狀元素和內聯元素</h1>       <!--獨占一行也是塊狀元素，塊狀元素設置寬和高是有效的-->
    同志你好  
    <hr>  

    <div>     <!--獨占一行-->
        Lorem ipsum dolor sit amet.
    </div>

    <a href="#">同志</a>   <!--沒有獨占一行，超鏈接是內聯元素-->
    你好

    <hr>

    <strong>我很狀</strong>   <!--獨占一行-->

    
</body>
</html>

塊狀元素與內聯元素

3.2 盒子模型之間的關系

document樹

父元素子元素后代元素祖先元素兄弟元素

標准文檔流

行內元素不占據單獨的空間，依附於塊級元素，行內元素沒有自己的區域。它同樣是DOM樹中的一個節點，在這一點上行內元素和塊級元素是沒有區別的。
塊級元素總是以塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。

盒子在標准流中的定位原則

行內元素之間的水平margin
塊級元素之間的豎直margin (margin的塌陷)
嵌套盒子之間的margin, (子元素父元素margin合並)
將margin設置為負值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型關系</title>
    <!--通過對元素設置寬和高看所這只的寬和高是否有效來判斷是塊狀元素還是內聯元素，設置寬和高有效的一般是塊狀元素，當然塊狀元素和內聯元素可以通過某種機制進行相互轉化-->
    <style>
        /*對塊狀元素進行設置寬高有效，默認寬度是父元素的寬，高度是自動（被內容撐開）*/
       /*給父及元素設置外邊框和內邊距*/
        #box01 {
            border:1px solid red;
            padding: 10px;
        }

        /*給父元素內的所有子元素設置邊框和背景顏色，子元素嵌套在父元素內，當然我們還可以針對父元素內的某一個子元素設置css樣式*/
        .item {
            width: 100px;
            height: 100px;
            background: pink;
            border: 1px dashed orange;
        }


        /*給父元素中的第一個子元素設置上、左、下三個外邊距，我們可以通過控制元素框的四個邊的外邊距來控制該框在大盒子中的位置*/
        .item01 {
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 30px;
        }

        /*給父元素內的第二個子元素設置上外邊距，第一個子元素和第二個子元素是親兄弟，而且上下相鄰，但是第一個子元素的下外邊距和第二個子元素的上外邊距並不是一種疊加的效果，而是取其中較大的外邊距為兩者的距離*/
        .item02 {
            margin-top:40px;
        }

    /*----------------------------------------------------------------------------------------------------------------------------------*/
        /*大部分內聯元素設置寬高無效，默認寬度是自動(被內容撐開)，高度也是自動，設置內邊距有效但是影響其他元素，CSS的文本屬性 會對內聯元素生效*/

        /*給父內聯元素整體設置邊框和背景顏色*/
        #box02 span {
            border:1px solid pink;
            background: #ccc;
        }
        
        /*給父內聯元素加上邊框，會覆蓋前面的，但是不會覆蓋背景顏色，因為這個也沒有設置背景顏色，不存在覆蓋這么一說*/
        #box02 {
            border: 1px solid red;
        }
        /*給內藍元素設置外邊距，發現是設置不了的，但是左、右外邊距是可以設置的*/
        .span01 {
            margin-top: 20px;
            margin-left: 20px;
            margin-right:20px;
        }
        .span02 {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <h1>盒子模型關系</h1>
    <hr>

    <div id="box01">
        <div class="item item01">1</div>
        <div class="item item02">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <hr>

    <div id="box02">
        <!--內聯元素-->
        <!--12和34之間有空格是由於換行引起的-->
        <span class="span01">1</span><span class="span02">2</span><span>3</span><span>4</span>
    </div>

</body>
</html>

盒子模型位置關系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塌陷問題</title>
    <style>
        /*只有塊狀元素的垂直方向才存在塌陷問題，內聯元素是不存在塌陷問題的，因為內聯元素是水平方向的*/
        #box {
            width:200px;
            height:200px;
            background: #ccc;
            /*解決塌陷的兩種方式：一是給父元素設置邊框，（給子元素設置邊框任然會塌陷），二是設置overflow:hidden;*/
            /*border: 1px solid red;*/
            overflow: hidden;
        }

        #inner {
            margin-left:50px;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <h1>盒子模型關系</h1>
    <hr>
    <!--父元素和其內的子元素塌陷問題-->
    <div id="box">
        <div id="inner"></div>
    </div>

</body>
</html>

塌陷問題

3.3 盒子模型相關CSS屬性

布局屬性

display


| 值           | 描述                                                 |
| ------------ | ---------------------------------------------------- |
| none         | 此元素不會被顯示。                                   |
| block        | 此元素將顯示為塊級元素，此元素前后會帶有換行符。     |
| inline       | 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值）                      |

float

| 值      | 描述                                                 |
| ------- | ---------------------------------------------------- |
| left    | 元素向左浮動。                                       |
| right   | 元素向右浮動。                                       |
| none    | 默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。                |

clear


| 值      | 描述                                  |
| ------- | ------------------------------------- |
| left    | 在左側不允許浮動元素。                |
| right   | 在右側不允許浮動元素。                |
| both    | 在左右兩側均不允許浮動元素。          |
| none    | 默認值。允許浮動元素出現在兩側。      |
| inherit | 規定應該從父元素繼承 clear 屬性的值。 |

visibility


| 值       | 描述                                                         |
| -------- | ------------------------------------------------------------ |
| visible  | 默認值。元素是可見的。                                       |
| hidden   | 元素是不可見的。                                             |
| collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。 |
| inherit  | 規定應該從父元素繼承 visibility 屬性的值。                   |

overflow


| 值      | 描述                                                     |
| ------- | -------------------------------------------------------- |
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。             |
| hidden  | 內容會被修剪，並且其余內容是不可見的。                   |
| scroll  | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto    | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。                 |

overflow-x
overflow-y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
        div {
            display: inline-block;  /*將div設置為行內塊元素*/

            /*max-width: 300px; 對塊狀有用*/
            min-width: 300px;  /*對inline-block 有用-------無論內容多小，框的寬度最小不會小於300px,當內容大於300px時，框的寬度會隨內容的變長而被撐開*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>    
            Lorem ipsum dolor sit amet.

    </div>
</body>
</html>

文本屬性之塊狀元素和內聯元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*設置選擇器box內的每一個子元素的框的寬和高以及背景顏色*/
        .item {
            width:100px;
            height:100px;
            background:#ccc;
            border:1px solid pink;

            /*通過display:inline;------把塊->內聯*/
            display: inline;
        }

        /*將box02內的所有選擇器為a的元素設置邊框以及背景顏色,但是通過html內的元素直到其實內聯元素並不能設置寬高，所以我們通過display:block;將其轉換成塊狀元素，這樣就可以設置框的寬高，並且可以點擊跳轉到指定的超鏈接*/
        #box02 a{
            width:100px;
            height:100px;
            background:#f5f5f5;
            border:1px solid red;

            /*通過display:block;------把內聯 塊*/
            display: block;
        }

        /*將父元素即一個內聯元素設置為一個塊元素，然后設置寬、內邊距、和框*/
        .product-box {
            display: block;
            padding: 10px;
            width: 150px;
            border:1px solid #ccc;
        }

        /*設置圖片的寬和父元素的寬保持一致，高一般不設置*/
        .product-box img{
            width:150px;
        }


        /*將列表變為*/
        .list {
            list-style: none;
            text-align: center; /*將文本內容進行居中*/
            font-size:0px;  /*這樣設置方框之間的間距就變為零了*/
        }

        /**/
        .list li {
            width: 100px;
            height: 100px;
            border:1px solid pink;
            background: #ccc;
            padding:10px;
            /*margin:20px;*/

            /*設置為 inline-block*/
            display:inline-block;

            font-size:16px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <hr>

    <div id="box02">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>

    <a href="1.html" class="product-box">
        <div class="product">
            <img src="../../dist/images_one/10.jpg" alt=""> <!--內聯-->
            <h3>商品</h3>
            <p>
                Lorem ipsum dolor sit amet,
            </p>
        </div>
        
    </a>

    <hr>


    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <img src="../../dist/images_one/10.jpg" alt="">
    <img src="../../dist/images_one/10.jpg" alt="" style="display: none">
</body>
</html>

布局相關的CSS屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相關屬性</title>
    <style>
        #box {
            width:100px;
            height:100px;
            background: red;

            visibility: hidden;  /*此元素的內容以及設置的css樣式會被隱藏，雖然被隱藏了但是占據的空間(位置)依然存在*/
            display: none;      /*此元素以及設置的css樣式將不會顯示*/
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid red;

            /*控制子元素的顯示*/
            /*overflow: hidden; /*隱藏溢出的部分*/
            /*overflow: scroll;  出現滾動條，會出現右和下兩個滾動條*/
             /*overflow: auto; 出現滾動條*/

             overflow-y:hidden;
        }

        .box ul {
            width:500px;
        }
    </style>
</head>
<body>
    <h1>相關屬性</h1>
    <hr>

    <div id="box">
        asdfasdfsadfasdf
    </div>

    <p>Lorem ipsum dolor sit amet.</p>

    <hr>

    <div class="box">
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
        </ul>
    </div>

</body>
</html>

布局相關屬性

尺寸

width / max-width / min-width
height / max-height / min-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
        div {
            display: inline-block;  /*將div設置為行內塊元素*/

            /*max-width: 300px; 對塊狀有用*/
            min-width: 300px;  /*對inline-block 有用-------無論內容多小，框的寬度最小不會小於300px,當內容大於300px時，框的寬度會隨內容的變長而被撐開*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>    
            Lorem ipsum dolor sit amet.

    </div>
</body>
</html>

最大寬和最小寬

內補白

padding / padding-left / padding-right / padding-top / padding-bottom

外邊距

margin
margin-left
margin-right
margin-top
margin-bottom

4 浮動

4.1 什么是浮動

CSS的Float(浮動)，元素可以圍繞其他元素向左或向右被推動
設置浮動，脫離普通文檔流
浮動元素都會變為塊級元素
如果不設置寬度，會盡可能的窄
浮動元素之后的元素將圍繞它浮動元素之前的元素將不會受到影響。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            /*將元素設置為浮動，之前沒有設置框的寬度，那么寬度就是auto 的，即被內容撐開，但是如果沒有設置為浮動元素，那么寬就是父元素的寬*/
            float: left;     
        }
    </style>
</head>
<body>
    <h1>浮動的特點</h1>
    <hr>

    <div class="box">
        Lorem ipsum dolor
    </div>
</body>
</html>

浮動的特點

4.2 設置浮動

.item { float:left } .item { float:right } /*float 屬性的默認值是 none 表示沒有浮動*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志浮動</title>
    <style>
        /*給所有的box類選擇器添加上內邊距、虛線邊框和下外邊距*/
        .box {
            padding: 20px;
            width: 1000px;
            border: 5px dashed red;
            margin-bottom: 10px;    /*下外邊距設置盒子之間的距離*/
        }
         
        /*將所欲的item類選擇器設置邊框為實線、紅線，背景顏色設置為灰色*/
        .item {
            /*width:100px;*/
            height:100px;
            background:#ccc;        /*后面設置背景顏色會覆蓋掉其背景顏色*/
            border:2px solid red;
    
        }
        
        /*將所有的item02類選擇器設置官渡和背景顏色，也就是每一個虛框內的第一個框的背景顏色*/
        .item02 {
            /*設置浮動*/
            /*float:left;*/ 
            width:50px;
            /*如果設置了浮動，沒有設置該寬度，那么浮動元素的寬就是默認被內容撐開的，如果沒有設置浮動，也沒有設置該寬，則默認的寬是父元素的寬去掉內邊距*/        
            background:#ccc;    /*灰色*/
        }

        /*將所有的item03類選擇器設置官渡和背景顏色，也就是每一個虛框內的第二個框的背景顏色*/
        .item03 {
            width:80px;
            background:#369;   /*藍色*/
        }
        
        /*將所有的item04類選擇器設置官渡和背景顏色，也就是每一個虛框內的第三個框的背景顏色*/
        .item04 {
            width:100px;
            background:#f90;   /*屎黃色*/

        }
/*-----------------------------------------------------------------------------------------------------*/
        
        /*
        1、元素向左或向有浮動不會調出父類的寬
        2、元素浮動會調出文檔流（對后面的元素產生影響）
        3、元素一旦浮動會轉換成塊元素
        4、浮動的元素並不會獨占一行(但是並不會獨占一行)，因為脫離文檔流
        5、浮動的元素寬度是默認的auto，默認是被內容撐開
        6、多個元素浮動，會排成一排，寬度超過父元素的寬度會自動換行
        7、浮動框不占據空間
        */

        /*第一個浮動*/
        .box02 .item02 { 
            float:left;      
        }


        /*第二個浮動*/
        .box03 .item03 {
            float: left;
        }

        /*第三個元素浮動*/
        .box04 .item04 {
            float: left;
        }

        /*第三個元素 向右浮動*/
        /*向右浮動碰到包含框就是停下，但是已經脫離文檔流，也就不受包含框的控制了*/
        .box05 .item04 {
            float: right;
        }

        /*第二個元素向右浮動*/  
        /*第二個向右浮動，碰到右邊包含框停下，浮動后不占據空間，那么此時框3就會向上占據之前浮動框的位置，此時包含框的高度就是被沒有浮動的1和3框撐開的*/
        .box06 .item03 {
            float: right;
        }
        

        /*整體向左浮動*/   
        /*浮動元素不占據空間*/
        /*
        如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框
        包含框沒有設置高度，會被沒有浮動的子元素的框撐開，如果子元素的框都浮動，那么此時的包含框的高就是內邊距的高
        */
        .box07 .item {    
            float: left;
        }
        .box07 .item02 {
            height: 150px;
        }
    </style>
</head>
<body>
    <h1>浮動</h1>
    <hr>

    <div class="box box01">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <h2>第一元素浮動</h2>
    <div class="box box02">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>


    <h2>第二元素浮動</h2>
    <div class="box box03">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <h2>第三元素浮動</h2>
    <div class="box box04">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <div style="clear:both"></div>

    <h2>第三元素向右浮動</h2>
    <div class="box box05">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>
    
    <div style="clear:both"></div>

    <h2>第二元素向右浮動</h2>
    <div class="box box06">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>


    <h2>全部向左浮動</h2>
    <div class="box box07">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

</body>
</html>

浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字符環繞</title>
    <style>
        /*設置字段的內容框的寬、內邊距和顏色*/
        p {
            width: 800px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /*將強調的首字母設置為浮動類型，浮動類型的元素就變成快元素，所以我們為浮動的快元素設置寬，以及將強調的字體大小設置為默認字體大小的三倍*/
        p strong {
            font-size:3em;   /*將首字母的字體大小設置為默認字體大小的三倍*/
            width: 40px;    /*為了讓內容不緊挨着浮動元素，我們給浮動元素設置了寬，這樣看起來就會更好看一點，首字母浮動后面的文本內容沒有鑽到浮動元素的下面，這是瀏覽器設置的，這樣我們就能看到完整的文本內容了*/
            /*浮動*/
            float: left;
        }
    </style>
</head>
<!------------------------------------------------------------------------------------------------------->
<body>
    <h1>同志環繞</h1>
    <hr>

    <p>
        <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque!
    </p>
</body>
</html>

應用1：首字母環繞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字環繞圖片</title>
    <style>
        /*給圖片和文本內容整體設置一個框和內邊距，然后在進行文字環繞圖片的操作，我們沒有設置高，包含框的高會被內容撐開*/
        article {
            width: 600px;
            padding: 10px;  
            border: 2px solid #ccc;
        }
        
        /*將圖片設置為浮動的，此時就變為了塊狀元素，為了不讓圖片顯示的太大，我們設置了圖片的寬度*/
        article img {
            width:200px;   /*設置顯示圖片的合適大小*/
            float: left;
            margin-right:10px;  /*設置塊狀元素的右外邊框，使得文字環繞圖片不是那么的緊湊，這樣看起來會更好看*/
        }
    </style>
</head>
<body>
    <h1>同志新聞</h1>
    <hr>
    
    <article>
        <img src="../../dist/images_one/10.jpg" alt="">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae!
        </p>
    </article>
</body>
</html>

應用2：文字環繞圖片

4.3 清除浮動

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創建浮動框可以使文本圍繞圖像：

行框圍繞浮動框

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨着浮動框。

clear: both clear: left clear: right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>浮動影響</title>
    <!-- 選擇器的作用就是選擇要修飾的名字 -->
        <style>

        /*
        ### 1.2 浮動的影響
        * 對后面元素影響。   后面元素會整體向前
        * 對父元素有影響 （父元素的高不能被撐開）

        ### 1.3 消除浮動影響
        * 消除元素對后面元素的影響，  在后面的元素設置 `clear:both/left/right`
        * 消除子元素浮動對父元素的影響 。 給元素浮動  或者 設置 `overflow`
        */
        header {
            /*居中 左右是auto*/
            margin: 0 auto;         /*上下設置為多少無所謂，將左右外邊距設置為自動，這樣就可以是塊元素居中*/

            width: 800px;        /*設置表頭內容的寬度*/
            /*height: 100px;    設置頁頭的框的高度，一般不進行讓其成為一個固定值，而是隨文本內容而被撐開*/
            
            color: #000;         /*設置表頭中文本字體的顏色為黑色*/
            text-align: center;  /*將頁頭內的文本內容相對每一個框進行居中*/
 
            border: 2px solid red;   /*設置邊框，表頭的總寬度是內容加上邊框的寬度，可以通過審查元素進行查看*/

            /*消除子元素浮動 對老子的影響*/
            /*
            1.3 消除浮動影響的兩種方法：
            消除元素對后面元素的影響，  在后面的元素設置 `clear:both/left/right`，一般值設置為both即可
            消除子元素浮動對父元素的影響 。 給元素浮動或者設置 `overflow`-----溢出的意思
            */

            /*float: left;*/   /*將元素設置為向左浮動*/
            overflow: auto; /*消除子元素浮動對父元素的影響*/
        }
        
        /*對頁頭的logo進行設置，將期設置向左浮動，並為其設置寬度和背景顏色，由於頁頭沒有設置高，會被內容撐開*/
        /*line-height是行高的意思，height則是定義元素自身的高度*/
        .logo {
            float: left;   /*將logo設置為向左浮動*/
            width: 200px;  

            /*行高100px， 對.logo里面的文字*/
            line-height: 100px;  /*設置的是行高*/
            background: #f90;
            height: 150px;    /*設置元素的高*/
        }
        .logo h1 {
            /*h1的行高，繼承了父元素的行高 對h1里面的文字進行設置*/
            margin: 0;
        }
        .banner {
            float: right;
            width: 580px;
            line-height: 100px;
            background: #369;      /*將背景顏色設置為藍色*/
        }


        /*導航*/
        nav {

            /*清楚前面的浮動對老子的影響*/
        /*    clear: both;
            clear: left;
            clear: right;
        */
            clear: right;
            clear: left;
            clear: both;

            margin:10px auto;
            width:800px;
            text-align: center;
            background:pink;
            padding:10px 0px;
        }
        nav ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        nav li {
            display: inline-block;
        }

        
    </style>

</head>



<!-- 設置網頁的思想，先設置html元素，該網頁需要分成兩行，分別是頁頭和導航，然后在根據哪些元素需要設置為浮動元素，以及需要什么樣的樣式在style中通過選擇器對指定的文本內容進行設置 -->
<body>
    <!--頁頭-->
    <header>
        <!-- 將頁頭又分為兩部分，分為左邊的logo和右邊的banner -->
        <div class="logo">
            <h1>同志交友</h1>    <!--可以通過設置換行來看行高和高的區別-->
        </div>
        <div class="banner">
            Lorem ipsum dolor sit amet,
        </div>
    </header>

    <!--導航-->
    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">論壇</a></li>
            <li><a href="#">關於我們</a></li>
            <li><a href="#">舉報我們</a></li>
        </ul>
    </nav>
</body>
</html>

浮動的影響和解決影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
    <style>
        /*設置父元素的寬，*/
        .list {
            border: 2px solid red;
            width: 600px;
            list-style: none;
            padding: 0;
        }

        .list li {
            width:100px;
            height: 100px;
            background:#ccc;
            border:1px solid green;

            float: left;  /*將所有的li屬性設置為向左浮動，大家都變為橫向的，但是浮動的元素超過包含元素的框就會換行*/
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

多個元素超過父元素的寬

4.4 浮動實驗

實現以下實現

設置第一浮動的div
設置第2個浮動div
設置第3個浮動div
改變第三個浮動方向
改變第二個浮動方向
全部向左浮動,增加第一個的高度
使用clear屬性清楚浮動的影響
擴展盒子的高度 (元素高度和浮動的元素)
段落首字母浮動
圖片浮動
簡單浮動布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局實例</title>
    <style>
        body {
            margin: 0px;
        }
        /*容器*/
        .container {
            margin: 0 auto;  /*讓整個元素水平居中，一般網頁的內筒也都是水平居中的*/
            width: 1000px;
        }

        /*頁頭*/
        .page-header {
            overflow: hidden;/*消除子元素對父元素的影響*/
            background: #999;  /*h1自帶margin,背景的高度被內容撐開*/
            color: #fff;
            /*font-size: 2em;*/
        }
        
        /*頁面主體*/
        .page-main {

        }
        
        /*頁面側邊欄*/
        .aside {
            float: left;
            width:300px;
            height: 400px;
            border-right: 1px solid #999;
        }
        
        /*頁面內容-------需要設置左右浮動*/
        .content {
            float: right;
            width:680px;
            height:400px;
        }
        
        /*頁腳*/
        .page-footer {
            /*border:1px solid red;*/
            clear: both;   /*清除元素對后面元素的影響，如果不設置也頁腳元素就會上去，因為頁面元素已經變味浮動，不在占位置*/
            overflow: hidden; /*消除子元素浮動對父元素的影響*/
            color: #fff;
            background:#999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>西紅柿首富</h1>
        </div>
        <div class="page-main">
            <div class="aside">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis.
                </p>
            </div>
            <div class="content">
                <h2>西紅柿首富影評</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum.
                </p>
            </div>
        </div>
        <div class="page-footer">
            <h2>西紅柿首富很棒</h2>
        </div>
    </div>
</body>
</html>

布局實例1

4.5 浮動相關CSS屬性總結

float 值: none(默認) /left /right
clear 值: none(默認) /both /left /right

4.6 浮動布局小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局實例</title>
    <style>
        /*通用的設置*/
        /*把一些元素自帶外邊距和內邊距去掉*/
        * {
            margin: 0;
            padding: 0;
        }
        /*設置所有的字體大小和字體的類型，並將文本內容進行居中，需要設置其他字體的大小可以以該字體的倍數進行設置*/
        body {
            font:12px 'Microsoft YaHei',sans-serif;
            text-align: center;
        }
        
        /*設置整體的寬度，並讓其居中，這樣其內部所有的元素就可以顯示在其寬度內*/
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        
        /*設置左或右浮動，需要設置浮動的元素直接通過選擇器進行引用即可*/
        .left {
            float: left;
        }
        .right {
            float: right;
        }

        /*將背景顏色設置為灰色，需要將背景顏色設置為灰色的直接通過選擇器進行引用即可*/
        .bg {
            background: #ccc;
        }

        /*消除元素對后面元素的影響，需要設置的直接通過選擇器進行應用即可*/
        .clearfix {
            height: 10px;
            clear: both;
        }
        /*設置邊框，需要用的直接應用即可*/
        .border {
            border: 1px solid #ccc;
        }

        /*end 通用設置*/

        /*page-header 頁頭*/
        /*通過margin設置塊狀元素之間的距離*/
        .logo {
            width: 200px;
            height: 100px;
            margin-right: 10px;
        }

        .banner1 {
            width: 580px;
            height: 100px;
            margin-right: 10px;
        }
        .banner2 {
            width: 200px;
            height: 100px;
        }

        /*end page-header*/

        /*page-nav 導航*/
        .page-nav {
            height: 40px;
        }
        /*end page-nav*/

        /*page-main*/
        
            /*page-content*/
        .page-content {
            width: 790px;
        }
        .page-aside {
            width: 200px;
        }
        .item01 {
            width: 388px;
            height: 198px;
        }
        .item02 {
            width:188px;
            height: 198px;
            margin-right:10px;
        }
        .item02-last {
            margin-right: 0px;
        }
            /*endpage-content*/
            
            /*page-aside 側邊欄*/
        .item03 {
            height:128px;
        }
            /*endpage-aside*/
        


        /*end page-main*/

            
        /*page-footer 頁腳*/
        .page-footer {
            height: 60px;
        }
        /*end page-footer*/


    </style>
</head>
<body>
    
    <div class="container">
        <!--頁頭-->
        <div class="page-header">
            <div class="left bg logo">LOGO</div>
            <div class="left bg banner1">BANNER01</div>    
            <div class="left bg banner2">BANNER02</div>    
        </div>
        <!--end 頁頭-->
            
        <div class="clearfix"></div>
        
        <!--頁面導航-->
        <div class="bg page-nav">
            導航    
        </div>
        <!--end 頁面導航-->

        <div class="clearfix"></div>
        
        <!--頁面主體，里面分為 左邊的主要內容和右邊的側邊欄-->
        <div class="page-main">
            <!--主要內容-->
            <div class="left page-content">
                <div class="row">
                    <div class="left border item01">欄目一</div>
                    <div class="right border item01">欄目二</div>
                </div>

                <div class="clearfix"></div>

                <div class="row">
                    <div class="left border item02">欄目三</div>    
                    <div class="left border item02">欄目四</div>    
                    <div class="left border item02">欄目五</div>    
                    <div class="left border item02 item02-last">欄目六</div>    
                </div>

            </div>

            <!--側邊欄-->
            <div class="right page-aside">
                <div class="border item03">欄目七</div>
                <div class="clearfix"></div>
                <div class="border item03">欄目八</div>
                <div class="clearfix"></div>
                <div class="border item03">欄目就</div>
            </div>
        </div>
        <!--end 頁面主體結束-->

        <div class="clearfix"></div>
            
        <!--頁腳-->
        <div class="bg page-footer">頁腳</div>
        <!--end 頁腳-->
    </div>
</body>
</html>

布局實例2

5 定位

5.1 相對定位

使用相對定位的盒子,會相對於它原來的位置,通過偏移指定的距離,到達新的位置
使用相對定位的盒子,仍在標准流中,它對父塊好兄弟盒子沒有任何影響

.box { position: relative; top: 10px; left: 20px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <style>
        .box {
            width:150px;
            height: 150px;
            border:2px solid red;
            background: #ccc;

            /*設置為相對定位的元素*/
            position: relative;
            /*left:100px;
            top:100px;*/
            /*right:20px;*/
            /*bottom: 100px;*/
            left:100px; /*優先級高*/
            /*right:100px;*/
        }
    </style>
</head>
<body>
    <h1>相對定位</h1>
    <hr>

    <div class="box"></div>

    <hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facere vel exercitationem, sit saepe ut consectetur molestiae temporibus quasi earum praesentium. Molestiae autem, atque tempore. Veritatis odit ratione autem ipsam.</p>
</body>
</html>

相對定位

5.2 絕對定位

使用絕對定位的盒子以它"最近"的一個"已經定位"的"祖先元素"為基准進行偏移. 如果沒有已經定位的"祖先元素", 那么會以瀏覽器窗口為基准進行定位
絕對定位的框從標准流中脫離,這意味着它們對其后的兄弟盒子的定位沒有影響,其他的盒子就好像這個盒子不存在一樣

.box { position: absolute; top: 10px; left: 20px }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        #box {
            width: 800px;
            padding: 20px;
            border: 2px solid red;

            /*設置相對定位*/
            position: relative;
            /*position: absolute;*/
        }
        p {
            border:1px solid #ccc;
            padding: 20px;
        }

        #inner {
            width: 100px;
            height:100px;
            background: #f90;
            
            /*絕對定位*/
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <h1>絕對定位</h1>
    <hr>

    <div id="box">
        
        <div id="inner">絕對定位</div>
        
        <hr>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, vitae veritatis porro perferendis harum sed minima eos exercitationem, praesentium id corporis deserunt eligendi laboriosam aliquid eius nesciunt temporibus a incidunt.
        </p>
    </div>
</body>
</html>

絕對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>實現元素 在頁面中 水平和垂直都居中</title>
    <style>
        .box {
            width: 400px;
            height: 300px;
            background: pink;
        
            /*水平居中 */
            /*margin:100px auto;*/
            
            /*絕對定位*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left:-200px; /*負 元素寬度的一半*/
            margin-top:-150px; /*負 元素高度的一半*/
        }
    </style>
</head>
<body>
    

    <div class="box">
        是的發生發的
    </div>
</body>
</html>

元素水平垂直居中

5.3 固定定位

以瀏覽器窗口為基准窗口滾動時,依然保持位置不變

.box { position: fixed; top: 10px; left: 20px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志</title>
    <style>
        #nav {
            width:100px;
            height: 200px;
            background: pink;

            /*設置固定定位 脫硫文檔流*/
            position: fixed;
            /*position: absolute;*/
            /*left:20px;
            top:50px;*/
            right:20px;
            bottom:30px;
        }
    </style>
</head>
<body>
    <h1>固定定位</h1>
    <hr>


    <div id="nav"></div>

    <hr>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam similique ex omnis excepturi voluptas deserunt ea nihil fugiat veritatis sapiente hic inventore, harum possimus vitae, ipsam explicabo aut architecto ipsum.
    </p>

    <div style="height:2000px"></div>
</body>
</html>

固定定位

5.4 空間位置

使用css屬性 z-index設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
z-index 僅能在定位元素上奏效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空間位置</title>
    <style>
        .box01 {
            position: relative;
            width: 200px;
            height: 200px;
            background: pink;

            /*設置z-index*/
            z-index:100;
        }

        .box02 {
            position: absolute;
            width: 300px;
            height: 100px;
            background: red;
            left: 10px;
            top: 20px;

            /*不服*/
            z-index: 1000;
        }
    </style>
</head>
<body>
    
    <div class="box01">box01 相對定位 老子就想在上面</div>
    <div class="box02">box02 絕對定位</div>
</body>
</html>

元素的空間位置

5.5 定位相關CSS屬性總結

position static(默認值) /relative /position /fixed
top
left
right
bottom
z-index auto(默認值)/數字

6 瀏覽器兼容性

6.1 瀏覽器分類

主流瀏覽器(原生瀏覽器)

擁有獨立內核的瀏覽器被稱為主流瀏覽器

chrome 內核 blink 早期的chrome使用apple的開源內核 webkit. 我們依然習慣上稱呼chrome的內核為webkit
safari 內核 webkit
IE 內核 Trident
Firfox 內核 Gecko
Opera v12.17以前采用 Presto 內核。后來緊跟chrome的步伐，使用chrome的內核成為了殼瀏覽器

殼瀏覽器

在某瀏覽器內核之上增加相應的輔助功能，並改變其名稱與外觀的瀏覽器

opera、360安全、360極速、UC、搜狗、獵豹、QQ瀏覽器、2345瀏覽器、淘寶瀏覽器等

6.2 瀏覽器對HTML5和CSS3的兼容性情況

HTML5需要 IE9以及以上版本的IE瀏覽器支持
CSS3不同的模塊對瀏覽器的兼容程度各不相同。對於IE瀏覽器，肯定需要IE9以及以上的瀏覽器支持
chrome、firefox瀏覽器一般都會自動更新，所以兼容性特別棒！
手機瀏覽器，大多使用webkit內核，兼容性較好。關鍵是手機上沒有IE！
目前的國產瀏覽器，多采用雙內核，使用chrome內核的時候兼容性較好

6.3 兼容技巧

設置IE使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

讓雙核瀏覽器默認使用webkit內核

<meta name="renderer" content="webkit">

讓IE8識別HTML5新增標簽

<!--[if lt IE 9]> <script src="/html5shiv/dist/html5shiv.js"></script> <![endif]-->

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html頁面布局之table布局：后台管理頁面布局、web頁面布局 flutter頁面布局一訂單頁面布局 ElementUI 整體頁面布局 unigui的頁面布局使用頁面布局的幾種方式 Windows phone 7之頁面布局關於html頁面布局【Flutter學習】頁面布局之其它布局處理