CSS實用技巧

2021-09-12 18:00:44 字數 819 閱讀 5997

做豆瓣的時候模仿豆瓣的正在熱映的列表做的乙個樣式,效果及**如下

}最主要的就是要在在父元素設定white-space: nowrap;來保證子元素強制不換行

之前我們寫這樣的了能就是為子元素設定width:100%;height:100%;,其實也可以使用如下的寫法

.parent

}/*也就是說子元素不設定高度和寬度,通過absolute的屬性將子元素『撐開』到父元素的大小*/

/*如果我們設定了如left:20px; right:20px;那麼就相當於設定父元素padding:0 20px;子元素設定width:100%;*/

之前如果我們想要實現乙個這樣的效果,可能會使用浮動,現在可以考慮使用如下的寫法

ul}}

css預設情況下盒子的長度變化是由上向下的方向進行變化,寬度變化是由左向右,有時候需要實現盒子由底層彈出,或者盒子由右側向左彈出的效果,可以使用如下**,由右向左同理

.test
測試效果

$(".test").animate(, 2000)

CSS實用技巧

做豆瓣的時候模仿豆瓣的正在熱映的列表做的乙個樣式,效果及 如下 最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行 之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 parent 也就是說子元素不設定高度和寬...

CSS實用技巧

做豆瓣的時候模仿豆瓣的正在熱映的列表做的乙個樣式,效果及 如下 最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行 之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 parent 也就是說子元素不設定高度和寬...

CSS實用技巧01

01.div水平居中 div 水平居中很簡單,只需要設定div的寬頻以及讓左右margins設定成auto div container 02.文字垂直居中 單行文字居中,只需要將行高和容器高度設定成一樣即可。比如下面的html 我是一行字 然後通過下面的樣式就可以居中 div container如何...