前端之盒子模型

本文轉載自查看原文 2019-05-30 22:37 672 Web前端

CSS之盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

1.margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}
/*推薦使用簡寫*/
.margin-test {
  margin: 5px 10px 15px 20px;
}
/*順序：上右下左*/
/*常見的居中*/
.mycenter {
    margin: 0 auto;
}

2.padding內填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
/*推薦使用簡寫*/
.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的常用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序作用於四邊；

3.float浮動

在 CSS 中，任何元素都可以浮動。

浮動元素會生成一個塊級框，而不論它本身是何種元素。

關於浮動的兩個特點：

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

4.clear

clear屬性規定元素的哪一側不允許其他浮動元素。

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起作用，而不會影響其他元素。

清除浮動

清除浮動的副作用（父標簽塌陷問題）

主要有三種方式：

固定高度
偽元素清除法
overflow:hidden

偽元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

5.overflow溢出屬性

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

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

案例：制作個性的圓形頭像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }
        .head-img {
            width: 150px;
            height: 150px;
            margin: 75px;
            border: 3px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        .head-img>img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="head-img">
        <img src="本地圖片的地址" alt="">
    </div>
</body>
</html>

6.定位(position)

static

static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。

relative（相對定位）

相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute（絕對定位）

定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: #ff6700;
            float: right;
            margin-right: 400px;
            position: relative;

        }
        .c3 {
            height: 200px;
            width: 200px;
            background-color: green;
            position: absolute;
            top: 50px;
        }
    </style>
</head>
<body>
	<div class="c1"></div>
	<div class="c2">
    <div class="c3"></div>
</body>
</html>

7.fixed固定

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

脫離文檔流：

　　絕對定位

　　固定定位

不脫離文檔流：

　　相對定位

8.z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

案例：自定義模型框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義模態框</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .cover {
        background-color: rgba(0,0,0,0.65);
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 999;
    }
    .refg {
        background-color: white;
        position: fixed;
        width: 600px;
        height: 400px;
        left: 50%;
        top: 50%;
        margin: -200px 0 0 -300px;
        z-index: 1000;
    }
</style>
<body>
    <div class="cover"></div>
    <div class="refg"></div>
</body>
</html>

9.opacity

用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

案例：實現仿造博客頁面

<!--html頁面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cnblog</title>
    <link rel="stylesheet" href="bases.css">
</head>
<body>
    <!--左側的欄目開始-->
    <div class="cnlog-left">
        <div class="user-tx">
            <img src="../images/3.png" alt="">
        </div>
        <div class="cnblog-title">
            <p>小米論壇</p>
        </div>
        <div class="cnblog-mess">
            <p>更多小米的產品盡情關注</p>
        </div>
        <div class="link">
            <ul>
                <li><a href="#">關於小米</a></li>
                <li><a href="#">聯系我們</a></li>
                <li><a href="#">更多資訊</a></li>
            </ul>
        </div>
        <div class="cnblog-bottom">
            <ul>
                <li><a href="#">小米5</a></li>
                <li><a href="#">小米6</a></li>
                <li><a href="#">小米plus</a></li>
            </ul>
        </div>
    </div>
    <!--左側的欄目結束-->


    <!--右側的欄目結束-->
    <div class="cnblog-right">
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米7</span>
                <span class="date">2018-3-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米7的強大功能吧!功能強大的到爆炸~~~</p>
            </div>
            <div class="artice-bottom">
                <span>柔光雙攝</span><span>快充電源</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
        <div class="cnblog-content">
            <div class="cnblog-actice">
                <span class="title">小米6</span>
                <span class="date">2018-5-12</span>
            </div>
            <div class="actice-ys">
                <p>讓我們一起來見證小米6的強大功能吧!</p>
            </div>
            <div class="artice-bottom">
                <span>強大的照相機</span><span>便捷的充電</span>
            </div>
        </div>
    </div>
    <!--右側的欄目結束-->
</body>
</html>

/*CSS頁面*/
/*通用樣式*/
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f0f0f0;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
}
.clearfix:after {
    content: '';
    clear: both;
    display: block;
}
/*左邊的導航欄*/
.cnlog-left {
    float: left;
    position: fixed;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: #4d4c4c;
}
.user-tx {
    width: 150px;
    height: 150px;
    border: 2px solid white;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}
.user-tx img {
    width: 100%;
}
.cnblog-title, .cnblog-mess {
    color: darkgray;
    text-align: center;
}
.link a, .cnblog-bottom a {
    color: darkgray;
}
.link a:hover, .cnblog-bottom a:hover {
    color: tomato;
}
.link ul, .cnblog-bottom ul {
    text-align: center;
    margin-top: 60px;
}
/*右邊的導航欄*/
.cnblog-right {
    float: right;
    width: 80%;
}
.cnblog-content {
    background-color: white;
    margin: 20px 40px 20px 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.45);
}
.cnblog-actice {
    border-left: 3px solid red;
}
.title {
    font-size: 18px;
    font-weight: 500;
}
.date {
    float: right;
    font-size: 12px;
    margin-top: 10px;
    margin-right: 12px;
}
.actice-ys {
    border-bottom: 1px solid black;
}
.actice-ys p {
    font-size: 18px;
    text-ident: 24px;
}
.artice-bottom span {
    margin-left: 20px;
    font-size: 12px;
}

頁面效果:

案例二:實現導航欄效果

<!--html代碼-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導航欄示例</title>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
    <!--導航欄開始-->
    <div class="nav">
        <ul class="clearfix">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">MIUI</a></li>
            <li><a href="#">iop</a></li>
            <li><a href="#">雲服務</a></li>
            <li><a href="#">水滴公益</a></li>
            <li><a href="#">金融</a></li>
            <li><a href="#">優品</a></li>
        </ul>
    </div>
    <!--導航欄結束-->
</body>
</html>

/*CSS代碼*/
/*通用樣式*/
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
}
/*導航欄樣式*/
.nav {
    background-color: black;
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
}
li {
    float: left;
}
li>a {
    display: block;
    padding: 0 15px;
    color: #b0b0b0;
    line-height: 40px;
}
li>a:hover {
    color: tomato;
}
.clearfix:after {
    content: '';
    clear: both;
    display: block;
}

頁面效果:

免責聲明！

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

猜您在找 前端之CSS——盒子模型和浮動 WEB前端盒子模型初識 JS盒子模型盒子模型 CSS盒子模型盒子模型(div) 盒子模型詳解 html 盒子模型 CSS 盒子模型 CSS盒子模型