盒模型的屬性

本文轉載自查看原文 2018-09-19 16:37 1310 前端

一.屬性

　　width：內容的寬度

　　height: 內容的高度

　　padding：內邊距，邊框到內容的距離

　　border: 邊框，就是指的盒子的寬度

　　margin：外邊距，盒子邊框到附近最近盒子的距離

1.padding(內邊距)

　　padding：就是內邊距的意思，它是邊框到內容之間的距離

　　另外padding的區域是有背景顏色的。並且背景顏色和內容的顏色一樣。也就是說background-color這個屬性將填充所有的border以內的區域

　　padding有四個方向，分別描述4個方向的padding。

描述的方法有兩種

　　1、寫小屬性,分別設置不同方向的padding

padding-top: 30px;      離上邊30
padding-right: 30px;    離右邊30
padding-bottom: 30px;   離下邊30
padding-left: 30px;     離左邊30

　　2、寫綜合屬性，用空格隔開

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些標簽默認有padding

　　比如ul標簽，有默認的padding-left值。

我們現在初學可以使用通配符選擇器

*{
  padding:0;
  margin:0;    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*上下左右*/
            padding: 10px;
            /*上下  左右*/
            padding: 20px 30px;
            /*上  左右  下*/
            padding: 20px 30px 40px;
            /*順時針 上右下左*/
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <!-- padding是標准文檔流，父子之間調整位置 -->
    <div class="box">alex</div>
    
</body>
</html>

2.border(邊框)

　border:邊框的意思，描述盒子的邊框

　　邊框有三個要素：粗細線性樣式顏色

如果顏色不寫，默認是黑色。如果粗細不寫，不顯示邊框。如果只寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，並且黑色的邊框。

border-width: 3px;       邊框的粗細
border-style: solid;     邊框的樣式
border-color: red;       邊框的顏色
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;  實線  點線  雙實線   虛線  
border-color: red green yellow;
*/

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

View Code

上面12條語句，相當於 bordr: 10px solid red;

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

這樣也可以

　　border:none；

　　border：0；

　　表示border沒有設置樣式。

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

        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            
            /*width  style color*/
            /*根據方向來設置*/
            /*border-left: 5px solid green;
            border-right: 1px dotted yellow;
            border-top: 5px double purple;
            border-bottom: 1px dashed purple;*/

            /*border-left-style: solid;
            border-left-width: 1px;
            border-left-color: green;*/

        /*    border-width: 5px 10px;
            border-color: green yellow;
            border-style: solid double;*/

            /*border: 5px solid green*/
        }
    </style>
</head>
<body>
    <!-- padding是標准文檔流，父子之間調整位置 -->
    <div class="box">alex</div>
    
</body>
</html>

示例

使用border來制作園

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*color: transparent;*/
            width: 200px;
            height: 200px;
            background-color: red;
            /*制作圓角*/
            /*border-radius: 3px;*/
            /*border-radius: 100px;*/
            border-radius: 50%;    
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

View Code

使用border來制作小三角

/*小三角 箭頭指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

View Code

3.margin(外邊距)

　　margin：外邊距的意思。表示邊框到最近盒子的距離。

/*表示四個方向的外邊距離為20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;

margin-bottom: 100px;

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .s1{
            background-color: red;
            margin-right: 30px;
        }
        .s2{
            background-color:rgb(0,128,0);
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="s1">alex</span><span class="s2">wusir</span>
    
</body>
</html>

前提必須是標准文檔流下
　　margin的水平不會出現任何問題
　　垂直方向上 margin會出現'塌陷問題'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .s1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 40px;
        }
        .s2{
            width: 200px;
            height: 200px;
            background-color:rgb(0,128,0);
            margin-top: 100px;            
        }
    </style>
</head>
<body>
    <!--  -->
    <div class="s1"></div>
    <div class="s2"></div>
    
</body>
</html>

標准文檔流下margin的垂直方向的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

父子盒子的margin坑

margin的塌陷問題

html結構：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css樣式：

       *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

當給兩個標准流下兄弟盒子設置垂直方向上的margin時，那么以較大的為准，那么我們稱這種現象叫塌陷。沒法解決，我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。

當我們給兩個標准流下的兄弟盒子設置浮動之后，就不會出現margin塌陷的問題。

margin：0 auto;

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

        }

當一個div元素設置margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那么auto是什么意思呢？

設置margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什么意義。當設置margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句並存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。

另外如何給盒子設置浮動，那么margin:0 auto失效。

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標准流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(后面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

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

如果讓大家實現如圖的效果，應該有不少的同學做不出來。

那么我們來看看這個案例，它的坑在哪里？

下面這個代碼應該是大家都會去寫的代碼。

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }

因為父親沒有border，那么兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。

那么問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

二.標准文檔流

　　a.什么是標准文檔流

　　宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下，像 “織毛衣”。而設計軟件，想往哪里畫東西，就去哪里畫

　　b.空白折疊現象

　　多個空格會被合並成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。

　　c.高矮不齊.,底邊對齊

　　文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊

　　d.自動換行

　　如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字。

三.塊級元素和行內元素

1.行內元素和塊級元素的區別:

　行內元素:

　　　與其他行內元素並排;

　　　不能設置寬,高. 默認的寬高,就是文字的寬高.

　塊級元素:

　　　霸占一行,不能與其他任何元素並列;

　　　能接受寬,高.如果不設置寬高,那么寬高將默認變為父親的100%.

塊級元素和行內元素的分類:

從HTML的角度來講,標簽分為:

　　文本級標簽:p,span,a,b,i,u,em.

　　容器級標簽:div.h系列,li,dt,dd.

注意:為甚么說p是文本級標簽呢？因為p里面只能放文字&圖片&表單元素，p里面不能放h和ul，p里面也不能放p。

從CSS的角度講:

　　行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。

　　塊級元素：所有的容器級標簽都是塊級元素，還有p標簽。

2.塊級元素和行內元素的相互轉換 (必須是標准文檔流下)

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。

　　塊級元素可以轉換為行內元素 : display: inline;

　　行內元素可以轉換為塊級元素 : display: block;

屬性:

　　block 塊級標簽
　　　　- 獨占一行
　　　　- 可以設置寬高，如果不設置寬，默認是父盒子寬度的100%
　　inline 行內標簽
　　　　- 在一行內顯示
　　　　- 不可以設置寬高，根據內容來顯示寬高
　　inline-block 行內塊
　　　　- 在一行內顯示
　　　　- 可以設置寬高
　　none 不顯示隱藏不在文檔上占位置
　　visibility：hidden;隱藏在文檔上占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*display: inline;*/
            border: 1px solid yellow;
        }
        div a {
            display: block;
            width: 300px;
            height: 300px;
        }
        span{
            display:inline-block;
            width: 300px;
            height: 200px;
            background-color: yellow;            
        }
    </style>
