CSS - 3

wajiez發表於2024-11-26
CSS

CSS - 3

盒子模型

CSS box-model

content 內容區

padding 內邊距（補白）

border 邊框

margin 外邊距

div {
    /* 內容區寬高 */
    width: 400px;
    height: 400px;
    
    /* 內邊距，設定的背景顏色會填充內邊距區域 */
    padding: 20px;
    
    /* 邊框，設定的背景顏色會填充邊框區域 */
    border: 10px dashed black;
    
    /* 外邊距，不影響盒子大小，隻影響盒子的位置 */
    margin: 50px;
    
    font-size: 20px;
    background-color: gray;
}

盒子大小 = content + padding + border

內容區

子元素都在內容區裡

div {
    /* 區間：600~1000 */
    min-width: 600px;
    max-width: 1000px;
    
    /* 區間：50~400 */
    min-height: 50px;
    max-height: 400px;
    
    background-color: skyblue;
}

預設寬度：不設定 width 屬性時，元素所呈現出來的寬度

總寬度 = 父的content - 自身左右的 margin

內容區的寬度 = 父的content - 自身左右的 margin - 自身左右的 border - 自身左右的 padding

padding

div {
    width: 400px;
    height: 400px;
    
    padding-left: 20px;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 50px;
    
    /* padding: 10px; */
    
    /* 上下\左右 */
    /* padding: 10px 20px; */
    
    /* 上\左右\下 */
    /* padding: 10px 20px 30px; */ 
    
    /* 上\右\下\左 */
    /* padding: 10px 20px 30px 40px; */
    
    font-size: 20px;
    background-color: skyblue;
}

注意：

  • padding 不能為負數

  • 行內元素的左右 padding 沒問題，但上下 padding 不能完美設定

border

div {
    width: 400px;
    height: 400px; 
    background-color: skyblue;
    
    /* border: 5px; */
    
    /* border-width: 10px; */
    border-left-width: 10px;
    border-right-width: 10px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    
    /* border-color: red; */
    border-left-color: red;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: red;
    
    /* border-style: solid; */
    border-left-style: solid;
    border-right-style: dotted;
    border-top-style: dashed;
    border-bottom-style: double;
    
    /*
    border-left: 5px dashed purple;
    border-right: 5px dashed purple;
    border-top: 5px dashed purple;
    border-bottom: 5px dashed purple;
    */
}

margin

/* 同 border */

注意：

  • 子元素的 margin 參考父元素的 content 計算
  • margin 的值可以是 auto，可以實現一個塊級元素在其父元素內水平居中
div {
    width: 400px;
    height: 400px; 
    background-color: skyblue;
    
    /* margin: 100px auto; */
    margin-left: auto;
    margin-right: auto;
}
  • margin 可以是負值

margin塌陷問題

在一個父元素裡，給第一個子元素設定 margin-top 值，給最有一個子元素設定 margin-bottom 值，這兩個值都會被父元素搶走

<body>
    <div class="outer">
        <div class="inner1">part 1</div>
        <div class="inner2">part 2</div>
    </div>
</body>

.outer {
    width: 400px;
    background-color: gray;
    /* 解決 */
    overflow: hidden; /* 控制元素的內容溢位不可見 */
}
.inner1 {
    width: 20px;
    height: 20px;
    background-color: orange;
    /* margin-top: 50px; */
}
.inner2 {
    width: 20px;
    height: 20px;
    background-color: green;
    /* margin-bottom: 50px; */
}

注意：

  • 上面兄弟元素的下margin 和 下面兄弟元素的上margin 會合並，取一個最大值，而不是相加
  • 左右 margin 不會合並
  • 父元素加一個 border 不會搶走 margin

處理內容溢位

誰是容器，就在誰身上加屬性

overflow

#d1 {
    width: 400px;
    height: 200px;
    background-color: skyblue;
    overflow: hidden; /* 橫向、縱向的溢位全隱藏 */
    /* visible(預設) scroll(捲軸不會消失) auto */
}

overflow-x overflow-y 不能一個 hidden 一個 visible

隱藏元素的兩種方式

