国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css總結(jié)

eternalshallow / 1989人閱讀

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

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

單行本文

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元素在塊級(jí)元素中垂直居中,個(gè)人比較長(zhǎng)用的是5/6，以后要改過(guò)來(lái)才行，例：

固寬1：利用定位top/bottom,left/right都為0來(lái)設(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 = 父級(jí)width，若父級(jí)固定寬度，則子代設(shè)置的width無(wú)效，子代會(huì)撐滿父級(jí)寬度；

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

box-direction: normal/reverse

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

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

reverse 反序；

box-align: start/end/center/stretch

子代的垂直對(duì)齊方式；

start 垂直頂部對(duì)齊；

end 垂直底部對(duì)齊；

center 垂直居中對(duì)齊；

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

box-pack: start/end/center

子代的水平對(duì)齊方式；

start 水平左對(duì)齊；

end 水平右對(duì)齊；

center 水平居中對(duì)齊；

子元素設(shè)置：

box-flex: number;

占父級(jí)元素寬度的number份；

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112744.html

相關(guān)文章

  • css面試總結(jié)

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

    SKYZACK 評(píng)論0 收藏0

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

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

    王巖威 評(píng)論0 收藏0

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

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

    liukai90 評(píng)論0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 評(píng)論0 收藏0

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

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

    ralap 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<