常用css樣式總結

2021-09-10 03:33:49 字數 3272 閱讀 9138

1.超出顯示省略號

.title 

// 超出兩行顯示...

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

2.內容局左居中對齊

.tip 

.content

.status-tip,

.remark-tip

="tip"

>

="content"

>

="status-tip"

>

提交結果:審核成功

<

/div>

="remark-tip"

>

備註:test

3.超出可以滾動,但不顯示滾動條

overflow-x: scroll;

white-space: nowrap;

&::-webkit-scrollbar

4.flex布局

// flex-direction決定主軸的方向

flex-direction: row | row-reverse | column | column-reverse;

// flex-wrap 是否換行

flex-wrap: nowrap | wrap | wrap-reverse;

// flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap

flex-flow:

||;// justify-content屬性定義了專案在主軸上的對齊方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

// align-items屬性定義專案在交叉軸上如何對齊。

align-items: flex-start | flex-end | center | baseline | stretch;

修改placeholder顏色

input:

:-webkit-input-placeholder

textarea:

:-webkit-input-placeholder

6.不換行等分

// 不換行等分,盒子之間的間距可變,盒子的數量可變

.container

.box

.box +

.box

="container"

>

="box"

>

box1

<

/div>

="box"

>

box2

<

/div>

="box"

>

box3

<

/div>

="box"

>

box4

<

/div>

="box"

>

box5

<

/div>

<

/div>7.三等分

// 不換行的三等分

.container

.box

="container"

>

="box"

>

box1

<

/div>

="box"

>

box2

<

/div>

="box"

>

box3

<

/div>

<

/div>

// 換行的三等分

.container

.container:

:after

.box

="container"

>

="box"

>

box1

<

/div>

="box"

>

box2

<

/div>

="box"

>

box3

<

/div>

="box"

>

box4

<

/div>

="box"

>

box5

<

/div>

<

/div>8.textarea去掉右側滾動條,去掉右下角拖拽

overflow:hidden;

resize:none;

9.強制換行

word-

break

:break

-all;

/*支援ie,chrome,ff不支援*/

word-wrap:

break

-word;

/*支援ie,chrome,ff*/

10.清除input預設樣式

11.修改antd placeholder顏色

.ant-input::-webkit-input-placeholder,

.ant-time-picker-input::-webkit-input-placeholder

.ant-input:-moz-placeholder,

.ant-time-picker-input:-moz-placeholder

.ant-input:-ms-input-placeholder,

.ant-time-picker-input:-ms-input-placeholder

.ant-select-selection__placeholder

css常用樣式屬性總結

在css樣式表中,常用樣式屬性 文字屬性 說 明 font size 字型大小 font family 字型型別 font style 字型樣式 color 設定或檢索文字的顏色 text align 文字對齊 背景屬性 說 明 background color 設定背景顏色 background ...

總結css常用的樣式

會持續更新 1 強制文字換行 div2 input更改placeholder顏色 webkit browsers input webkit input placeholder mozilla firefox 4 to 18 input moz placeholder mozilla firefox ...

CSS常用文字樣式總結

css文字樣式是相對於內容進行的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更加重要。有些人對文字和字型樣式之間的不同不太了解,簡單地講,文字是內容,而字型則用於顯示這個內容。本文將詳細介紹文字相關樣式。首行縮排 定義首行縮排是將段落的第一行縮排,這是常用的文字格式化效果。一般地...