display: none;
visibility: hidden; /* show */

display 不佔位，visibility 佔位

樣式的繼承

會繼承的css屬性

字型屬性、文字屬性（除 vertical-align）、文字顏色

不會被繼承的css屬性

邊框、內邊距、外邊距、寬高、背景、溢位方式

元素的預設樣式

body：8px 外邊距

元素預設樣式 > 繼承樣式

佈局

居中

  • 塊元素居中 文字居中
<body>
    <div class="outer">
        <div class="inner">
            inner
        </div>  
    </div>
</body>

.outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    overflow: hidden;
}
.inner{
    width: 200px;
    height: 100px;
    background-color: orange;
    
    margin: 0 auto; /* 水平居中 */
    margin-top: 150px; /* 垂直居中 */
    
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 100px;
}
  • 行內元素/行內塊元素 可以當成文書處理
<body>
    <div class="outer">
        <span class="inner">
            hello
        </span>  
    </div>
</body>

.outer {
    width: 400px;
    height: 400px;
    background-color: gray;
    
    text-align: center;
    line-height: 400px;
}
.inner {
    background-color: orange;
    font-size: 20px;
}
  • 圖片行內元素居中
<html>
<head>
 	<style>
	.outer {
        width: 400px;
        height: 400px;
        background-color: gray;

        text-align: center;
        line-height: 400px;
        /* 文字的大小和影響中線的位置，進而影響圖片的位置 */
        font-size: 0px;
    }
    span {
        background-color: orange;
        font-size: 20px;
        vertical-align: middle;
    }
    img {
        vertical-align: middle;
    }
	</style>
</head>
<body>
    <div class="outer">
        <span class="inner">hello</span><img src="" alt="">
    </div>
</body>

</html>

元素之間的空白問題

<body>
    <div>
        <span style="background-color: red">123</span>
        <span style="background-color: blue">123</span>
        <span style="background-color: gray">123</span>
    </div>
</body>

視口顯式的三個 span 有空隙（行內元素、行內塊元素彼此之間的換行會被瀏覽器解析為一個空白字元），刪除回車後就沒了

/* 第二種解決辦法 */
div {
    font-size: 0px;
}
span {
    font-size: 20px;
}

行內塊元素的幽靈空白問題

圖片下邊有一條空白縫隙（因為預設是基線對齊）

行內塊元素與文字的基線對齊，而文字的基線與文字最底端之間是有一定距離的

/* 第一種解決方法 */
img {
    height: 200px;
    vertical-align: bottom;
}

/* 第二種解決方法 */
img {
   height: 200px;
   font-size: 0px;
}

/* 第三種解決方法：圖片獨佔一行後面沒東西時用 */
img {
   height: 200px; 
   display: block;
}

浮動

浮動之後的元素會脫離文件流，都是由內容撐開的，但是也可以設定寬高

不會獨佔一行，可以與其他元素共用一行

不會 margin 合併，也不會 margin 塌陷

