css3的瀏覽器私有屬性字首是乙個瀏覽器生產商經常使用的一種方式。它暗示該css屬性或規則尚未成為w3c標準的一部分。
chrome 、safiri 瀏覽器 ： -webkit-
firefox : -moz-
ie: -ms-
opera : -o-
先寫標準的css3屬性,在寫css3屬性
(1)毗鄰選擇 和兄弟選擇器
/* e1 + e2 毗鄰選擇器 e 代表元素 fun: 選擇所有符合條件的 ---》 和e1緊緊相鄰的e2元素 (下乙個兄弟)
p1 p3
*/.box + p
/* ~ 相鄰 e1 ~ e2 選擇所有符合條件的在e1後的所有相鄰e2元素 */
.box ~ p
"box" id="box">
我是p元素1
我是p元素2
"box">
我是p元素3
(3)結構偽類選擇器
背景屬性
/* 背景屬性 background:顏色 路徑 平鋪 位置 是否滾動 scroll(預設)/fixed 不滾動
(1)background-color:# red rgba()
(2)background-image:url()
(3)background-repeat: repeat / no-repeat
(4)background-position: left right top bottom left top / px px / % %
(5)background-attachment: scroll/fixed
*//* css3
1：多背景屬性 功能：插入多張背景 background-image:url(),url(),url();
background-origin:padding-box content-box border-box; [ˈɔːrɪdʒɪn]
3:背景尺寸
background-size: wpx hpx/ % % 以背景盒子作為參考 / cover /contain ;
cover:鋪滿 但是會顯示不完整
contain:完整顯示 但是會留白
4:背景裁剪區域 background-clip:padding-box content-box border-box;
5:背景漸變
*//* background-image: url("../images/01.gif"),url("../images/02.gif"),url("../images/03.gif");
background-repeat: no-repeat;
background-position: left top, right bottom , center center ; */
background-image
:url('../images/01.gif')
;background-repeat
: no-repeat;
/* 背景的尺寸---》適應 背景盒子大小 */
background-size
:cover;
background-origin
:content-box;
/* 溢位邊框的背景裁減掉 */
background-clip
:content-box;
}
(1)線性漸變
線性漸變屬性 banckground
:linear-gradient
(方向，顏色1 停止位置1 ,顏色2 停止位置2....)
方向： to left -90deg
to right +90deg
to bottom +180deg
to top 0deg
135deg 左上角到右下角
45deg 從左下角到右上角
background: repeating-linear-gradient(-45deg, red 10%,yellow 20%);
（2）徑向漸變
"bg">
"box">
box-sizing:border-box;//宣告新盒模型
box-sizing: content-box //宣告舊盒模型
盒模型 IE盒模型和W3C盒模型
w3c盒模型 可以看到得到的盒子寬度和高度是120 20 20 5 5 10 10 190px ie盒模型 可以看到得到的盒子寬度和高度是120 10 10 140px 其中的120 70 20 20 5 5。也就是設定的div寬度包括了內容內邊距和邊框的寬度。通過這兩對盒子進行對比可以清楚看到兩種...
IE 盒模型和W3C盒模型
在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...
W3C盒模型與IE盒模型
ss盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。w3c模型中 ...