CSS經常使用屬性配置

時間 2019-12-10

標籤 css 經常使用屬性配置欄目 CSS 简体版

原文原文鏈接

1 寬和高　

　　　　width屬性能夠爲元素設置寬度。css

　　　　height屬性能夠爲元素設置高度。瀏覽器

　　　　max—height 屬性能夠跟着父標籤高度變化而變化性能

　　　　塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。字體

　　　注意：img標籤的顯示大小由width，height，max-width設置網站

2 字體屬性

　　　　文字顏色 colorurl

　　　　文字字體 font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。　　spa

　　　　body { font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif}code

　　　　font-family最後加上sans-serif，爲了保證可以調用這個字體族裏面的字體，由於大多數計算機裏都有這種字體。orm

　　　　文字大小　font-size 對象

　　　　文字粗細　font-weight

值	描述
normal	默認值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同於normal，而700等同於bold
inherit	繼承父元素字體的粗細值

3 顏色

　　　　css有文本顏色，背景顏色邊框顏色等屬性，屬性值可用下面幾種範式表達：　　　

　十六進制值 - 如: ＃FF0000
單詞表示： blue，red
一個RGB的值：（255.0.0）
rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間

4 文字屬性

　　　　文字對齊 text-align 屬性規定元素中的文本的水平對齊方式。

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊

文字裝飾 text-decoration 屬性用來給文字添加特殊效果

值	描述
none	默認。定義標準的文本。經常使用去掉a標籤默認的自劃線：
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

首行縮進 text-indent:

　　　　將段落的第一行縮進 32像素： p { text-indent: 32px;}

　5 背景屬性　　　

背景顏色	background-color: red;
背景圖片	background-image: url('1.jpg');
背景重複	repeat(默認):背景圖片平鋪排滿整個網頁 repeat-x：背景圖片只在水平方向上平鋪 repeat-y：背景圖片只在垂直方向上平鋪 no-repeat：背景圖片不平鋪例子： background-repeat: no-repeat;
背景位置	background-position: right top;

　　支持簡寫：background:#ffffff url('1.png') no-repeat right top;

　6 CSS盒子

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

語法一	簡寫	居中
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }	.margin-test { margin: 5px 10px 15px 20px; }	.mycenter { margin: 0 auto; }

　　　　簡寫順序：上右下左

　　　　補充padding的經常使用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序做用於四邊；

　　7 border 邊框

　　　　邊框屬性：border-width，border-style,border-color

　　　　簡寫：border: 2px solid red;

　　　　border-style屬性值：

none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。

　　　　除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

　　　　　　　　#i1 {
 　　　　 border-top-style:dotted;
  　　　　border-top-color: red;
  　　　　border-right-style:solid;
 　　　　 border-bottom-style:dotted;
  　　　　border-left-style:none;}

　　　　border-radius

　　　　用這個屬性能實現圓角邊框的效果。

　　　　將border-radius設置爲長或高的一半便可獲得一個圓形。

　　8 display屬性

　　　　用於控制HTML元素的顯示效果。

值	意義
display:"none"	HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block"	默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline"	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符
display:"inline-block"	使元素同時具備行內元素和塊級元素的特色。

　　9 float 浮動　　

　　　　在 CSS 中，任何元素均可以浮動。

　　　浮動元素會生成一個塊級框，而不論它自己是何種元素。

　　　　關於浮動的兩個特色：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣

屬性值： left：向左浮動 right：向右浮動 none：默認值，不浮動

　　　　清除浮動：clear屬性規定元素指定側不容許其餘浮動元素。若是有就移動到下一行

值	描述
left	在左側不容許浮動元素。
right	在右側不容許浮動元素。
both	在左右兩側均不容許浮動元素。
none	默認值。容許浮動元素出如今兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

　　　注意：clear屬性只會對自身起做用，而不會影響其餘元素。

　　　　　父標籤塌陷的解決辦法

　　　　　　浮動標籤的父標籤因爲再也不同一層次沒法感知到浮動標籤的高度寬度，而適應的調節。

　　　　　 .clearfix:after {content: "";display: block; clear: both;}

　　10 overflow溢出屬性

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。