css中的小技巧

2022-08-02 02:06:09 字數 3265 閱讀 7073

1.css實現文字單行居中，多行居左

效果圖：

<


style 


type


="text/css"


>


.fu.fu>p


style


>


<


div 


class


="fu"


>


<


p>文字單行居中，多行居左;


p>


<


p>文字單行居中，多行居左;子元素中，設定text-align:left;文字單行居中，多行居左;子元素中，設定text-align:left;


p>


div>
2.css實現文字兩端對齊

效果圖：

<


style 


type


="text/css"


>


.box


.box>p


style


>


<


div 


class


="box"


>


<


p>姓名


p>


<


p>手機號碼


p>


div>
3.實現文字豎向排版

效果圖：

<


style 


type


="text/css"


>


.fu.fu>p


style


>


<


div 


class


="fu"


>


<


p>文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定文字單行居中，多行居左;子元素中，設定


p>


div>
4.letter-spacing（字間距，新增每個字母或漢字之間的空白）和 word-spacing（詞間距，新增每個單詞之間的空白）

效果圖：

<


style 


type


="text/css"


>


.text-box


.text-box>p


.text-box>p:nth-child(1)


.text-box>p:nth-child(2)


.text-box>p:nth-child(3)


.text-box>p:nth-child(4)


style


>


<


div 


class


="text-box"


>


<


p>距海南島附近


p>


<


p>距海南島附近


p>


<


p>hello!


p>


<


p>wow, this is a wonderful world!


p>


div>
注意：1.字間距會將單詞拆分成字母;詞間距在漢字中不會生效。

2.字間距和詞間距都可賦負值，當值是負值時，當前的文字倒敘排列；

詞間距會縮小間距重疊。

5.使元素滑鼠事件失效：pointer-events：none；

6.cursor屬性：

<


style 


type


="text/css"


>


.curbox


style


>


<


div 


class


="curbox"


>


div>
7.text-transform和font variant

效果圖：

<


style 


type


="text/css"


>


.curbox


.curbox>p


.curbox>p:nth-child(1)


.curbox>p:nth-child(2)


.curbox>p:nth-child(3)


.curbox>p:nth-child(4)


style


>


<


div 


class


="curbox"


>


<


p>hello!this is a wonderful world!


p>


<


p>hello!


p>


<


p>hello!this is a wonderful world!


p>


<


p>hello!this is a wonderful world!


p>


div>
8.實現乙個三角形

效果圖：

<


style 


type


="text/css"


>


.san


.san1


.san2


style


>


<


div 


class


="san"


>


div>


<


div 


class


="san1"


>


div>


<


div 


class


="san2"


>


div>

HTML中CSS常用小技巧

1 簡述塊級元素在父元素的居中方法有哪些？父元素position 父元素相對定位，子元素絕對定位，子元素margin auto top 0 left 0 bottom 0 right 0 父元素相對定位，子元素絕對定位，子元素left 50 top 50 margin left 子元素一半的寬度 m...

常用的css小技巧

li first child li last child li nth child 4 width 200px word break break all text overflow ellipsis display webkit box 物件作為伸縮盒子模型顯示 webkit box orient ...

工作中實用的css小技巧

一 設定input 的placeholder的字型樣式 input webkit input placeholder input moz placeholder input ms input placeholder input moz placeholder 設定input聚焦時的樣式 input ...