css總結

eternalshallow 發布于2019-08-29 13:50 / 1981人閱讀

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

平時比較常用的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來設置

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

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

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

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

不固寬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布局:

父元素設置： display: box;

box-orient: horizontal/vertical

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

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

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

box-direction: normal/reverse

確認子代的排列順序；

normal 默認值，子代按html順序排列；

reverse 反序；

box-align: start/end/center/stretch

子代的垂直對齊方式；

start 垂直頂部對齊；

end 垂直底部對齊；

center 垂直居中對齊；

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

box-pack: start/end/center

子代的水平對齊方式；

start 水平左對齊；

end 水平右對齊；

center 水平居中對齊；

子元素設置：

box-flex: number;

占父級元素寬度的number份；

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

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

云服務器 GPU云服務器年終總結網絡總結方法總結函數總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112744.html

css面試總結

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

SKYZACK 2019-08-29 18:34 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（三）

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

王巖威 2019-08-29 10:54 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（三）

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

liukai90 2019-08-19 18:32 評論0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS居中方法總結

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

ralap 2019-08-30 13:07 評論0 收藏0