.box {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

浮動後的影響

  1. 父元素塌陷
  2. 對後面的兄弟有影響

方法1

<head>
    <style>
        .box1,.box2,.box3,.box4 {
            float: left;
        }
        .mofa {
            /* 消除所有浮動元素的影響 */
            clear: both; /* left right */
        }
    </style>
</head>
<body>
    <div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <!-- 不能用行內元素 --> 
        <div class="mofa"></div>
    </div>
</body>

方法2 (前面所有的元素都要浮動)

<head>
    <style>
        .box1,.box2,.box3,.box4 {
            float: left;
        }
        .outer::after {
            content: ' ';
            display: block; /* 預設是inline */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
</body>

注意：要麼所有兄弟元素都浮動，要麼都不浮動

<head>
    <style>
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfic::after {
            content: ' ';
            display: block;
            clear: both;    
        }    
    </style>
</head>
<body>
    <div class="container">
        <div class="header clearfix">
            <div class="logo">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
    </div>
</body>

定位

相對定位

相對自己原來的位置

不會脫離文件流，元素位置的變化只是視覺效果上的變化，不會對其他元素產生任何影響

<head>
    <style>
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: relative;
            left: 20px;
            /* right: 20px; 左右不能同時寫，同時寫左生效 */
            
            top: 20px; /* box2會蓋在box3上，因為box2開定位了 */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

只要開啟定位了，層級就比其它元素高；都開定位，後寫的會蓋過先寫的

相對定位的元素也 能浮動（不推薦）

相對定位的元素也 能透過 margin 調整位置（不推薦）

應用場景：

  1. 微調

絕對定位

參考包含塊

  • 沒有脫離文件流的元素，父元素就是包含塊

  • 脫離文件流的元素，第一個開啟定位的祖先元素就是包含塊（如果所有祖先都沒定位，包含塊就是整個頁面）

會脫離文件流

不能浮動，同時設定定位為主

設定後變為定位元素，預設寬高由內容撐開，可以設定寬高

<head>
    <style>
        .outer {
            position: relative;
        }
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: absolute;
            left: 0; /* 左右不能同時寫，同時寫左生效(上下同理) */     
            top: 0; 
            margin-left: 100px; /* 有效 */
            margin-right: 100px; /* 無效(絕對定位沒有設定right) */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

絕對定位的元素也 能透過 margin 調整位置（不推薦）

應用場景：

  1. 把一個元素覆蓋到另一個元素上

固定定位

相對於視口

會脫離文件流

不能浮動，同時設定定位為主

設定後變為定位元素

固定定位的元素也 能透過 margin 調整位置（不推薦）

<head>
    <style>
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blue;
            position: fixed;
            left: 0; /* 左右不能同時寫，同時寫左生效(上下同理) */ 
            top: 0;
            margin-left: 100px; /* 有效 */
            margin-right: 100px; /* 無效(絕對定位沒有設定right) */
        }
        .box3 {
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>

粘性定位

參考最近的具備滾動機制的祖先元素 (body)，即使這個祖先不是最近的真實可滾動祖先 (overflow: scroll;)

高度小於裡面的內容可以有滾動機制

不脫離文件流

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 2000px;
        } 
        .item {
            background-color: gray;
        }
        .first {
            background-color: skyblue;
            font-size: 40px;
            position: sticky;
            top: 10px; /* 距離參考點10px就會被粘住，當A的父容器也划走的時候就失效 */
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">
           <div class="first">A</div>
			<h2>A1</h2> 
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
        </div>
        <div class="item">
           <div class="first">B</div>
			<h2>B1</h2> 
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
        </div>
    </div>
</body>

粘性定位的元素也 能浮動（不推薦）

粘性定位的元素也 能透過 margin 調整位置（不推薦）

定位的層級

  • 定位元素 > 無定位元素

  • 同樣是定位元素，後寫的 > 前寫的

調整層級的屬性：

z-index (開啟定位才能用)，值越大，層級越高

設定 z-index 時，要注意它的包含塊

定位可以越過padding

定位的特殊應用

特殊應用1

一個定位元素，沒有具體的寬高，充滿整個父元素

.outer {
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    background-color: orange;
    font-size: 20px;
    padding: 20px;
    boder: 10px solid black;
    /* width: 100%; 只能設定內容區 padding和border會超出 */
    position: abosolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

特殊應用2

讓定位元素在包含塊居中

.outer {
    width: 800px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 400px;
    height: 100px;    
    background-color: orange;
    font-size: 20px;

    position: abosolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

版心

在pc端網頁中，一般會有一個固定寬度且水平居中的盒子來顯式網頁的主要內容，這就是網頁的版心

  • 版心的寬度一般在 960~1200 px之間
  • 版心可以是一個，也可以是多個
常見位置 佈局名詞
頂部導航條 topbar
頁頭 header page-header
導航 nav navigator navbar
搜尋框 search search-box
橫幅、廣告、宣傳圖 banner
主要內容 content main
側邊欄 aside sidebar
頁尾 footer page-footer

重置預設樣式

  1. reset.css

    選擇具有預設樣式的元素，清空其預設樣式，經過 reset 後的網站，好似“一張白紙”

  2. Normalize.css

    在清楚預設樣式的基礎上，保留了一些有價值的樣式

相關文章