前端（五）

時間 2019-11-08

標籤前端简体版

原文原文鏈接

一盒子模型

先來吐槽，學過android的應該知道：控件的寬和高指定了就不會改變，內容和padding共同分配這塊區域，margin不屬於控件的一部分。然而前端概念就多了：css寬高僅僅是內容區域，盒子的大小是：內容區域+2*padding+2*border+2*margin。標籤的大小是:內容區域+2*padding+2*border。(android 好像是按照IE的規則去作的，不過在被前端淘汰了~)css

1.1body也有margin

<body>標籤有必要強調一下。不少人覺得<body>標籤佔據的是整個頁面的所有區域，實際上是錯誤的，正確的理解是這樣的：整個網頁最大的盒子是<document>，即瀏覽器。而<body>是<document>的兒子。瀏覽器給<body>默認的margin大小是8個像素，此時<body>佔據了整個頁面的一大部分區域，而不是所有區域。
前端

1.2認識weight和height

盒子的寬高！= css中寫的寬高，css中寫的僅僅是內容的佔用區域。android

1.3認識padding

padding有四個方向，因此咱們可以分別描述4個方向的padding。
瀏覽器

寫法一：bash

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;複製代碼

寫法二：綜合屬性的寫法：(上、右、下、左)（順時針方向，用空格隔開。margin的道理也是同樣的）佈局

padding:30px 20px 40px 100px;複製代碼

若是寫了四個值，則順序爲：上、右、下、左。
若是隻寫了三個值，則順序爲：上、右、下。??和右同樣。
若是隻寫了兩個值，則上、右邊、和上同樣、和右同樣。

1.4認識border

border就是邊框。邊框有三個要素：像素（粗細）、線型、顏色。學習

border是一個大綜合屬性。好比說：ui

border:1px solid red;
複製代碼

就是把4個邊框，都設置爲1px寬度、線型實線、red顏色。spa

1.5margincode

標準文檔流中垂直方向margin有塌陷問題；

margin儘可能不要用在父子之間，最好用在兄弟之間；

margin 0 auto；是讓盒子居中，要求有明確的寬度；

二標準文檔流的特性

咱們在前邊的文章中也說道過一些關於文檔流的特性，這裏系統概括一下：

不管多少個空格、換行、tab，都會摺疊爲一個空格。
同行內高低不齊，底部對齊。
行內元素和塊級元素的區別。

行內元素：

與其餘行內元素並排；

不能設置寬、高。默認的寬高，就是文字的寬高（行內替換元素除外）。

塊級元素：

霸佔一行，不能與其餘任何元素並列；

能接受寬高。若是不設置寬度，那麼寬度將默認變爲父親的100%,高度是包裹內容。

三行內元素和塊級元素轉換

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素能夠轉換爲行內元素：

一旦，給一個塊級元素（好比div）設置：

display: inline;
複製代碼

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

此時這個div不能設置寬度、高度；
此時這個div能夠和別人並排了。

行內元素轉換爲塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：

display: block;
複製代碼

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

此時這個span可以設置寬度、高度
此時這個span必須霸佔一行了，別人沒法和他並排
若是不設置寬度，將撐滿父親

四浮動

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？視乎根據現有的標準文檔流規定無法實現。辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動
（2）絕對定位
（3）固定定位

經過浮動實現（行內元素寬高管用）實現代碼：

.box1 {
            width: 200px;
            height: 300px;
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: #00ff00;
            float: left;
        }複製代碼

<span class="box1"></span>
<span class="box2"></span>複製代碼

經過浮動實現（塊級元素在同一行效果）實現代碼：

<div class="box1"></div>
<div class="box2"></div>複製代碼

接下來總結一下經過浮動脫標後的特性，來更好的使用浮動佈局：

浮動的標籤在另一個層面進行排列，1浮動2不浮動，1會覆蓋2。
浮動的標籤自有特性：行內元素寬高管用、塊級元素在同一行效果
浮動的元素互相貼靠。一、二、3 。這個時候3先挨着2，若是挨不住，再挨着1。
文字不會被浮動的盒子遮擋住。
收縮性：div浮動，寬度就變成了包裹內容。

小感覺：前端佈局和android佈局仍是有很大差異的。以前聽前端說：都是一像素一像素的調，一塊一塊的去佈局，還不太理解。如今理解了：原來佈局全靠加減去算~，沒有底部對齊，頂部對齊居中之類的屬性。這點不太人性化哦~

學習浮動的第一天起就要知道浮動須要清除。清除浮動方式以下：

方法一：給浮動元素的祖先元素加高度

若是一個元素要浮動，那麼它的祖先元素必定要有高度。

有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）

方法二：clear:both;

若是祖先高度是0，那麼意味着浮動沒有被關住，可是不想讓後邊標籤由於管不住而受到影響，就須要在後邊標籤屬性上加上clear:both；clear就是清除，both指的是左浮動、右浮動都要清除。clear:both的意思就是：強制關閉浮動之間相互影響。這種方法有一個很是大的、致命的問題，它所在的標籤，margin屬性失效了。

方法三：隔牆法；

上面這個例子中，爲了防止第二個div貼靠到第二個div，咱們能夠在這兩個div中間用一個新的div隔開，而後給這個新的div設置clear: both;屬性；同時，既然這個新的div沒法設置margin屬性，咱們能夠給它設置height，以達到margin的效果（曲線救國）。這即是隔牆法

方法四：內牆法；

div{
            background: #0000ff;
        }
        p{
            width: 100px;
            height: 100px;
            background: #FF0000;
            float: left;
        }
        .cl{
            clear: both;
        }複製代碼

<div>
    <p></p>
    <div class="cl"></div>
</div>複製代碼

方法五overflow:hidden;

overflow:hidden;的本意是清除溢出到盒子外面的文字。可是，前端開發工程師發現了，它能作偏方。以下：

一個父親不能被本身浮動的兒子，撐出高度。可是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。

相關標籤/搜索

每日一句

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