Web前端基礎(5):CSS(二)

時間 2019-11-17

標籤 web 前端基礎 css 欄目 HTML 简体版

原文原文鏈接

1. 盒模型

在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。css

盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。html

1.1 盒模型示意圖

1.2 盒模型的屬性

width：內容的寬度前端

height: 內容的高度 linux

padding：內邊距，邊框到內容的距離，padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域 web

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

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

1.2.1 盒模型的計算

若是一個盒子設置了padding，border，width，height 學習

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

盒子的真實高度=height+2*padding+2*border設計

若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。

1.2.2 padding的設置

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

1.寫小屬性，分別設置不一樣方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2.寫綜合屬性，空格隔開

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

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

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

標籤的默認padding

好比ul，ol標籤，有默認的padding-left值。

那麼咱們通常在寫網頁的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。

通配符選擇器：

*{
  padding:0;
  margin:0;    
}

但這種方法效率不高。因此咱們要使用並集選擇器來選中頁面中應有的標籤。(可是有人給咱們寫好了這些清除默認的樣式表，reset.css)。

1.2.3 border的設置

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

邊框有三個要素：粗細、線性樣式、顏色。（如不寫顏色默認爲黑色。如不寫粗細不顯示邊框。只寫線性樣式，默認有上下左右 3px寬度的實體黑色邊框。）

按照三要素來寫baoder：

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-style: 實線，點狀，雙線，虛線*/

按照方向劃分設置小屬性：

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;

按照方向設置：

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

取消border樣式：

border:none；
border：0；

border-radius屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box1{
            width: 200px;
            height: 200px;
            border-radius: 20px;
            background-color: #f0809d;
        }
        div.box2{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #7ef0c2;
        }
        div.box3{
            width: 200px;
            height: 200px;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            background-color: #b589f0;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

1.2.4 margin的設置

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

設置margin：

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

margin的塌陷：

html:
<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>
css:
    *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            border: 1px solid gray;
            /*float: left;*/
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
            /*float: left;*/
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            /*float: left;*/
        }

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;
*/

2. 塊級元素和行內元素

在之前的HTML知識中，咱們已經將標籤分過類，當時分爲了：文本級、容器級。

咱們也學習了行內元素和塊級元素的分類，其實這種分類方式是從CSS的角度講的。

行內元素：

與其餘行內元素並排。

不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

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

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

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

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

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

display: inline;

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

此時這個div不能設置寬度、高度。

此時這個div能夠和別人並排了。

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

給一個行內元素（好比span）設置：

display: block;

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

此時這個span可以設置寬度、高度。

此時這個span必須霸佔一行了，別人沒法和他並排。

若是不設置寬度，將撐滿父親。

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

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

（1）浮動

（2）絕對定位

（3）固定定位

3. 浮動

浮動是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盒子由於右浮動，因此緊靠着右邊。

3.1 浮動的四大特性

1.浮動的元素會脫離標準文檔流

2.浮動的元素互相貼靠

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

4.收縮的效果

3.1.1 浮動元素脫標

脫標：就是脫離了標準文檔流。

例子：

html
    <div class="box1">小紅</div>
     <div class="box2">小黃</div>
     <span>小馬哥</span>
     <span>小馬哥</span>
css:
        .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：全部的標籤一旦設置浮動，就可以並排，而且都不區分行內、塊狀元素，都可以設置寬高。

3.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哥，本身往邊靠。

3.1.3 浮動元素的字圍效果

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中的文字不會被遮蓋，此時就造成了字圍效果。

3.1.4 浮動元素的緊湊效果

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

例子：

html：
<div>
     alex
</div>

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

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

3.2 浮動的問題和清除浮動

3.2.1 浮動的問題

在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）

你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

例子：

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的盒子就會跑到第一個位置上，影響頁面佈局。

那麼咱們知道，浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！因此咱們要清除浮動。

3.2.2 清除浮動

(1) 給父盒子設置高度

這個方法給你們上個代碼介紹，它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄。

(2) 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;
        }

(3) 僞元素清除法

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

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

(4) overflow:hidden

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

說明：

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

有五個值：

visible：默認值。內容不會被修剪，會呈如今元素框以外。

hidden：內容會被修剪，而且其他內容是不可見的。

scroll：內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。

auto：若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。

inherit：規定應該從父元素繼承 overflow 屬性的值。

相關標籤/搜索

每日一句

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