css布局小結

2021-08-02 20:24:44 字數 1313 閱讀 1017

把還能記起來的,記錄下,方便後續使用

如下是常見的情景

情景一:

一行文字「內」夾雜了一些小的icon圖示,圖示在單行文字頭、尾的,方法(通用):

當圖示在單行「內」時,偽類就不好用了,頭、尾用偽類還行或者使用padding-left或padding-right來使用背景,

html:

情景一:單行文字內部有小圖示label>

class="text">我的是文字,class="icon">

i>中間是p>

情景二:單行文字頭、尾有小圖示label>

class="text">

class="icon">

i>我的是文字,中間是p>

情景二:單行文字頭、尾有小圖示label>

class="text">我的是文字,中間是class="icon">

i>

p>

情景三:單行文字頭、尾有小圖示label>

class="pseudotext">我的是文字,中間是p>

情景四:多行文字label>

class="mtext text multiline textarea">我的是文字,class="icon">

i>中間是我的是文字,中間是我的是文字,中間是我的是文字,class="icon">

i>中間是p>

css:

*

.multiline

.mtext

.textarea

.text, .pseudotext

.text

.icon

/*------如下是偽類的使用----*/

.pseudotext

.pseudotext

:after, .pseudotext

:before

.pseudotext

:after

.pseudotext

:before

情景二

省略號的使用,

單行文字省略號,多行文字省略號

多行文字,個人覺得使用js控制或者,做個透明的png加在後面用上面的方法,

html:

class="singlelinetxt jtextfield">這是單行文字這是單行文字這是單行文字這是單行文字p>
css:

*

.singlelinetxt

HTML CSS布局 常用css控制屬性 小結

好久沒有更新了,學習也一直停頓著。今天看到同學的一句部落格 你的高度決定你的視線,長得不高不是你的錯,但是站的不高就是你的錯了。rdquowww.cppcns.com 廢話少說,開始學習 這幾天一直在研究html css布局。並沒有把所有的布局都弄明白,只學了一點常用的css控制屬性 先上圖看看吧。...

grid布局小結

定義grid容器的方式 display grid 或者display inline grid 行內塊元素 容器屬性 舉例 container舉例 container舉例 舉例 container container containergrid template屬性是grid template col...

CSS布局入門 css

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位,通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...