塊級元素和行內(nèi)元素分別有哪些
- 塊級元素block-level: div琼蚯、h1/h2/h3.. p form ul ol
- 行內(nèi)元素inline-level:span button input em script label
塊級元素區(qū)別和行內(nèi)元素區(qū)別
| 塊級元素 | 行內(nèi)元素 |
|---|---|
| 可以包含塊級和行內(nèi)元素 | 包含文字和行內(nèi)元素 |
| 占據(jù)一整行的空間 | 占據(jù)自身寬度 |
| 可以設(shè)置margin padding | 行內(nèi)元素內(nèi)外邊距不生效 |
| width height只對塊級元素有效 | width睬涧、height 對行內(nèi)元素?zé)o效 |
css 屬性繼承（后續(xù)遇到了邊學(xué)習(xí)繼續(xù)總結(jié)）
css屬性繼承是指在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)，繼承是一種機(jī)制升筏，不僅可以用于某個特定的元素褂始，還可以用于它的后代元素
| 可繼承的屬性 | 不可繼承的屬性 |
|---|---|
| color | border |
| font(font-size、font-familye媒至、font-weight、line-height) | text-decoration |
| text-align | display |
| text-indent | background |
| text-transform | height |
| word-spacing | position |
| letter-spacing | float |
| list-style | min-height谷徙、max-height |
設(shè)置塊級元素和行內(nèi)元素居中
- 塊級元素拒啰，只要設(shè)置左右的margin 為auto，margin:0 auto; 既可達(dá)到居中
- 行內(nèi)元素完慧，設(shè)置text-algin :center; 即達(dá)到居中谋旦。
用 CSS 實現(xiàn)一個三角形
http://js.jirengu.com/rilo/13/edit?html,output
單行文本溢出加 ...如何實現(xiàn)?
需要三個屬性，white-space:nowrap; // 不折行
overflow:hidden; // 超出部分隱藏
text-overflow:ellipsis;變?yōu)?..
http://js.jirengu.com/rilo/13/edit?html,output
px, em, rem 有什么區(qū)別
- px:固定單位
- em: 相對單位骗随，相對于父元素字體大小
- rem:相對單位，相對于根元素html字體的大小
font-family
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',
sans-serif;
}
上述代碼：設(shè)置字體大小為12px,行高是1.5赴叹，\5b8b\4f53 是字體對應(yīng)的unicode 編碼鸿染，加引號是因為 字體名字有空格，不加引號會被當(dāng)成兩個元素乞巧。
代碼題：
1涨椒、http://js.jirengu.com/caha/1/edit
2、http://js.jirengu.com/paxox/1/edit
3绽媒、http://js.jirengu.com/tofad/1/edit
4蚕冬、http://js.jirengu.com/pahu/1/edit
5、http://js.jirengu.com/sixoz/3/edit
總結(jié)任務(wù)八中的css屬性
- font-size:字體大小
- font-family 字體（宋體是辕、微軟雅黑）
- font-weight 字體粗度（font-weight:bold囤热；粗體）
- line-height:行高（文字占據(jù)的垂直空間）
- text-decoration 不可繼承屬性，可以延伸到子屬性获三，但是標(biāo)簽a自帶下劃線旁蔼，所以必須單獨設(shè)置a標(biāo)簽來修改，不能直接通過 操作父元素來修改a標(biāo)簽疙教。
- text-align:left/right/center/justify/ 對齊方式,相對父元素的對齊方式棺聊，并不能控制塊級元素自己對齊，只能控制它的行內(nèi)文本內(nèi)容對齊贞谓；
- text-transform 可以設(shè)置文本全部大小或者全部小寫限佩，也可以設(shè)置單個的單詞（capitalize、uppercase、lowercase）
- text-indent:規(guī)定了首行文本內(nèi)容之前應(yīng)該有多少水平空格
- text-decoration:none/line-through/overline/
- rgb(255,255,255) 白色 red green blue 所占百分比祟同，255 為100%
rgba(0,0,0,0.5) 0.5是透明度作喘，從0-1，不能為負(fù)數(shù)耐亏，1是完全不透明 - box-shadow:以逗號分隔列表來描述一個或者多個陰影效果徊都，可以用到幾乎任何元素上，如果元素同時設(shè)置了border-radius,那么陰影也會有圓角效果
- border-collapse:用來決定表格的邊框是分開還是合并的广辰，collapse 使用合并的邊框繪制表格暇矫，separate 分開的邊框
- word-spacing 用于聲明標(biāo)簽和單詞直接的間距行為
- letter-spacing 明確了文字的間距行為
- list-style:屬性是設(shè)置list-style-type、list-style-image择吊、list-style-position 的簡寫屬性李根。list-style:none 去掉li前的點
- position 選擇定位元素的代替規(guī)則，
static 指定元素使用正常的布局行為几睛，即元素在文檔流中當(dāng)前的布局位置房轿，此時設(shè)置top，right所森，bottom囱持，left，z-index屬性無效
relative 元素先放置在未添加定位時的位置焕济，在不改變頁面布局的前提下調(diào)整元素位置纷妆，（因此會在此元素未添加定位時，所在位置留下的空白晴弃，）
absolute 不為元素預(yù)留空間掩幢，通過制定元素相對于最近的非static定位祖先元素的偏移
fixed不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置上鞠。元素的位置在屏幕滾動時不會改變际邻。
