css其他屬性
1.標(biāo)準(zhǔn)流
塊級 - 一個占一行齿风,默認(rèn)的寬度是父標(biāo)簽的寬度绿店,默認(rèn)的高度時內(nèi)容的高度轧邪,設(shè)置寬度和高度有效
行內(nèi) - 一行顯示多個叼耙,默認(rèn)的高度和寬度就是內(nèi)容的高度和寬度最易,設(shè)置寬度和高度無效
行內(nèi)塊 - 一行顯示多個怒坯,默認(rèn)的寬度和高度,就是內(nèi)容的寬度和高度耘纱,設(shè)置寬高有效
2.display:修改標(biāo)簽的類型
block
inline
inline-block
3.脫標(biāo)(脫流) - 浮動敬肚、定位
一行可以顯示多個,默認(rèn)的大小就是內(nèi)容的大小束析,設(shè)置寬高有效(標(biāo)簽之間沒有空隙)
4.浮動(float)
left - 左浮動
right - 有浮動
a.文字環(huán)繞
被環(huán)繞的標(biāo)簽浮動艳馒,作用于文字的標(biāo)簽不浮動
b。清除浮動 - 清除的是因為浮動而產(chǎn)生的塌陷問題
高度塌陷 - 父標(biāo)簽不浮動员寇,子標(biāo)簽浮動就會產(chǎn)生高度塌陷的問題
選中塌陷的標(biāo)簽{overflow:hidden}
5.定位
a.距離 - left弄慰、right、top蝶锋、bottom
b.設(shè)置參考對象 - position
initial/static - 默認(rèn)值陆爽,不定位
absolute - 絕對定位,相對于父標(biāo)簽定位(前提是父標(biāo)簽屬性值不是默認(rèn)值)
relative - 相對于自己定位(自己在標(biāo)準(zhǔn)流中的位置)
fixed - 相對于瀏覽器定位
sticky - 當(dāng)瀏覽器滾動相對于瀏覽器定位扳缕,不滾動就相對自己在標(biāo)準(zhǔn)流中的位置定位(適用于最后一個標(biāo)簽)
6.盒子模型
一個標(biāo)簽是由四個部分組成慌闭;content别威、padding、border驴剔、margin其中margin不可見
其他樣式
文字加粗
bolder(更粗的)/bold(加粗)/normal(常規(guī))100-900
font-weight:500;
文字樣式
italic/oblique - 切斜
normal - 常規(guī)的
font-style:normal;
水平對齊方式
left - 左對齊
right - 右對齊
center - 居中
text-align :center;
注意:這個屬性是針對標(biāo)簽的內(nèi)容(內(nèi)容可以是文字也可以是標(biāo)簽)
文字行高 - 設(shè)置一行文字的高度
一個標(biāo)簽中只有一行內(nèi)容的時候可以通過設(shè)置行高和標(biāo)簽的高度相同來讓內(nèi)容在垂直方向居中
line-height:330px;
文字裝飾器
none - 去掉裝飾器
underline - 添加下劃線
overline - 添加上劃線
line-throuht - 刪除線
text-decoration:underline;
首行縮進
text-indent:2em;
字間距
letter-spacing:10px
2.列表相關(guān)屬性
定義符號樣式
disc(實心圓)
circle(空心圓)
none(去掉)
list-style-type:circle;
定義符號圖片
list-style-image:url();
定義符號位置
outside
inside 有一定的距離
list-style-position:inside;
設(shè)置背景圖
background-image:url();
背景圖片是否平鋪
repeat(默認(rèn)的) - 當(dāng)背景圖片比標(biāo)簽小的時候省古,背景會重復(fù)渲染,知道將整個標(biāo)簽鋪滿為止
none - 不平鋪 背景圖片只顯示一次
background-repeat:no-repeat;
背景圖的位置
x坐標(biāo) - 數(shù)值/left/right/center
y坐標(biāo) - 數(shù)值/left/right/center
background-position-x:center;
background-position-y:center;
/===============通用=============/
{
/取消所有自帶的間距/
margin: 0;
padding: 0;
/所有的標(biāo)簽的子標(biāo)簽都相對于自己來定位/
position: relative;
}
a{
/取消所有a標(biāo)簽的下劃線/
text-decoration: none;
}
/垂直居中*/
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
/背景圖
background:圖片地址 是否平鋪 x坐標(biāo) y坐標(biāo) 背景顏色/
padding-left: 23px;
background: url(../img/q-icon.png) no-repeat 0px center rgba(0,0,0,0);
/focus - 成為焦點對應(yīng)的狀態(tài)/
content #login_div #div2 button:focus{
/*去掉outline*/
outline: 0;
color: rgb(215,36,50);