</head>
<body>    
    <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
    <div class="box">wusir</div>
    <div>
        <a href="#">
            <img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
        </a>
    </div>
    <input type="text">
    <span>aaaaa</span>
    <span>aaaaa</span>
</body>
</html>

四.浮動

浮動是css里面布局最多的一個屬性，也是很重要的一個屬性。

float：表示浮動的意思。它有四個值。

none: 表示不浮動，默認
left: 表示左浮動
right：表示右浮動

看一個例子

html結構：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飛學城</span>

css樣式：

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

我們會發現，三個元素並排顯示，.box1和span因為是左浮動，緊挨在一起，這種現象貼邊。.box2盒子因為右浮動，所以緊靠着右邊。

那么浮動如果大家想學好，一定要知道它的四大特性

1.浮動的元素脫標

2.浮動的元素互相貼靠

3.浮動的元素由"子圍"效果

4.收縮的效果

浮動元素脫標

脫標：就是脫離了標准文檔流

看例子

     <div class="box1">小紅</div>
     <div class="box2">小黃</div>
     <span>小馬哥</span>
     <span>小馬哥</span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標簽竟然能夠設置寬高了。

原因1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標准文檔流，其實就是它不在頁面中占位置了，此時瀏覽器認為小黃是標准文檔流中的第一個盒子。所以就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素“飄起來了”，但我不建議大家這樣叫。

原因2：所有的標簽一旦設置浮動，就能夠並排，並且都不區分行內、塊狀元素，都能夠設置寬高

浮動元素互相貼靠

看例子

html結構

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

css樣式

        .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;
        }

效果發現：

如果父元素有足夠的空間，那么3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
如果沒有足夠的空間，那么就會靠着1哥，如果再沒有足夠的空間靠着1哥，自己往邊靠

浮動元素字圍效果

html結構：

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

css樣式：

       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

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

浮動元素緊湊效果

收縮：一個浮動元素。如果沒有設置width，那么就自動收縮為文字的寬度（這點跟行內元素很像）

html結構：

<div>
     alex
</div>

css樣式：

div{
    float: left;
    background-color: red;
}

大家一定要謹記：關於浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動，

為什么要清除浮動

在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什么？）

大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那么此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然后修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。

看一個效果：

html效果：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

 </div>

  <div class="father2"></div>

css樣式：

       *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮動 父盒子一般不設置高度*/

            /*出現這種問題，我們要清除浮動帶來影響*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果發現：如果不給父盒子一個高度，那么浮動子元素是不會填充父盒子的高度，那么此時.father2的盒子就會跑到第一個位置上，影響頁面布局。

那么我們知道，浮動元素確實能實現我們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動

還好還好。我們有多種清除浮動的方法，在這里給大家介紹四種：

給父盒子設置高度
clear:both
偽元素清除法
overflow：hidden

給父盒子設置高度

這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，並且子元素並排顯示的布局。比如：導航欄

clear：both

clear：意思就是清除的意思。

有三個值：

left：當前元素左邊不允許有浮動元素

right：當前元素右邊不允許有浮動元素

both：當前元素左右兩邊不允許有浮動元素

給浮動元素的后面加一個空的div，並且該元素不浮動，然后設置clear：both。

html結構：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最后面加一個空的div 並且該元素不浮動 ，然后設置clear:both  清除別人對我的浮動影響-->
            <!-- 內牆法 -->
            <!-- 無緣無故加了div元素  結構冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css樣式

       *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

偽元素清除法(常用)

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置

.clearfix:after{
    /*必須要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

新浪首頁推薦偽元素清除法的寫法

    
            /*新浪首頁清除浮動偽元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

overflow:hidden(常用)

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

有五個值：

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

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

其實它是一個BFC區域: https://blog.csdn.net/riddle1981/article/details/52126522

免責聲明！

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

猜您在找 彈性盒模型----容器屬性 CSS盒模型屬性詳細介紹 Webkit Flex伸縮盒模型屬性備忘什么是盒模型？盒模型 CSS3——彈性盒模型-flex——父級屬性理解標准盒模型和怪異模式&box-sizing屬性標准盒模型，彈性盒模型，怪異盒模型的區別 IE盒模型和標准盒模型標准盒模型和怪異盒模型