css中應該滾瓜爛熟的屬性

pekonchan 發布于2019-08-28 18:09 / 3451人閱讀

摘要：設置盒子的內邊距內邊距也是透明的。邊框必須要設置類型，否則將無效。設置盒子的浮動，浮動是絕對定位的一種，其占位空間將消失。和通常都是和一起使用的。那兩個偽類的絕對定位，由非常強大的威力，很多地方都可以用。比如微信的小紅點消息通知。

Text

color 設置text的顏色

text-align 設置text的對齊

text-decoration 設置text的下劃線

text-transformation 設置字母的大小寫和單詞的首字母大寫

line-height 設置行高

letter-spacing 設置字符間的距離

Font

font-family 設置字體

font-size 設置字體的大小

font-style 設置字體為斜體還是正常顯示

font-weight 加粗字體

Background

background-color 設置背景的顏色

background-image 設置背景圖片

background-repeat 設置背景圖片的重復方式

background-position 設置背景圖片的位置默認為top left

Lists

list-style-type 設置list的類型，有circle等值

box-model

margin 設置盒子的外邊距外邊距是透明的。

padding 設置盒子的內邊距內邊距也是透明的。

border 設置盒子的邊框，邊框為不透明的。note：邊框必須要設置類型，否則將無效。

float 設置盒子的浮動，浮動是絕對定位的一種，其占位空間將消失。

clear 清除盒子的浮動，清除封裝的那個盒子的浮動。

position and :after / :before

:after 和 :before 通常都是和position一起使用的。position分為絕對定位和相對定位，相對定位的空間還在，絕對定位的空間就不在了。那兩個偽類＋ position的絕對定位，由非常強大的威力，很多地方都可以用。比如微信的小紅點消息通知。

CSS3

border-radius css3支持設置圓角
-webkit-border-radius 支持webkit的瀏覽器
-moz-border-radius: 支持moz的瀏覽器
Syntax:提供一個半徑即可。

box-shadow css3支持設置陰影
-webkit-box-shadow
-moz-box-shadow
Syntax-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

text-shadow css3 支持設置text陰影
Syntax-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Multiple Backgrounds css3的背景圖支持多張背景圖

** background-size** css3支持背景的尺寸

text-overflow css3 支持對超出邊界的文字的處理
Syntax:
text-overflow: clip|ellipsis|string|initial|inherit;

Flexible Box Model

transform 分為2d和3d 主要包括縮放、平移和旋轉。

未完待續......

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

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

[ 學習路線 ] 2015 前端(JS)工程師必知必會 (2)

摘要：轉自前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下上次我寫前端工程師必知必會已經是三年前了，那是我寫過最火的文章了。測試的第二大障礙是工具。轉自：前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下........ 上次我寫《前端工程師必知必會》已經是三年前了，那是我寫過最火的文章了。三年了，我仍然會在Twitter上...

stefan 2019-08-28 18:10 評論0 收藏0
[ 學習路線 ] 2015 前端(JS)工程師必知必會 (2)

摘要：轉自前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下上次我寫前端工程師必知必會已經是三年前了，那是我寫過最火的文章了。測試的第二大障礙是工具。轉自：前端外刊評論非常感謝，翻譯的很好，受益很多，轉到此處讓前端小伙伴們也驚呆下........ 上次我寫《前端工程師必知必會》已經是三年前了，那是我寫過最火的文章了。三年了，我仍然會在Twitter上...

liaorio 2019-08-21 10:30 評論0 收藏0
Symfony2中創建數據模型

摘要：今天我在這里給大家分享一下在中如何創建數據模型和基于的搭建。對象與數據庫的關系通常在電腦的世界里創建的數據模型會轉換為數據庫里的一條條記錄。 Symfony是一款優秀的基于MVC架構的PHP框架。今天我在這里給大家分享一下在Symfony中如何創建數據模型和基于RESTful api的搭建。重點是如何創建數據模型哦！本教程使用的當前Symfony的LTS版本(Symfony 2.8...

rainyang 2019-06-27 14:45 評論0 收藏0
26自學轉行前端（寫給和1年前一樣迷茫的我的你）

摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。轉行前端有哪些疑慮？在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

番茄西紅柿 2019-08-30 15:54 評論0 收藏2637
26自學轉行前端（寫給和1年前一樣迷茫的我的你）

摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。轉行前端有哪些疑慮？在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

番茄西紅柿 2019-08-22 18:26 評論0 收藏2577