css字體樣式程式碼大全:css常用樣式字典-字體教程免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 字體教程
  3. css常用樣式字典

css常用樣式字典

作者: 道格資源 • • 字體教程 • 瀏覽量 1050

css3中-moz -、-ms、-webkit , -o分別代表的意思，以及微信瀏覽器內核分析

  • //-ms “ie”內核識別碼
  • // -moz “firefox”核心識別碼
  • //-webkit “Chrome/safari”核心識別碼
  • //-o“opera 歐朋”核心識別碼

為什麼要加識別碼：

在標準還未確定時，部分瀏覽器已經根據最初起草案實現了部分功能，為了與之後確定下來的標準進行兼容，所以每種瀏覽器使用了自己的私有前綴與標準進行區分，當標準確立後，各大瀏覽器將逐步支援不含前綴的css3新屬性。

微信的瀏覽器內核：

IOS版的微信都是採用webkit內核，包括Android版本的X5內核，是以webkit內核但是有些兼容問題，例如不制止flex這些

css3中的calc（）使用

動態計算長度值。

要特別注意一點：在calc函數裡面運算子兩側必須各保留一個空格，否則函數會報錯。 

.box { width: 1920px;/*寫給不支援calc()的瀏覽器*/ width:-moz-calc(100% -20px); width:-webkit-calc(100% - 20px); width: calc(100% - 20px); margin: 0 calc(50% - 960px); //大圖只顯示中間區域}

transparent

這個屬性用來指定全透明色彩，類似rgba（0，0，0，0）。

css實作單行、多行文字溢出顯示省略號（…）

-->css單行文字溢出顯示display:block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
-->css多行文字溢位顯示display: block;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;//這裡寫多行數字-webkit-box-orient: vertical;
< pre>-->jquery 超出部分...顯示(function () {// 教師介紹-超出部分省略號var teachersContent="這個世界總有美好與不美好，既然生而為人，請積極向上，請善良！";var text;teachersContent.each(function (index, item) { text = $(item).html(); if (text.length > 10) { $(item).html(text. substr(0, 10) + '…'); } }); })();

偽元素

我特別喜歡偽元素的使用。就我用到的部分愚見記錄～

偽元素可以不改變html結構而幫助達到某些css的效果，這對項目來說是錦上添花的存在。

  • li本身所帶有的原點的顏色是修改不了的，但是需求又要求原點和文字保持相同色彩。

html code

<!-- li自身圓點的顏色是修改不了的--><ul class="c-defind-liststyle"> <li>Coffee</li>< li>Tea</li><li>Milk</li></ul>

css code

.c-defind-liststyle li { list-style: none; position: relative;}.c-defind-liststyle li::before { content: ""; display: inline-block; width: 5px ; height: 5px; background: #ccc; border-radius: 50%; position: absolute; top: -4px; left: -14px;}

::selection 選擇器的使用

需求：選取文字後的顏色和背景，需要變成背景紅色，字體藍色。

p::selection,textarea::selection{ color: blue; background: red;}::-moz-selection{ color: blue; background: red;}::selection選擇器匹配被使用者選取的選取是部分。只能在::selection 選擇器上套用少量css屬性：color、background、cursor以及outline

行動端填充滿屏

<style> .mask-pop::before{ content:" "; position:absolute; left:0; right:0; top:0; bottom:0; background -color:rgba（0,0,0,0.6）;/* 顏色自訂*/ z-index:-10; }</style><body> <div class="mask-pop">蒙版上的內容</div></body>

找個時間，好好研究偽元素，磨刀不誤砍柴工。

實例-->常用偽元素的使用code：如選取的狀態：.header-link a.active::after,.header-link a:hover::after { content: ''; width: 24px; height: 4px; background-color: #005BAC; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px;}

手機H5頁面在瀏覽器上滑，網址搜尋列會消失。 
解決方案如下：
html,body { height:100%; overflow-y:auto;}
css中有空白的間隙
有時候某些元素直接會有我們不知道的某名奇妙的空白元素，這非常不好控制。我們在他們的父元素設定 font-size：0；就可以解決了。
在行動裝置上的時候，水平滑動效果。 
場景：分類需要水平可滑動 / h5 頁面某些版塊如表格，需要水平滑動 / 豆瓣影片排版
<ul> <li> <a>分類1</a> </li> ......</ul> ul { white-space: nowrap; /*重點：父元素定義可以水平滾動*/ overflow-x: auto; list-style: none; padding: 0; }ul li { /* 子元素寬高隨意*/ margin-left: 20px; width: 100px; height : 100px; display: inline-block; vertical-align: top; text-align: center;}
雪碧圖的多倍圖使用定位
 background-image: url(../../icons.jpg); background-repeat: no-repeat; background-size: 50px; //如icons.jpg寬度100px，圖示大小為2倍圖，就設為50px background-position: 0 -100px 或center 或top center
不定寬高的div水平、垂直局中
實現最佳：transform進行元素偏移。
<body> <style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba( 0,0,0,0.7); position:relative; } #content{ position:absolute; background:pink; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); } </style> <div id="box"> <div id="content">div被其中的內容撐起寬高</div> </div> </body>
程式碼最簡單：
<body> <style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; background:rgba( 0,0,0,0.7); display:flex; justify-content:center; align-items:center; } #content {width:50%; height:50%; background:pink; } </style> < ;div id="box"> <div id="content">div被其中的內容撐起寬高</div> </div> </body>
相容最佳：
<style> body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%;background:rgba(0,0, 0,0.7); position:relative;} #content { width:50%; height:50%; background:pink; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto ; } </style> <div id="box"> <div id="content">div被其中的內容撐起寬高</div> </div> 
多行文字垂直居中：
<style> .bg_box { width: 300px; height: 300px; margin-top: 20px; background-color: #BBBBBB} /*方法一*/ .span_box { display: table; } .words_span { display: table-cell; vertical-align: middle;} /*方法二*/ .p_box { line-height: 300px; } .words_p { display: inline-block; line-height: 20px; /*單獨給子元素設定行高，覆寫父級元素的行高*/ vertical-align: middle; /*基線居中對齊*/} </style> <div class="span_box bg_box"> <span class=" words_span"> 方法一：父元素使用display:table和子元素使用display:table-cell屬性來模擬表格，子元素設定vertical-align:middle即可垂直居中</span> </div> < div class="p_box bg_box"> <p class="words_p"> 方法二：對子元素設定display:inline-block屬性，使其轉換成行內塊元素，模擬成單行文字。父元素設定對應的height和line-height。對子元素設定vertical-align:middle屬性，使其基線對齊。新增line-height屬性，覆寫繼承自父元素的行高。缺點：文字的高度不能超過外部盒子的高度。 </p> </div> </body>

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/css-chang-yong-yang-shi-ci-dian.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu Volta 專欄作者
48 196
single-end

相關推薦