亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css總結(jié)

eternalshallow / 2046人閱讀

摘要：平時比較常用的樣式和技巧商品價格文本中的一條線，例文本超出溢出顯示省略號，例單行本文不定行文本注意兼容性元素在塊級元素中垂直居中個人比較長用的是，以后要改過來才行，例固寬利用定位都為來設(shè)置不固寬利用表格中元素垂

平時比較常用的css樣式和技巧 1. 商品價格文本中的一條線，例： 
div {
  text-decoration: line-through;
}
2. 文本超出溢出顯示省略號，例：

單行本文

div {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

不定行文本 --- 注意兼容性

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
3. div元素在塊級元素中垂直居中,個人比較長用的是5/6，以后要改過來才行，例：

固寬1：利用定位top/bottom,left/right都為0來設(shè)置

不固寬2：利用表格中元素垂直居中

不固寬3：利用flex布局 --- 注意兼容性

不固寬4：利用box布局 --- 注意兼容性

固寬5：利用定位top:50%,margin-top: -width/2設(shè)置

不固寬6：利用transform --- 注意兼容性


  
sdfsdfsdf
4. input placeholder樣式修改： 
input::-webkit-input-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:-moz-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:-ms-input-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:disabled {
  -webkit-text-fill-color: rgba(0, 0, 0, 1);
  -webkit-opacity: 1;
  color: inherit;
  opacity: inherit;
}
5. box布局:

父元素設(shè)置： display: box;

box-orient: horizontal/vertical

子代按水平排列或豎直排列，注：所有主流瀏覽器不支持該屬性，必須加上前綴；

horizontal：水平排列，子代總width = 父級width，若父級固定寬度，則子代設(shè)置的width無效，子代會撐滿父級寬度；

vertical：垂直排列，子代總height = 父級height，若父級固定高度，則子代設(shè)置的height無效，子代會撐滿父級寬度；

box-direction: normal/reverse

確認(rèn)子代的排列順序；

normal 默認(rèn)值，子代按html順序排列；

reverse 反序；

box-align: start/end/center/stretch

子代的垂直對齊方式；

start 垂直頂部對齊；

end 垂直底部對齊；

center 垂直居中對齊；

stretch 拉伸子代的高度，與父級設(shè)置的高度一致。子代height無效；

box-pack: start/end/center

子代的水平對齊方式；

start 水平左對齊；

end 水平右對齊；

center 水平居中對齊；

子元素設(shè)置：

box-flex: number;

占父級元素寬度的number份；

若子元素設(shè)置固定寬度，則該子元素應(yīng)用固定寬度，其他未設(shè)置固定寬度的字元素將余下的父級寬度（父級-已設(shè)置固定寬度的子代元素的總寬度按 number占份數(shù)）；

若子元素有margin值，則按余下（父級寬度-子代固定總寬度-總margin值）寬度占number份；

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112744.html

相關(guān)文章

  • css面試總結(jié)

    摘要：兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。 CSS知識點整理瀏覽器兼容性問題解決方案 · 總結(jié) 行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式 在引用 CSS 上，分為四種形式：行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式，下面介紹這四種模式。 1.行內(nèi)樣式 直接對 HTML 的標(biāo)記使用 style 屬性，然后將 CSS 代碼直接寫進(jìn)去： 2....

    SKYZACK 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • CSS居中方法總結(jié)

    摘要：此時檢查元素即可即可實現(xiàn)內(nèi)層的實現(xiàn)了居中這種方式是最為我們熟知的，其缺點是需要設(shè)置子元素的寬度。交叉軸居中當(dāng)設(shè)置了屬性時，主軸的方向會改變。垂直居中實現(xiàn)方案用的屬性，以及定位，與上面的水平居中類似，只是改為即可。 水平居中實現(xiàn)方案 確定寬度的元素水平居中 1.我們可以通過給該元素的父級設(shè)置margin: 0 auto的方式來實現(xiàn)。HTML: ...

    ralap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<