樣式重置
/*寫css之前必須進(jìn)行樣式重置*/
*{
margin:0;
padding:0;
}
盒子模型的傳參
margin:10px;//給一個(gè)參數(shù) 四個(gè)方向都會(huì)設(shè)置值
margin:10px 20px;//給兩個(gè)參數(shù) 第一個(gè)top,bottom 第二個(gè)right,left
margin:10px 20px 30px;//第一個(gè)top 第二個(gè)right,left 第三個(gè)bottom
margin:10px 20px 30px 40px;//top right bottom left
html標(biāo)簽分類
塊標(biāo)簽 ：獨(dú)占一行调违、能夠設(shè)置width，height
div岛抄、h1~h6礁遵、p苗膝、ul标捺、li牌芋、dl、dt掰读、dd
內(nèi)聯(lián)標(biāo)簽 :并排顯示、不能設(shè)置寬和高叭莫、不能設(shè)置margin-top與margin-bottom
a蹈集、span、em雇初、strong
內(nèi)聯(lián)塊：并排顯示拢肆、能夠設(shè)置width、height
img靖诗、input郭怪、button
標(biāo)簽分類的原理
div{
diaplay:block;//底層屬性，寫不寫都有
}
span{
display:inline;//底層屬性刊橘，寫不寫都有
}
img{
width:100px;
margin-left:inline-block;//底層屬性鄙才，寫不寫都有
}
標(biāo)簽之間的display屬性是可以相互轉(zhuǎn)換的
水平居中
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
1.改變?cè)刈陨淼膁isplay屬性 display:blcok; margin-left:auto; margin-right:auto;
2.給他爹text-align:centenr;
css選擇器
后代選擇器
.parent>p{
color:red;
}
選中全部的后代
.parent p{
background-color:green;
}
分組選擇器//以逗號(hào)隔開(kāi)
div,p,.one{
color:red;
}
偽類選擇器
p:hover{
background-color:#eee;
}
選擇器的優(yōu)先級(jí)排序
id>class>元素選擇器
選擇器的權(quán)重
嵌套的越深，權(quán)重越高
.child{
color:red;
}
.parent .child{
color:green;
}
*************************
<div class="parent">
<div class="child">hh</div>
</div>
背景
背景重復(fù)
background-repeat:no-repeat;
背景位置
background-position:center;
background:red url(***) no-repeat center;//顏色 圖片 重復(fù) 位置
文本
文本修飾
text-decoration:none;
文本縮進(jìn)
text-indent:40px;? ? //lorem可快速寫一段話
顏色
color:red/#fff/rgb(71,196,121)
字體
font-family:? ? //可設(shè)置多種字體促绵，以便瀏覽器不支持某種時(shí)有后補(bǔ)
font-style:italic;//斜體
font-weight:900;//字體寬度
列表
list-style:none;
css的繼承
子元素不設(shè)置width攒庵，它會(huì)繼承父元素的width（僅僅發(fā)生在塊元素之間）
父元素不設(shè)置height，它會(huì)繼承子元素的height（僅僅發(fā)生在塊元素之間）
