資訊專欄INFORMATION COLUMN
摘要：選擇器權(quán)重值選擇器在選擇的時候是從后往前選擇的，不是從前往后。內(nèi)聯(lián)權(quán)重值常用的幾個樣式表示通配符，所有標簽都使用。
css的寫法
1.內(nèi)聯(lián)樣式:樣式直接寫在標簽里面。
2.內(nèi)部樣式：樣式寫在
嘎嘎的樣式會重疊，藍色字體，綠色背景，這樣實現(xiàn)多樣化，沒有多id選擇器，盡量使用類選擇器。
h1
p
h1，p全是淺藍色
h1
p
h1是淺藍色,選中了同時滿足既是h1標簽又是ff類的。3.id選擇器 權(quán)重值100
css選擇器在選擇的時候是從后往前選擇的，不是從前往后。比如DIV他是先找id是div的，再看他是不是div標簽，css中id是唯一的，這里多判斷了一次，多此一舉。4.分組選擇器（用，分隔 表示同時選中不同的選擇器）
5.后代選擇器（用空格表示 誰的后代）
6.子代選擇器（用>表示 ）#div h1{ background: blue; }h1,h11全是藍色。 只想讓兒子h1是藍色 #div1 > h1{ background: blue; }h1
h11
h1是藍色。h1
h11
7.偽類選擇器
#div2:hover{ background: red; }div2鼠標劃到div2上背景變成紅色，IE6只支持給加hover #ul1 li:first-child{ background: red; }item1背景是紅色。 #ul1 li:nth-child(2) } 表示第二個列表項是紅色 #ul1 li:nth-child(2n) } 表示偶數(shù)項列表項是紅色 #ul1 li:nth-child(2n+1) } 表示奇數(shù)項列表項是紅色 #div3 h1:nth-child(1){ color: red; }
- item1
- item2
h1是紅色 #div3 p:nth-child(1){ color: red; }h1
pppppp
h1h1h1h1
h1
pppppp
h1h1h1h1
都沒有變化，nth-child（1）和前面什么標簽沒有關(guān)系，就表示第一個孩子。想要和標簽類型與關(guān)要使用nth-of-type(1)
#div3 p:nth-of-type(1){ color: red; }pppppp是紅色h1
pppppp
h1h1h1h1
8.偽對象選擇器
#p1{ height: 200px; width: 100px; background: #ccc; } #p1；first-line{ color: red; }哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
顯示出來的每一行不一點就是代碼中寫的字數(shù)，加了偽對象選擇器，第一行哈哈哈。。。是紅色。偽類 偽對象區(qū)別？
偽類的對象是真實存在的，想給她設(shè)置樣式的時候直接選中。 偽對象的對象是不存在的，相當于瀏覽器選中的一行哈哈哈，給它加了一個隱式的元素，對這個元素設(shè)置樣式。內(nèi)聯(lián)權(quán)重值 1000
常用的幾個css樣式*表示通配符，所有標簽都使用。
rgba( , , , )最后一個值是透明度 0-1 值越小越透明
opacity的值是會繼承的，解決辦法1：把兩個div設(shè)置成兄弟，不是父子。解決方法2：使用rgba()。把background的屬性寫在一行 background： url（"1.jpg") no-repeat rgba(80,80,80,0.5);
#div1{ width: 200px; height: 200px; background: #ccc; text-align: center; line-height: 200px; }哈哈哈哈會水平垂直居中在灰色框中，但是line-height=height只能設(shè)置單行文本。 #div1{ height: 150px; width: 150px; background: #ccc; display: table; } #div2{ display: table-cell; vertical-align: middle; }哈哈哈哈哈哈哈哈哈 或或或或或或或或或或或或或或 或或或或或或或或或或或或或或或或或或或
網(wǎng)頁中所有的元素都是框
行框：由內(nèi)容大小撐起來的。
display: block轉(zhuǎn)化成塊級元素。
塊框：垂直分布。
寬是自適應的，意思是占據(jù)父元素的剩余空間，高是內(nèi)容的高度。 可以設(shè)置寬高。 display: inline轉(zhuǎn)化成行級元素。 display: inline-block 元素水平排列并且可以設(shè)置寬高。
margin設(shè)置一個值：上 下 左 右
兩個值：上下 左右
三個值：上 左右 下
四個值：上 右 下 左
外邊距合并問題
#a, #b{
height: 100px;
width: 100px;
background: #f00;
}
#a{
margin-bottom: 50px;
}
#b{
margin-top: 30p取了較大值x;
}
a
b
兄弟關(guān)系，兩個紅框垂直分布，取了較大值，間距是50px。
#a, #b{
height: 100px;
width: 100px;
background: #f00;
}
#a{
width :200px;
height: 200px;
}
#b{
margin-top: 30px;
background: #0f0;
}
父子關(guān)系，父子會一起向下移動30px。
解決方法： 1.給父元素加邊框，設(shè)置邊框透明也會有陰影。
2.給父元素加下內(nèi)邊距，但是父元素會變寬，設(shè)置狂傲是給內(nèi)容設(shè)置。
3.給子元素加浮動 float: left;
4.給子元素加絕對定位：poosition: absolute;
5.給父元素加 overflow: hidden;
去掉在IE6下會生成怪異盒模型，設(shè)置的寬高包括內(nèi)容，padding,border.
box-sizing: content-box; 標準瀏覽器下
box-sizing: border-box; IE6瀏覽器下 寬高包括三部分。
定位
相對定位：相對于自己之前的位置
不釋放空間，后面的元素不會擠上來。
絕對定位：相對于最近已定位的祖先元素，不一定是父元素
會釋放空間，后面的元素會擠上來。
固定定位：相對于瀏覽器定位
釋放空間
塊級元素加了這個屬性之后，寬度不再是自適應，而是由內(nèi)容撐開。
浮動
#a，#b, #c{
width： 100px；
height： 100px；
}
#a{
background: red;
float: left:
}
#b{
background: green;
}
#
background: blue;
}
紅色會把綠色蓋住
如果全都向左浮動，三個快排列在左側(cè)，從左向右 紅 綠 藍
如果全都向右浮動，三個快排列在右側(cè)，從右向左 紅 綠 藍
float可以讓塊級元素橫過來，display：block也可以讓元素橫過來，兩者的區(qū)別？
display：block 塊之間會有間隙，float是緊貼著的。這個間隙是代碼中不同的div換行導致的。
inLine-block不會導致元素釋放空間。浮動會導致元素空間釋放，后面的擠上來。
不想讓某個元素浮動： clear: both;
元素塌陷問題
浮動導致元素塌陷問題
list-style: decimal數(shù)字
#ul1{
background: #ccc;
list-style: none;
}
#ul1 li{
background: #f00;
float: left;
}
#div1{
width: 136px;
height: 63px;
background: url("1.jpg") no-repeat -152px -402px #ccc; 數(shù)字是小塊圖片的左、上外邊距
}
性能優(yōu)化的一種方式
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113648.html
摘要：無論是否移動，元素仍然占據(jù)原來的空間。絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。 為啥讀這本書 現(xiàn)在前端圈子過于浮躁，掌握基礎(chǔ)無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘 當然，根本原因還是覺得自己掌握不好 開始總結(jié)吧~ 一. 基礎(chǔ)知識 經(jīng)過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...
摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點 A + B - 下一個兄弟節(jié)點 A...
摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任...
摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任...
閱讀 3606·2021-11-23 09:51
閱讀 2812·2021-11-23 09:51
閱讀 689·2021-10-11 10:59
閱讀 1685·2021-09-08 10:43
閱讀 3239·2021-09-08 09:36
閱讀 3301·2021-09-03 10:30
閱讀 3306·2021-08-21 14:08
閱讀 2212·2021-08-05 09:59
