資訊專欄INFORMATION COLUMN
摘要：盒子模型邊框，外邊距，內(nèi)部距，內(nèi)容，寬度。盒子模型和標(biāo)準(zhǔn)盒子模型行內(nèi)塊元素，元素呈現(xiàn)為具有相依特性元素不會(huì)被顯示。文字基線屬性設(shè)置元素中文本行高語(yǔ)法長(zhǎng)度值百分比瀏覽器有默認(rèn)的行高，不同瀏覽器默認(rèn)行高不一樣。
盒子模型：
border邊框，margin外邊距，padding內(nèi)部距，content內(nèi)容，width寬度。
高度：
height: 長(zhǎng)度值|百分比|auto
最大高度:
max-height: 長(zhǎng)度值|百分比|auto
最小高度:
min-height:長(zhǎng)度值|百分比|auto
邊框的屬性：
邊框?qū)挾龋篵order-width
邊框顏色：border-color
邊框樣式：border-style
邊框?qū)傩裕?/p>
border- left | right | top | bottom -width
border ... -color
border ... -style
content+padding = ie
doctype html 聲明
display屬性
inline顯示內(nèi)聯(lián)元素，元素前后沒有換行符
block顯示塊級(jí)元素，元素前后有換行符
內(nèi)聯(lián)元素使用width和height屬性有效。
inline-block行內(nèi)塊元素。
ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型
inline-block 行內(nèi)塊元素，元素呈現(xiàn)為inline,具有block相依特性,none元素不會(huì)被顯示。
css文本樣式：
text-align設(shè)置元素內(nèi)文本的水平對(duì)齊方式。
text-align:
left|right|center|justify
>
div{text-align:center;} div img src= / /div
文字基線：
line-height屬性
設(shè)置元素中文本行高
語(yǔ)法：
line-height:長(zhǎng)度值|百分比
瀏覽器有默認(rèn)的行高，不同瀏覽器默認(rèn)行高不一樣。
word-spacing 設(shè)置元素內(nèi)單詞之間的間距
letter-spacing 設(shè)置元素內(nèi)字母之間的間距
文字樣式：字體，font-family和font-size。
文字粗細(xì)：
font-weight:normal|bold|bolder|lighter|100到900
文字樣式：
font-style:normal|italic|oblique
水平對(duì)齊：
text-align: left|right|center|justify
背景，列表
背景圖片重復(fù)問題：
設(shè)置元素的背景圖片重復(fù)方式：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景圖片顯示方式：
設(shè)置元素的背景圖片的顯示方式：
background-attachment: scroll | fixed
scroll: 默認(rèn)值，背景圖片隨滾動(dòng)條滾動(dòng)
fixed:當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖片不會(huì)移動(dòng)
背景圖片定位：
設(shè)置元素的背景圖片的位置：
background-position:百分比|值|top|right|bottom|left|center
列表：
list-style-position: inside | outside
css中的float
float:left;
float:right;
float:none;
float:inherit;
浮動(dòng)變塊狀元素，浮動(dòng)能環(huán)繞效果。
定位css
標(biāo)準(zhǔn)流，定位，浮動(dòng)
浮動(dòng)的問題如何解決
手動(dòng)給父元素添加高度
通過clear清除內(nèi)部和外部浮動(dòng)
給父元素添加overfloat屬性并結(jié)合zoom:1使用
給父元素添加浮動(dòng)
css中的position
css背景與列表
css背景樣式
background-color:設(shè)置元素的背景顏色
background-image:把圖像設(shè)置為背景
background-position:設(shè)置背景圖像的起始位置
background-attachment:背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-repeat:設(shè)置背景圖像是否重復(fù)以及如何重復(fù)
background：背景屬性設(shè)置
css列表樣式
list-style-type:設(shè)置列表項(xiàng)標(biāo)志的類型
list-style-image:將圖像設(shè)置為列表項(xiàng)標(biāo)志
list-style-position:設(shè)置列表中列表項(xiàng)標(biāo)志的位置
list-style:簡(jiǎn)寫
背景樣式
設(shè)置背景顏色和背景圖片
背景顏色，設(shè)置元素的背景顏色
background-color:顏色 | transparent
背景圖片
設(shè)置元素的背景圖片
background-image: url | none
背景圖片重復(fù)
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景圖片顯示的方式
設(shè)置元素的背景圖片的顯示方式
background-attachment: scroll | fixed
scroll:隨著滾動(dòng)條滾動(dòng)，fixed:背景圖片不會(huì)移動(dòng)
背景圖片定位
background-position: 百分比 | 值 | top | right | bottom | left | center
background: background-color background-image background-repeat background-attachment background-postion
列表項(xiàng)，list-style-type:關(guān)鍵字 | none
list-style-image: url | none
list-style-position : inside | outside
list-style: list-style-type list-style-position list-style-image
div, ul, li, dl, dt, dd, img
html,css,javascript關(guān)系
html是網(wǎng)頁(yè)內(nèi)容的載體，css樣式是表現(xiàn)，javascript是行為。
css優(yōu)先級(jí)
行內(nèi)樣式 內(nèi)部 外部
css選擇器
標(biāo)簽選擇器，全局選擇器，類選擇器，群組選擇器，id選擇器，后代選擇器
群組選擇器
鏈接偽類
:link 未訪問
:visited 已經(jīng)訪問
:hover 鼠標(biāo)懸停
:active 激活
css繼承和層疊
從父元素那繼承部分css屬性
css層疊可以定義多個(gè)樣式
選擇器的權(quán)重
標(biāo)簽選擇器1
類和偽類10
id選擇器100
通配符0
行內(nèi)樣式1000
這種聲明高
id不要濫用，適當(dāng)使用class
css導(dǎo)入式@import 外部css樣式
盒子模型：
盒子模型概念，內(nèi)邊距設(shè)置，高和寬的設(shè)置，邊框的設(shè)置，外邊距設(shè)置，盒子的計(jì)算，元素顯示的方式。
border-width: thin | medium | thick
border-color: 顏色 | transparent
display: inline | block | inline-block | none
好了，歡迎在留言區(qū)留言，與大家分享你的經(jīng)驗(yàn)和心得。
感謝你學(xué)習(xí)今天的內(nèi)容，如果你覺得這篇文章對(duì)你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡(jiǎn)介
達(dá)叔，理工男，簡(jiǎn)書作者 全棧工程師，感性理性兼?zhèn)涞膶懽髡?，個(gè)人獨(dú)立開發(fā)者，我相信你也可以！閱讀他的文章，會(huì)上癮！，幫你成為更好的自己。長(zhǎng)按下方二維碼可關(guān)注，歡迎分享，置頂尤佳。
感謝！承蒙關(guān)照！您真誠(chéng)的贊賞是我前進(jìn)的最大動(dòng)力！
這是一個(gè)有質(zhì)量，有態(tài)度的公眾號(hào)
喜歡本文的朋友們
歡迎長(zhǎng)按下圖關(guān)注訂閱號(hào)
收看更多精彩內(nèi)容
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/800.html
摘要：用到什么了在多頁(yè)應(yīng)用架構(gòu)系列二配置常用部分有哪些里我就說(shuō)過，的核心只能打包文件，而以外的資源都是靠進(jìn)行轉(zhuǎn)換或做出相應(yīng)的處理的。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006897458如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault...
摘要：黑體本系列講解安全所需要的和黑體安全基礎(chǔ)我的第一個(gè)網(wǎng)頁(yè)黑體安全基礎(chǔ)初識(shí)黑體安全基礎(chǔ)初識(shí)標(biāo)簽黑體安全基礎(chǔ)文件夾管理網(wǎng)站黑體安全基礎(chǔ)模塊化黑體安全基礎(chǔ)嵌套列表黑體安全基礎(chǔ)標(biāo)簽拓展和屬性的使用黑體安全基礎(chǔ)嵌套本系列講解WEB安全所需要的HTML和CSS #WEB安全基礎(chǔ) : HTML/CSS | 0x0 我的第一個(gè)網(wǎng)頁(yè) #WEB安全基礎(chǔ) : HTML/CSS | 0x1初識(shí)CSS #WEB安全基...
摘要：寫在前面目前專注深入學(xué)習(xí)，特花了點(diǎn)時(shí)間整理了一些前端學(xué)習(xí)相關(guān)的書籍。大致分為以下大系列系列系列基礎(chǔ)系列應(yīng)用系列進(jìn)階系列類庫(kù)系列框架系列。這些書籍在這里免費(fèi)提供下載，有興趣的一起學(xué)習(xí)。 寫在前面 目前專注深入JavaScript學(xué)習(xí)，特花了點(diǎn)時(shí)間整理了一些前端學(xué)習(xí)相關(guān)的書籍。 大致分為以下7大系列：CSS系列、DOM系列、JavaScript基礎(chǔ)系列、JavaScript應(yīng)用系列、Ja...
摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...
摘要：引言盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。一什么是盒模型我們首先來(lái)看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁(yè)面布局中經(jīng)常會(huì)使用到的一種思維模型，將margin、border、padding、content等概念運(yùn)用日常生活中的盒子來(lái)形容，因此稱之為盒模型。 一、什么是...
閱讀 1538·2023-04-26 02:03
閱讀 4729·2021-11-22 13:53
閱讀 4632·2021-09-09 11:40
閱讀 3801·2021-09-09 09:34
閱讀 2136·2019-08-30 13:18
閱讀 3511·2019-08-30 11:25
閱讀 3305·2019-08-26 14:06
閱讀 2554·2019-08-26 13:52
