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

<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 調整位置（不推薦）

應用場景：

微調

絕對定位

參考包含塊

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

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

會脫離文件流

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

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

<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 調整位置（不推薦）

應用場景：

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

固定定位

相對於視口

會脫離文件流

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

設定後變為定位元素

固定定位的元素也 能透過 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

重置預設樣式

reset.css

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

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

【CSS】【3】CSS選擇器
2017-11-09
CSS
3、CSS 字型
2020-11-13
CSS
CSS3
2018-03-21
CSSS3
[CSS 3] :has()
2024-06-24
CSS
CSS3簡明教程之初識CSS3
2021-09-09
CSSS3
【css】純CSS3模仿3D星空動畫特效
2017-03-23
CSSS33D動畫特效
css3省略……
2019-02-23
CSSS3
CSS3 quotes
2019-03-28
CSSS3
CSS3 Transition
2019-03-11
CSSS3
CSS3 rotate()
2018-08-08
CSSS3
CSS3 clip
2018-08-23
CSSS3
CSS3 @supports
2018-08-17
CSSS3
CSS3 currentColor
2018-08-18
CSSS3
CSS3 vmax
2018-12-16
CSSS3
CSS3 vmin
2018-12-16
CSSS3
CSS3 vh
2019-01-27
CSSS3
CSS3 vw
2019-01-27
CSSS3
CSS3 rem
2018-12-21
CSSS3REM
CSS3 attr()
2018-07-27
CSSS3
CSS3 order
2018-07-27
CSSS3
CSS3 columns
2018-03-31
CSSS3
CSS3 counter()
2018-05-21
CSSS3
CSS3動畫
2017-11-06
CSSS3動畫
css3rotateimage
2017-11-22
CSSS3
CSS/CSS3語法新特性筆記
2022-03-06
CSSS3筆記
CSS系列：CSS3新增選擇器
2015-03-29
CSSS3
CSS3筆記
2020-04-06
CSSS3筆記
CSS3 動畫解析
2019-03-03
CSSS3動畫
CSS3初識
2021-09-09
CSSS3
CSS3 animation 動畫
2019-02-04
CSSS3動畫
css3 漸變
2018-08-09
CSSS3
CSS3 @keyframes
2018-09-05
CSSS3
css3 新特性
2018-09-12
CSSS3
CSS3 七字型
2020-10-28
CSSS3
html5&css3
2020-11-04
HTMLCSSS3
CSS3-背景篇
2020-11-27
CSSS3
CSS3-其它特性
2020-11-27
CSSS3
CSS3 之 flex
2018-06-16
CSSS3Flex

CSS - 3

CSS - 3

盒子模型

內容區

padding

border

margin

margin塌陷問題

處理內容溢位

隱藏元素的兩種方式

樣式的繼承

會繼承的css屬性

不會被繼承的css屬性

元素的預設樣式

佈局

居中

元素之間的空白問題

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

浮動

浮動後的影響

定位

相對定位

絕對定位

固定定位

粘性定位

定位的層級

定位可以越過padding

定位的特殊應用

特殊應用1

特殊應用2

版心

重置預設樣式

相關文章