overflow:hidden line-height clearfix:after使用方法介紹
發(fā)布時間:2013-01-08 16:07:43 作者:佚名
我要評論

overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來詳細(xì)介紹它們的用法,感興趣的朋友可以了解下哦
1.overflow:hidden的作用是隱藏溢出比如:
<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
當(dāng)ID=2的這個DIV高度設(shè)定的寬度超過了300px,那么超出的部分將自動被隱藏
2.line-height指的是在DIV中的元素上下居中
比如用在<li>里,則可以將line-height的高度和height的值相等,(height:30px; line-height:30px;)這樣可以讓文字在<li>內(nèi)相對于30px垂直居中。比如用在<p>內(nèi),像這樣成段落的,如果不加line-height,行與行之間距離會很近,若在<p>屬性內(nèi)加上line-height:22px;則每行之間的行距都是22px,會顯得不會太擁擠.3.clearfix:after清除浮動css內(nèi)容如下:
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}/*for ie6*/* html .clearfix {height: 1%;}/* for macIe*/
在html代碼如下:
<div style="border:2px solid red;" class="clearfix">這樣就可以實現(xiàn)清除浮動了
復(fù)制代碼
代碼如下:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
當(dāng)ID=2的這個DIV高度設(shè)定的寬度超過了300px,那么超出的部分將自動被隱藏
2.line-height指的是在DIV中的元素上下居中
比如用在<li>里,則可以將line-height的高度和height的值相等,(height:30px; line-height:30px;)這樣可以讓文字在<li>內(nèi)相對于30px垂直居中。比如用在<p>內(nèi),像這樣成段落的,如果不加line-height,行與行之間距離會很近,若在<p>屬性內(nèi)加上line-height:22px;則每行之間的行距都是22px,會顯得不會太擁擠.3.clearfix:after清除浮動css內(nèi)容如下:
復(fù)制代碼
代碼如下:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}/*for ie6*/* html .clearfix {height: 1%;}/* for macIe*/
在html代碼如下:
復(fù)制代碼
代碼如下:<div style="border:2px solid red;" class="clearfix">這樣就可以實現(xiàn)清除浮動了
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss之clearfix的用法深入理解(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2023-05-12
- 下面小編就為大家?guī)硪黄獪\談css清除浮動(clearfix 和clear)的用法,小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2023-05-12
- 這篇文章主要介紹了CSS中使用clearfix清除浮動的方法,作者列出了幾個clearfix的不同的使用方法進行對比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動解決外部div不能撐開問題
如果有一個DIV作為外部容器,內(nèi)部的DIV如果設(shè)置了float樣式,則外部的容器DIV因為內(nèi)部沒有clear,導(dǎo)致不能被撐開。使用clearfix:after,可以解決這個問題2014-06-16- 大家對css中clearfix并不陌生吧,它的作用就是清除浮動,下面對clearfix的定義及實現(xiàn)原理簡要的為大家做個介紹,另外還有個不錯的示例,喜歡的朋友不要錯過2013-11-05
css清除浮動clearfix:after的用法詳解(附完整代碼)
如果外部有一個div容器,其內(nèi)部div容器設(shè)置了float樣式,則外部的容器div因為內(nèi)部沒有clear,導(dǎo)致不能撐開2023-05-12- 有時候我們需要清楚浮動的一些操作,這里介紹的是clearfix:after的實例代碼,需要的朋友可以參考下2023-05-12
- 本文主要講解下css中的清除浮動的使用,在網(wǎng)頁布局中此屬性的作用不可小視,它的存在對你的布局好壞有所影響,感興趣的朋友可以參考下哈2013-04-26
什么是clearfix (一文搞清楚css清除浮動clearfix)
clearfix 是一種 CSS 技巧,可以在不添加新的 html 標(biāo)簽的前提下,解決讓父元素包含浮動的子元素的問題。這個技巧的版本是很多的,最流行的一個是 Micro Clearfix Hack2023-05-12