資訊專欄INFORMATION COLUMN
摘要：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。值描述內(nèi)聯(lián)塊級(jí)內(nèi)聯(lián)塊
先回顧昨日的內(nèi)容，昨天講了 w3c 的整個(gè)架構(gòu)，由結(jié)構(gòu)層>布局層>內(nèi)容層三部分組成，了解了 CSS 的三種引入方式，行間式最簡(jiǎn)單直接；內(nèi)聯(lián)式解耦合，可讀性強(qiáng)；外聯(lián)式適合團(tuán)隊(duì)高效開發(fā)，耦合性低，復(fù)用性強(qiáng)，了解了三種選擇器，并且 id 選擇器>類選擇器>標(biāo)簽選擇器>通配選擇器，還有通過多類名選擇器來操作標(biāo)簽。還有常用的長(zhǎng)度單位包括 px、cm、mm、em、vw、in，顏色屬性有 rgb、rgba 等，還有操作文本樣式的屬性調(diào)整字體大小，字體風(fēng)格，文本對(duì)齊，縮進(jìn)，字間距，詞間距等，其中 font 是綜合性描述：font: 風(fēng)格 大小/行高 字族（風(fēng)格可以省略），比如font: 100 normal 60px/200px STSong;最后講的就是 display，這是一個(gè)重點(diǎn)難點(diǎn)，display 目前只介紹了三個(gè)屬性值：inline：不支持寬高，寬高由文本內(nèi)容撐開，只能嵌套 inline 標(biāo)簽同行顯示；block：像 p 標(biāo)簽，h 標(biāo)簽的 display 屬性就是 block，支持所有的 css 樣式，默認(rèn)有寬高（自定義后取自定義值），能嵌套所有標(biāo)簽，異行顯示；inline-block：支持所有css 樣式，默認(rèn)沒有寬高（由內(nèi)容撐開（可以自定義寬高））不建議嵌套任意標(biāo)簽，同行顯示。
群組選擇器可以同時(shí)控制多個(gè)選擇器，語(yǔ)法：逗號(hào)分隔，控制多個(gè)
群組選擇器
001
002
003
子代選擇器用>連接
body > div {
color: red;
}
后代選擇器用空格連接
.sup .sub {
color: red;
}相鄰選擇器用+連接
.d1 + .d2 {
color: red;
}
兄弟選擇器用~連接
.d1 ~ .d3 {
color: red;
}
div.d#dd {
color: red;
}
.d1.d2.d3 {
color: red;
}| 選擇器 | 權(quán)重 |
|---|---|
| 通配 | 1 |
| 標(biāo)簽 | 10 |
| 類、屬性 | 100 |
| id | 1000 |
| !important | 10000 |
:before, :after {
content: "ctn";
}| 風(fēng)格 | 解釋 |
|---|---|
| solid | 實(shí)線 |
| dashed | 虛線 |
| dotted | 點(diǎn)狀線 |
| double | 雙實(shí)線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內(nèi)嵌效果線 |
| outset | 外凸效果線 |
| 值得個(gè)數(shù) | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
| 賦值個(gè)數(shù) | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
| 賦值個(gè)數(shù)(值類型：長(zhǎng)度 | 百分比) | 解釋 |
|---|---|
| 1 | 橫縱 |
| 2 | 橫 | 縱 |
| 賦值個(gè)數(shù)(值類型：長(zhǎng)度 | 百分比) | 解釋 |
|---|---|
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 | 右上 左下 |
| 3 | 左上 | 右上 左下 | 右下 |
| 4 | 左上 | 右上 | 右下 | 左下 |
| 格式 | 解釋 |
|---|---|
| 1 / 1 | 橫向 | 縱向 |
| 值 | 描述 |
|---|---|
| visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
| hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
| scroll | 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。 |
| 值 | 描述 |
|---|---|
| inline | 內(nèi)聯(lián) |
| block | 塊級(jí) |
| inline-block | 內(nèi)聯(lián)塊 |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1463.html
摘要：前端之常用標(biāo)簽的使用邊界圓角精靈圖以及盒模型的布局前端之常用標(biāo)簽的使用邊界圓角精靈圖以及盒模型的布局前言前言上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器后代子代選擇器兄弟相鄰選擇器及交集選擇器標(biāo)簽的四大偽類選擇器，，其中和也可以用于前端之常用標(biāo)簽的使用、邊界圓角、精靈圖以及盒模型的布局 前言 上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、后代（子代）選擇器、兄弟（相鄰選擇器）...
摘要：盒模型的簡(jiǎn)介本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。 1. 盒模型的簡(jiǎn)介 本文簡(jiǎn)單的總結(jié)了一些基本概念，知識(shí)點(diǎn)以及細(xì)節(jié)問題 作為前端人員，盒模型是最基礎(chǔ)的知識(shí)點(diǎn)，在排版與布局時(shí)不可避免與盒模型打交道。 在我們編寫HTML時(shí)，網(wǎng)頁(yè)上的內(nèi)容幾乎都是被包在一個(gè)個(gè)元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div...
摘要：比如表示上下左右都是像素塊元素居中的樣式，表示上下表示左右而表示上，左右，下。瀏覽器對(duì)塊元素的默認(rèn)樣式問題如下塊元素的盒模型樣式復(fù)合屬性寫法如果我們想給添加樣式，可以這樣寫為了精簡(jiǎn)代碼，也可以采用如下的復(fù)合屬性寫法 學(xué)習(xí) HTML 和 CSS 將近一個(gè)月，我以為：層級(jí)（嵌套）關(guān)系和盒模型（Box Model）是理解和學(xué)習(xí)這兩門語(yǔ)言的基石，正如圖層概念是 Photoshop 的基礎(chǔ)。因此...
摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲和...
摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲和...
閱讀 769·2023-04-25 19:43
閱讀 4022·2021-11-30 14:52
閱讀 3855·2021-11-30 14:52
閱讀 3909·2021-11-29 11:00
閱讀 3838·2021-11-29 11:00
閱讀 3949·2021-11-29 11:00
閱讀 3613·2021-11-29 11:00
閱讀 6310·2021-11-29 11:00
