盒模型以及清除浮動 041

時間 2019-11-11

標籤模型以及清除浮動简体版

原文原文鏈接

盒模型 : box model 網頁中都會顯示一些方方正正的盒子稱這種盒子叫盒模型css

　　盒模型屬性:html

　　　　width : 內容的寬度瀏覽器

　　　　height: 內容的高度ide

　　　　border 邊框佈局

　　　　盒模型的計算 : 先無論marginspa

　　　　　　盒子的真實寬度 = width + 2*padding + 2*border.net

　　　　　　盒子的真實高度 = height + 2*padding + 2*border代理

　　若是要保證盒子的原來尺寸加padding就要減去width 減padding就要加width border也同樣.code

　　利用border屬性畫一個圓htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: darkgoldenrod;
            /*border: 1px solid darkred;*/

            /*根據方向來設置屬性*/
            /*border-left: 1px solid darkred;*/
            /*border-right: 5px dotted darkgoldenrod;*/
            /*border-top: 10px double darkblue;*/
            /*border-bottom: 1px solid greenyellow;*/
            /*根據三要素*/
            /*border-width: 5px 10px 1px;*/
            /*border-style: solid double dashed;*/
            /*border-color: red yellow darkcyan darkgray;*/
            /*border: 0;*/
            border-radius: 50%; //邊框的弧度 成圓的關鍵
        }
    </style>
</head>
<body>
<!--三要素  粗細  線性樣式 顏色-->
    <div class="box"></div>
</body>
</html>

造一個三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--利用邊框的寬度擠壓出來三角形-->
        .sanjiao{
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-bottom: 50px solid green;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="sanjiao"></div>
</body>
</html>

padding 和margin的使用 padding 沒有問題能夠正常使用可是margin在垂直方向上就會出現塌陷問題即給兩個標準流下的盒子設置垂直方向上的margin時, 好比上邊的盒子設置margin-bottom : 20px; 下邊的盒子設置 margin-top : 50px; 結果兩個盒子之間的距離僅爲50px 不是70px 稱這種現象叫作塌陷無法解決稱這種技巧爲'奇技淫巧' 解決方案設置浮動

　　margin : 0 auto; 使盒子居中

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;
        }

　　使用margin: 0 auto 注意事項

　　　　1 . 水平居中盒子必須有width 要有明確的width 即不是100% 有具體數量

　　　　2 .只有標準流下的盒子才能使用

　　　　3 .是居中盒子不是居中文本文本居中使用的是text-align:center;

　　margin 描述的是兄弟盒子之間的關係而padding 描述的是父子盒子之間的關係

　　要善於使用父親的padding 而不是margin

版心設置 : 即讓文本在盒子的中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 14px;
            color: #fff;
        }
        a{
            text-decoration: none;
        }

        #top {
            width: 100%;
            background-color: #000;
            height: 40px;
            line-height: 40px;
        }
        .container{
            width: 1226px;
            /*background-color: red;*/
            /*讓盒子居中*/
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            margin: 0 auto;
        }
        #top  a{
            font-size: 12px;
            color: #b0b0b0;
        }
        #top  a:hover{
            color: #fff;
        }

    </style>
</head>
<body>
<div id="top">
    <div class="container">
        <div class="top-l">
            <!--div標籤是塊級標籤 獨佔一行,span是行內標籤 一行內顯示-->
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="https://iot.mi.com/index.html" target="_self">loT</a>
            <span class="sep">|</span>
        </div>
    </div>
</div>

<div>
    <div class="container"></div>
</div>
</body>
</html>

標準文檔流 : 即從上而下從左到右進行排布

　　微觀現象有 : 空白摺疊現象 :多個空格會被合併成一個空格如今世道瀏覽器頁面中即空白摺疊現象

　　　　　　　　高矮不齊底邊對齊:即文字和圖片並排高度不同可是底邊對齊

　　　　　　　　自動換行 : 一行盛不下換行寫

浮動 : 是css裏面佈局最多的一個屬性也是很重要的一個屬性

　　四大特徵 :

　　　　浮動的元素脫標

　　　　浮動的元素互相貼靠

　　　　浮動的元素有字圍的效果

　　　　收縮的效果

　　脫標即脫標準離文檔流. 其不在頁面中佔位置至關於'飄起來了' 全部標籤一旦設置浮動就能並排且都不區分行內塊狀元素都能設置寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: red;
            float: left;
            width: 400px;
            height: 50px;
            padding-top: 50px;

        }
        span{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">alex</div>
    <span>alex</span>
    <!--<div>此時這個span可以設置寬度、高度</div>-->

</body>
</html>

View Code

　　互相貼靠 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            /*width: 500px;*/
            /*height: 500px;*/
            /*border: 1px solid darkred;*/
        }
        .box{
            width: 200px;
            height: 600px;
            background-color: red;
            float: left;
        }
        .wrap{
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
        .box2{
            width: 200px;
            height: 500px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box2"></div>
         <div class="wrap"></div>
    </div>
</body>
</html>

View Code

　　　　效果發現：

　　　　　　若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
　　　　　　若是沒有足夠的空間，那麼就會靠着1哥，若是再沒有足夠的空間靠着1哥，本身往邊靠

　　字圍效果:

.box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }


<div>
        <img src="./images/企業1.png" alt="">    
    </div>
    <p>
        123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
    </p>

　　　　效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。

　　緊湊效果: 一個浮動元素若是沒有設置width 則自動收縮爲文字的寬度.

　　謹記：關於浮動，咱們必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清除浮動，

清除浮動

　　若是不給父盒子設置一個高度那麼浮動的子元素不會填充父盒子的高度由於其脫離了標準文檔流雖然能夠實現元素並排的效果可是還帶來了頁面佈局的極大錯亂因此要清除浮動

　　方法 : 1 給父盒子設置高度 2 .clear :both 3 僞元素清除法 4 overflow : hidden

　　第一種不靈活使用場景導航欄

　　第二種給浮動元素最後面加一個空的div 而且該元素不浮動，而後設置clear:both 清除別人對個人浮動影響內牆法可是其平白無故加了div元素結構冗餘用的也少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*1.給父盒子設置高度*/
            /*height: 40px;*/


        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
<div class="top">
    <!--<span>alex</span>-->
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
</div>
<div class="header">
    <span>alex</span>
</div>
</body>
</html>

僞元素選擇器:

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與佈局有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

　　第三種用得比較多給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;



        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            display: block;
            /*隱藏  元素不佔位置*/
            /*display: none;*/
            /*隱藏 佔位置*/
            visibility: hidden;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>
<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="header"></div>

</body>
</html>

　　overflow : hidden:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*BFC*/
            /*可是不要忘了它原本的一層的意思*/
            overflow: hidden;



        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="header"></div>

</body>
</html>

overflow : 這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。

有五個值：

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

逐漸演變成overflow：hidden清除法。

其實它是一個BFC區域: http://www.javashuo.com/article/p-ezyacvwn-v.html

相關標籤/搜索

每日一句

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