css 知识总结
css引用的方式
- 內(nèi)聯(lián)方式：直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。
- 嵌入方式：在 HTML 頭部中的
<style>標(biāo)簽下書寫 CSS 代碼。 - 鏈接方式：使用 HTML 頭部的
<head>標(biāo)簽引入外部的 CSS 文件。
選擇器
- 類型選擇器：直接寫類型，例如：“h1”
- ID 選擇器：#
- 類選擇器：.
- 偽類：例如 button:hover {
- 偽元素，偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許你對(duì)被選擇元素的特定部分修改樣式。例如 a::after
- 后代選擇器 p div(中間是空格)
- 子選擇器 p > div
css 選擇器之間的空格和逗號(hào)的區(qū)別
-
當(dāng)兩個(gè)選擇器之間有空格的情況下，代表的是子類選擇器
.a .b{}
代表的是 a 類的 b 子類 -
而兩個(gè)選擇器之間沒有空格的情況下，代表的是同時(shí)擁有兩個(gè)類名的標(biāo)簽
<div class="a b"></div>
.a.b{} -
當(dāng)兩個(gè)選擇器之間是逗號(hào)的情況下，代表的是選擇了兩個(gè)類選擇器
<div class="a"></div>
<div class="b"></div>
.a,.b{}
-
vh :視圖相對(duì)高度(view height)
-
overflow: auto;可以讓中間部分在指定區(qū)域內(nèi)滑動(dòng)
-
css繪制三角形
具體思路是：div 本身的寬和高都設(shè)置為 0，靠四邊的寬度來繪制三角形
border-bottom 繪制紅色區(qū)域
border-left 繪制透明區(qū)域
思路參考博客使用 css 繪制一個(gè)三角形
.triangle {display: inline-block;width: 0;height: 0;border-bottom: 30px solid red;border-left: 20px solid transparent;position: absolute;right: 90px;
}
-
position: absolute;來控制 header 和 footer 固定不動(dòng) -
border-radius 設(shè)置時(shí)順序是左上，右上，右下，左下。
-
padding 和 margin 的區(qū)別：
margin 是指從自身邊框到另一個(gè)容器邊框之間的距離，就是容器外距離。
padding 是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，就是容器內(nèi)距離。 -
box-shadow: none;設(shè)置該盒子模型選中時(shí)不出現(xiàn)陰影（login 頁面使用）
-
輸入框最好設(shè)置一個(gè) padding，這樣可以讓輸入的文字不貼邊
-
justify-content: center; 項(xiàng)目位于容器的中心。
-
align-content 屬性在彈性容器內(nèi)的各項(xiàng)沒有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)（垂直）.
- 注意：容器內(nèi)必須有多行的項(xiàng)目，該屬性才能渲染出效果。
-
display:inline-block; 表示的是行內(nèi)塊狀元素
行內(nèi)塊狀元素的特點(diǎn)是：
既能夠設(shè)置寬高，又不獨(dú)自占據(jù)一行
（塊元素，如 div、p 等，默認(rèn)情況下能設(shè)置寬高，但獨(dú)自占據(jù)一行
行元素，如 span、strong 等，默認(rèn)能夠和其他行元素處于同一行，但是不能設(shè)置寬高） -
nav 標(biāo)簽：在傳統(tǒng) html5 以前版本 Html 布局中作為導(dǎo)航條相關(guān)常用命名來使用
<nav class="tabs"><ul><li class="tab-item tab-active">好文精選</li><li class="tab-item">熱門資訊</li></ul>
</nav>
-
ul：無序列表
-
ol：有序列表
-
li：解說列表項(xiàng)目，可用于無序列表和有序列表
-
main 標(biāo)簽
<main> 標(biāo)簽規(guī)定文檔的主要內(nèi)容。
<main> 元素中的內(nèi)容對(duì)于文檔來說應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。
注釋：在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。 -
a 標(biāo)簽
定義超鏈接
Baidul -
i 標(biāo)簽顯示斜體文本效果。
-
position 屬性：
absolute
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定。
fixed
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定。
relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
因此，“l(fā)eft:20” 會(huì)向元素的 LEFT 位置添加 20 像素。
static
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
-
box-sizing 屬性
允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
content-box這是由 CSS2.1 規(guī)定的寬度高度行為。
寬度和高度分別應(yīng)用到元素的內(nèi)容框。
在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box
為元素設(shè)定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。
通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
-
flex-direction 屬性
規(guī)定彈性項(xiàng)目的方向。
row,row-reverse,column,column-reverse -
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
-
white-space: nowrap;文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
-
display:block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
總結(jié)
- 上一篇： .md 文件的格式：写出好看的笔记
- 下一篇： js函数语法：ASCII 码的相互转换，