資訊專欄INFORMATION COLUMN
摘要：的個(gè)人理解一概念層疊樣式表，主要由屬性和屬性值組成。如何應(yīng)用內(nèi)聯(lián)樣式優(yōu)先級(jí)最高，但由于會(huì)造成代碼冗余及代碼更新任務(wù)龐大，一般不采用。聲明塊格式的丟失最易導(dǎo)致錯(cuò)誤。當(dāng)浮動(dòng)元素?zé)o法承載子元素的時(shí)候，子元素會(huì)在下一行顯示。浮動(dòng)元素的無(wú)法合并。
CSS的個(gè)人理解 一、概念
層疊樣式表，主要由屬性和屬性值（value）組成。（雖然HTML、CSS對(duì)代碼大小寫不敏感，但是屬性和屬性值對(duì)代碼大小寫是敏感的）
二、工作方式 1.工作原理由瀏覽器將CSS和html分別轉(zhuǎn)化為文檔對(duì)象，組合為DOM文檔對(duì)象模型，標(biāo)記語(yǔ)言中的每個(gè)元素、屬性、文字片段都是DOM樹中的一個(gè)節(jié)點(diǎn)，再由瀏覽器轉(zhuǎn)換顯示。
2.如何應(yīng)用 （1）內(nèi)聯(lián)樣式優(yōu)先級(jí)最高，但由于會(huì)造成代碼冗余及代碼更新任務(wù)龐大，一般不采用。
My CSS experiment
Hello World!
This is my first CSS example
（2）內(nèi)部樣式表
My CSS experiment
Hello World!
This is my first CSS example
（3）外部樣式表
多帶帶建立一個(gè).css文檔
易于代碼更新，減少代碼冗余。作為新手，這一點(diǎn)也是必須要做到的。
My CSS experiment
Hello World!
This is my first CSS example
三、語(yǔ)法內(nèi)容
1.css聲明
格式：“property : value”
屬性（property）與屬性值（value）單詞拼寫采用美式標(biāo)準(zhǔn)。
格式：“{property : value; property : value;}”
“;”的丟失最易導(dǎo)致錯(cuò)誤。
格式：“selector {property : value; property : value;}”
（1）層疊（cascade）元素選擇器 p
類選擇器 .class
ID選擇器 #id
通用選擇器 *
并且選擇器 p.class#id
并列選擇器 p,.class,#id
后代選擇器 parent son，使用空格分割兩個(gè)選擇器
子代選擇器 parent>son，使用>分割兩個(gè)選擇器
下一個(gè)兄弟選擇器 selector+selector，使用+分割兩個(gè)選擇器
之后所有兄弟選擇器 selector~selector，使用~分割兩個(gè)選擇器
selector[property]
selector[property=value]
selector[property*=value]
selector[property^=value]
selector[property$=value]
selector[property~=value]
子元素
:first-child
:nth-child()
:first-of-type
狀態(tài)
:hover
:active
(順序LVHA:link visited hover active)
:focus
::after 常用于清除浮動(dòng)
::before
::first-letter
::first-line
！important（改變了CSS方式，盡量繞開！）
放在一段style中（1000）
id（100）
.class或偽類或?qū)傩赃x擇器（10）
元素選擇器或偽元素選擇器（1）
后者覆蓋前者（按照順序）
這里不多敘述…………
4.布局 （1）正常布局流1）div行及元素
2）span塊級(jí)元素
float:left;
float:right;
clear:both;（清除左右浮動(dòng)，該元素會(huì)換行）
*塊級(jí)元素一旦浮動(dòng)之后:
1）脫離了當(dāng)前文檔流，對(duì)父級(jí)元素失去了支撐的作用，后面的非浮動(dòng)元素會(huì)插入到浮動(dòng)元素的下面。
2）浮動(dòng)元素的寬高默認(rèn)由其內(nèi)容所決定，但是我們可以為其指定寬高。
3）當(dāng)浮動(dòng)元素?zé)o法承載子元素的時(shí)候，子元素會(huì)在下一行顯示。
4）浮動(dòng)元素的margin無(wú)法合并。
*浮動(dòng)引發(fā)的問(wèn)題:
1）子元素浮動(dòng)會(huì)失去對(duì)父元素的支撐
解決方案：在所有子元素的末尾添加一個(gè)空元素，該空元素須clear:both;
2）如果為子元素的寬度指定絕對(duì)值，并且子元素具有邊框，在縮放瀏覽器的時(shí)候會(huì)錯(cuò)位
解決方案：
1.box-sizing:border-box;
2..right {margin-left:100px;}
（3）定位布局
1）靜態(tài)定位
2）相對(duì)定位
相對(duì)于該元素原先位置進(jìn)行移動(dòng)
relative: top right bottom left
3）絕對(duì)定位
相對(duì)于該元素最近的定位父元素位置進(jìn)行移動(dòng)
absolute: top right bottom left
4）固定定位
fixed（4）伸縮盒布局
display:flex;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115903.html
摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
摘要：從現(xiàn)在開始，養(yǎng)成寫技術(shù)博客的習(xí)慣，或許可以在你的職業(yè)生涯發(fā)揮著不可忽略的作用。如果想了解更多優(yōu)秀的前端資料，建議收藏下前端英文網(wǎng)站匯總這個(gè)網(wǎng)站，收錄了國(guó)外一些優(yōu)質(zhì)的博客及其視頻資料。 前言 寫文章是一個(gè)短期收益少，長(zhǎng)期收益很大的一件事情，人們總是高估短期收益，低估長(zhǎng)期收益。往往是很多人堅(jiān)持不下來(lái)，特別是寫文章的初期，剛寫完文章沒(méi)有人閱讀會(huì)有一種挫敗感，影響了后期創(chuàng)作。 從某種意義上說(shuō)，...
摘要：從現(xiàn)在開始，養(yǎng)成寫技術(shù)博客的習(xí)慣，或許可以在你的職業(yè)生涯發(fā)揮著不可忽略的作用。如果想了解更多優(yōu)秀的前端資料，建議收藏下前端英文網(wǎng)站匯總這個(gè)網(wǎng)站，收錄了國(guó)外一些優(yōu)質(zhì)的博客及其視頻資料。 前言 寫文章是一個(gè)短期收益少，長(zhǎng)期收益很大的一件事情，人們總是高估短期收益，低估長(zhǎng)期收益。往往是很多人堅(jiān)持不下來(lái)，特別是寫文章的初期，剛寫完文章沒(méi)有人閱讀會(huì)有一種挫敗感，影響了后期創(chuàng)作。 從某種意義上說(shuō)，...
閱讀 1672·2021-11-15 11:38
閱讀 4513·2021-09-22 15:33
閱讀 2331·2021-08-30 09:46
閱讀 2175·2019-08-30 15:43
閱讀 827·2019-08-30 14:16
閱讀 2068·2019-08-30 13:09
閱讀 1254·2019-08-30 11:25
閱讀 700·2019-08-29 16:42
