頁面佈局

時間 2019-11-17

標籤頁面佈局简体版

原文原文鏈接

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

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

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

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

<!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樹中的一個節點，在這一點上行內元素和塊級元素是沒有區別的。安全
塊級元素老是以塊的形式表現出來，而且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。app

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

行內元素之間的水平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;   /*屎黃色*/

        }
/*-----------------------------------------------------------------------------------------------------*/
        
        /*
        一、元素向左或向有浮動不會調出父類的寬
        二、元素浮動會調出文檔流（對後面的元素產生影響）
        三、元素一旦浮動會轉換成塊元素
        四、浮動的元素並不會獨佔一行(可是並不會獨佔一行)，由於脫離文檔流
        五、浮動的元素寬度是默認的auto，默認是被內容撐開
        六、多個元素浮動，會排成一排，寬度超過父元素的寬度會自動換行
        七、浮動框不佔據空間
        */

        /*第一個浮動*/
        .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]-->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。