首頁 > web前端 > css教學 > 主體

深入了解css易混淆屬性和值的區別

高洛峰
發布: 2017-03-17 14:10:38
原創
1243 人瀏覽過

css的屬性很多,每個屬性的值也很多,組合起來便有成千上萬種。不同屬性之間的相互組合也可以產生不同的樣式,css真是一種優美的樣式設計語言。以下將工作中常見的易混淆的屬性和值進行總結:

1. line-height(行高) 帶單位與不帶單位的區別:

我們知道行高是可以繼承的。當父元素的行高值沒有帶上單位時,子元素使用自己的字體尺寸併計算出行高(子元素的行高=父元素中 line-height 的值 * 子元素的字體尺寸)。當父元素的行高值帶有單位時,父元素先根據自己的字體尺寸計算出行高(絕對單位px 時,無需計算),讓子元素繼承(子元素的行高=父元素的行高) 。

(1). 當父元素的行高值有單位:

<p>
    </p><p>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳,哈罗德的妻子)在做哈罗德该做的事,那么——“我是谁?”他就这样走过了邮局,连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。</p>
    <p>一路上我记起了很多东西,很多我都没有意识到自己忘了的回忆,有戴维的,还有你和我的。我还记起了我的母亲,有些回忆很不容易,但大部分都很美。我很害怕,我怕有一天,或许很快,我就会把他们弄丢,这一次永远都找不回来了。”哈罗德泪流满面.</p>
登入後複製

body { background-color: #efefef; }p {
    font-size: 12px;
    line-height: 1.5em;
}p { font-size: 22px; }
登入後複製

如上:當父元素的字體大小為12px,行高為1.5em,子元素的字體大小為22px 時,顯示效果如下:

深入了解css易混淆屬性和值的區別

上例中,p 的行高為18px,因為它繼承了父元素p 的行高1.5em = 12 * 1.5 = 18px; 而自己的字體大小為22px,所以就有被擠壓的效果。另外文字所佔的高度與 font-size 沒有直接任何關係,倒是文字所佔的寬度與 font-size 的值是一樣的。

(2). 當父元素的行高值沒有單位時:

#
<p>
    </p><p>你以为走路是世界上最简单的事呢?只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃,吃也是一样的。说话也是。还有爱。这些东西都可以很难。</p>
    <p>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路,是因为奎妮救了他,而他从来没有说过一句谢谢。</p>
登入後複製

body { background-color: #efefef; }p {
    font-size: 12px;
    line-height: 1.5;
}p { font-size: 22px; }
登入後複製

深入了解css易混淆屬性和值的區別

如上:當父元素的字體大小為12px,行高為1.5,子元素的字體大小為22px 時,顯示效果如下:

上例中,p 的行高為33px,因為它繼承了父元素p 的行高1.5, 而自己的字體大小為22px,所以自己的行高值就為22 * 1.5 = 33px,不會出現第一種情況下的被擠壓效果。

 

2. display(顯示方式)的值為inline-block,table,flex 的使用環境與差異:

(1). display: inline-block ;

當一個元素顯示方式為display: block; 時,不定義寬度和將寬度定義為:width: 100%; 或width: auto; 效果是一樣的,因為區塊級元素會繼承父元素的寬度值,依照100%(也就是和父元素一樣的寬度) 的值定義自己的寬度。但在實際專案中我們有時並非需要寬度為 100%,但又想要設定元素的 width, height(或 padding)等屬性。這時就需要用到display: inline-block;深入了解css易混淆屬性和值的區別

dom如下:

#

<p>
    </p><h3>成都王府井百货</h3>
    <p>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身,建筑面积约10万平方米,共计5层营业。</p>
    <p><a>查看详情</a></p>
登入後複製

##
.text > p {
    margin-top: 1.2rem;
    text-align: center;
}.text a.look-details {
    display: inline-block;
    padding: .5rem 1rem;
    font-size: .8rem;
    color: #fff;
    background-color: #e04728;
}
登入後複製

#對於上面的查看詳情鏈接,定義為了display: inline-block;  就可以不用設置寬度和高度,通過設置padding 來實現自己想要的高度和寬度的想法了。顯示效果如下:

並且,為其父元素設定 text-align: center;  可以達到水平居中的目的。

將元素設為 display: inline-block; 既含有 display: block; 又含有 display: inline; 的效果,可設定其高度,又能將其居中,還可以避免寬度為 100%。

深入了解css易混淆屬性和值的區別擴充功能:

父元素 text-align: center; 子元素 display: inline-block; 通常用於諸如新聞列表頁分頁效果。

登入後複製
             
  • «
  •     
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 5
  •     
  • »

.pagination {
    display: inline-block;
    text-align: center;
}.pagination:before,
.pagination:after {
    display: table;
    content: "";
}.pagination:after { clear: both; }.pagination {
    display: inline-block;
    text-align: center;
}.pagination > li {            
    float: left;
    display: inline-block;
}.pagination > li > a {
    display: block;
    margin-left: -1px; /*消除两个 a 在一起时引起的双倍左外边距*/
    padding: 6px 12px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}.pagination > li:first-child > a {
    margin-left: 0; /*第一个 a 不需要消除左外边距*/
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}.pagination > li:last-child > a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}.pagination > li > a:hover,
.pagination > li > a:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    z-index: 3;
    color: #fff;
    cursor: default; /*当前这一页,让鼠标悬浮在 a 元素上时,显示为默认光标样式,给人感觉不能点击的效果*/
    background-color: #337ab7;
    border-color: #337ab7;
}
登入後複製

 (2). display: table;

第一種情況的擴充中,已經用到了 display: table; 使用 display: table; 此元素會作為區塊級表格來顯示(類似),表格前後則有換行符。

常用在清除浮動的需求中。一個元素之所以需要清除浮動,是因為自身沒有定義高度,而子元素有浮動。

如上例的擴充中,ul.pagenation 沒有定義高度,而子元素又有浮動,所以它需要清除浮動。清除浮動的方式如下:#########
.parent-box:before,
.parent-box:after {
    display: table;
    content: ""; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
}.parent-box:after { clear: both; }
登入後複製
#########這種清除浮動的方式, ie8 不支援。如果需要支援ie6 - ie8,需要使用下面這種複雜一些的樣式(這樣的寫法暫時不理解):#########
.clearfix::after {
    clear: both;
    display: block;
    content: ” ”;
    height: 0;
    line-height: 0;
    visibility: hidden;
}.clearfix { zoom: 1; }
登入後複製
#########(3). display: flex;###

2009年,W3C 提出了一個新的方案----Flex佈局,可以簡單、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支持,這意味著,現在就能很安全地使用這項功能。

深入了解css易混淆屬性和值的區別

內容很多,但我們平常一般會用到的就三個屬性,display: flex; align-items: center; justify-content: center; 這三個屬性都是用在父元素中,display: flex; 定義子元素的佈局方式為彈性伸縮佈局,align-items: center; 使子元素垂直居中,justify-content: center; 使子元素水平居中。

以上是深入了解css易混淆屬性和值的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板