前端之CSS（二）

時間  2019-11-08
標籤 前端 css 欄目 CSS 简体版
原文   原文鏈接

1、盒子模型

 

說到盒子模型，咱們不得不提一下，W3C標準和IE瀏覽器是有區別的，我昨天就在寫抽屜做業的時候踩過坑，建議用谷歌瀏覽器，並推薦一篇博文：http://www.osmn00.com/translation/213.htmlcss

在W3C盒模型中，一個塊級元素的總寬度(總高度同理)按照以下的方程式計算：html

總寬度 = margin_left + border_left + padding_left + width + padding_right + border_right + margin_right瀏覽器

在IE盒模型中：總寬度 = margin_left + width + margin_rightide

IE盒模型的計算方式和W3C的很類似，但有一點是很是不一樣的，這就是：填充和邊框並不被包含在計算的範圍內。佈局

這就意味着一旦元素擁有橫向的填充和/或邊框，實際的內容區域（content area ）就要擴大來創造出他們佔據的空間。url

下面來詳細說一下盒子模型中的一些概念：spa

一、margin：外邊距，用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。ssr

<!DOCTYPE html>
<html lang="en">
<!--外邊距-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 12px auto;
            background-color: #2459a2;
            width: 980px;
            height: 100px;
        }
        div p{
            margin: 100px;
            background-color: #bebebe;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

外邊距
外邊距

 二、padding：內邊距，用於控制內容和邊框之間的距離；設計

<html>
<head>
    <style type="text/css">
        td{
        padding-top: 10%
        }
    </style>
</head>
<body>

<table border="1">
<tr>
    <td>
        這個表格單元擁有上內邊距。
    </td>
</tr>
</table>

</body>
</html>

內邊距
內邊距

 

border：邊框，能夠設置顏色，粗細等。3d

<html>
<head>

<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: dashed;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: dotted;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>

</head>

<body>

<p class="one">One-colored border!</p>

<p class="two">Two-colored border!</p>

<p class="three">Three-colored border!</p>

<p class="four">Four-colored border!</p>

<p><b>註釋：</b>"border-width" 屬性若是單獨使用的話是不會起做用的。請首先使用 "border-style" 屬性來設置邊框。</p>

</body>
</html>

邊框
邊框

 

注意點：
邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，由於body自己也是一個盒子（外層還有html)，在默認狀況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了。

代碼說明：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解決方法：

body{
    margin: 0;
}

邊界坍塌（邊界重疊）margin collapse現象

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當咱們上下排列一系列規則的塊級元素（如p）時，那麼塊元素之間由於外邊距重疊的存在，段落之間就不會產生雙倍的距離。

一、兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值。
二、父子div:若是父級div中沒有border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div進行margin。
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 20px;

        }
    </style>
</head>
<body>

<div style="background-color: cadetblue;width: 300px;height: 300px"></div>

       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>

</body>
</html>
      解決方法：
              1: border:1px solid transparent
              2:  padding:1px
              3: over-flow:hidden;
栗子：

2、盒子漂浮記（float）

在CSS中，咱們經過float屬性實現元素的浮動。

  • 浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
  • 因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框就表現得像浮動框不存在同樣。
  • 首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，就是所謂的流。
  • 浮動可使元素脫離文檔流。
  • 元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: #bebebe;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
    </style>

</head>
<body>
    <div class="div1">
        Hello
    </div>
    <div class="div2">
        World
    </div>
</body>
</html>

清除浮動

能夠理解爲打破橫向排列

清除浮動的關鍵字是clear，官方定義以下：

語法：

clear : none | left | right | both

取值：

none  :  默認值。容許兩邊均可以有浮動對象

left   :  不容許左邊有浮動對象

right  :  不容許右邊有浮動對象

both  :  不容許有浮動對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: #bebebe;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
    </style>

</head>
<body>
    <div class="div1">
        Hello
    </div>

    <div class="div2">
        World
    </div>
    <p>
        浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。所以，建立浮動框可使文本圍繞圖像
    </p>
</body>
</html>

要想阻止行框圍繞浮動框，須要對該框應用 clear 屬性。clear 屬性的值能夠是 left、right、both 或 none，它表示框的哪些邊不該該挨着浮動框。

爲了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直降低到浮動框下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: #bebebe;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
        .clean{
            clear: both;
        }
    </style>

</head>
<body>
    <div class="div1">
        Hello
    </div>

    <div class="div2">
        World
    </div>
    <p class="clean">
        浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。所以，建立浮動框可使文本圍繞圖像
    </p>
</body>
</html>
清除浮動

3、盒子定位記（position）

定位的基本思想就是容許咱們定義的元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。

 position是css定位機制中的一種，css有三種基本的定位機制：普通流、浮動（float）和絕對定位。

除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素的位置由元素在（X)HTML中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來的。

行內框在一行中水平佈置。可使用水平內邊距、外框和外邊距調整它們的間距，but，垂直內邊距、邊框和外邊距不影響行內框的高度。

由一行造成的水平框稱爲行框（line box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。

position的屬性值：

一、static

默認static，元素框正常生成，無特殊定位，對象遵循正常文檔流。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

二、relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>這是位於正常位置的標題</h2>
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增長 20 像素。</p>

相對定位

三、absolute

元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>經過絕對定位，元素能夠放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>
 絕對定位的層疊經過z-index屬性定義，z-index值越大，優先級越高。

四、fixed

 元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性      定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，    另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>

</body>
</html>

固定定位

4、後序之小插曲（武sir愛的補充...）

一、頁面佈局
 這個就是抽屜網頁的設計做業咯！
二、line-height:行高
在div中height=line-height時，文本內容就居中了。
 
三、width：980px;
margin:0 auto;
建立一個居中的塊
 
四、inline把塊級標籤變成內聯標籤，內聯標籤的寬度高度就沒用了
      block把內聯標籤變成塊標籤
      inline-block，把塊級標籤變成內聯標籤，且使高度和寬度有用
 
五、background-position移動背景圖片
background：url（// www.jd.....) 0 -58px no-repeat
background-position:0 -58px
 
六、z-index：圖層優先級的，值越大優先級越高
 
七、overflow

應用場景，有這麼一種狀況，在一個div內有不少的的內容，若是div的框體不是很大超出去了怎麼辦？

這個時候只須要加一句代碼： 
<div style="overflow:hidden;>
效果就是在div塊級標籤內有個滾動條，hidden超出div區域的將自動隱藏
 
八、透明度：transparency透明度，opacity不透明的 
<div style="background-color:blue;height:100px;padding-top:30px"><!--這裏設置內部的div的透明度--><div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;"></div></div>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程