資訊專欄INFORMATION COLUMN
摘要：內容不會被修剪，會呈現在元素框之外。內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。值描述內聯塊級內聯塊
先回顧昨日的內容，昨天講了 w3c 的整個架構，由結構層>布局層>內容層三部分組成，了解了 CSS 的三種引入方式，行間式最簡單直接；內聯式解耦合，可讀性強；外聯式適合團隊高效開發，耦合性低，復用性強，了解了三種選擇器，并且 id 選擇器>類選擇器>標簽選擇器>通配選擇器，還有通過多類名選擇器來操作標簽。還有常用的長度單位包括 px、cm、mm、em、vw、in，顏色屬性有 rgb、rgba 等，還有操作文本樣式的屬性調整字體大小，字體風格，文本對齊，縮進，字間距，詞間距等，其中 font 是綜合性描述：font: 風格 大小/行高 字族（風格可以省略），比如font: 100 normal 60px/200px STSong;最后講的就是 display，這是一個重點難點，display 目前只介紹了三個屬性值：inline：不支持寬高，寬高由文本內容撐開，只能嵌套 inline 標簽同行顯示；block：像 p 標簽，h 標簽的 display 屬性就是 block，支持所有的 css 樣式，默認有寬高（自定義后取自定義值），能嵌套所有標簽，異行顯示；inline-block：支持所有css 樣式，默認沒有寬高（由內容撐開（可以自定義寬高））不建議嵌套任意標簽，同行顯示。
群組選擇器可以同時控制多個選擇器，語法：逗號分隔，控制多個
群組選擇器
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;
}| 選擇器 | 權重 |
|---|---|
| 通配 | 1 |
| 標簽 | 10 |
| 類、屬性 | 100 |
| id | 1000 |
| !important | 10000 |
:before, :after {
content: "ctn";
}| 風格 | 解釋 |
|---|---|
| solid | 實線 |
| dashed | 虛線 |
| dotted | 點狀線 |
| double | 雙實線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內嵌效果線 |
| outset | 外凸效果線 |
| 值得個數 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
| 賦值個數 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
| 賦值個數(值類型：長度 | 百分比) | 解釋 |
|---|---|
| 1 | 橫縱 |
| 2 | 橫 | 縱 |
| 賦值個數(值類型：長度 | 百分比) | 解釋 |
|---|---|
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 | 右上 左下 |
| 3 | 左上 | 右上 左下 | 右下 |
| 4 | 左上 | 右上 | 右下 | 左下 |
| 格式 | 解釋 |
|---|---|
| 1 / 1 | 橫向 | 縱向 |
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
| 值 | 描述 |
|---|---|
| inline | 內聯 |
| block | 塊級 |
| inline-block | 內聯塊 |
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1463.html
摘要：前端之常用標簽的使用邊界圓角精靈圖以及盒模型的布局前端之常用標簽的使用邊界圓角精靈圖以及盒模型的布局前言前言上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器后代子代選擇器兄弟相鄰選擇器及交集選擇器標簽的四大偽類選擇器，，其中和也可以用于前端之常用標簽的使用、邊界圓角、精靈圖以及盒模型的布局 前言 上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、后代（子代）選擇器、兄弟（相鄰選擇器）...
摘要：比如表示上下左右都是像素塊元素居中的樣式，表示上下表示左右而表示上，左右，下。瀏覽器對塊元素的默認樣式問題如下塊元素的盒模型樣式復合屬性寫法如果我們想給添加樣式，可以這樣寫為了精簡代碼，也可以采用如下的復合屬性寫法 學習 HTML 和 CSS 將近一個月，我以為：層級（嵌套）關系和盒模型（Box Model）是理解和學習這兩門語言的基石，正如圖層概念是 Photoshop 的基礎。因此...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
