css文字樣式及盒模型

1、文字樣式

3.1 color

文字顏色：

屬性值：三種色值表示法均可以使用

 

1 color: #B30000;  //十六進制表示法 2 color: rgb(255,0,0); //rgb() 3 color: red;      //單詞表示法

 

3.2 font-style

設置文字是否傾斜

默認值：normal（正常）

傾斜： oblique(普通傾斜)

傾斜： italic(使用，將有傾斜字體的英文進行替換)

1 .ob { 2  font-style: oblique; 3 } 4 .it { 5  font-style: italic; 6 }

 

 

 

3.3 font-weight

設置文字是否加粗

默認值： normal(正常) 500

加粗： bold   700

屬性值：100-900（沒有單位）

1 .f700 { 2  font-weight: 700; 3 }

 

3.4 font-size

字號：單位是px

工做中讀取設計師標註

如今須要本身手動測量。

粗略的測量：直接測量文字高度。

 

 

 

瀏覽器有最小字號，超過最小字號，默認顯示最小字號。（chrome最小字號12px）

 

 

3.5 line-height

行高：一行文字實際佔有的高度。

特色：文字在行高內垂直居中。

單位是px;

1 line-height: 200px;

 

 

 

 

單行文本垂直居中：盒子的高度和行高相同。

1 div.box1 { 2  width: 300px; 3  height: 100px; 4  font-size: 30px; 5  line-height: 100px; 6  7 }

 

 

百分數表示：%(表示和字號比值)

1 .box2 { 2  width: 400px; 3  height: 100px; 4  border: 1px solid #000; 5  font-size: 20px; 6  /*line-height: 100px;*/ 7  /*line-height是相對字號比值： 20 * 500% = 100px*/ 8  line-height: 500%; 9 }

 

3.6 font-family

字體。

通常咱們使用字體，使用計算機默認自帶字體，特殊的字體，計算上沒有，那麼不能正常渲染。

英文字體： Arial

中文： Microsoft Yahei,備用字體SimSun;

1 /*字體 先書寫英文字體，在書寫中文字體*/ 2 font-family: "Arial","Microsoft Yahei","SimSun";

 

font:是一個複合屬性，能夠書寫複合寫法。每個屬性用空格隔開。

屬性值能夠省略，表示默認值，至少要書寫字號，字體。

1 font: 是否傾斜 是否加粗 字號/行高 字體;  2 font: italic bold 30px/100px "Arial","Microsoft Yahei";

 

文本控制屬性：

3.7 text-indent

設置文本首行縮進。

單位是em。2em表示首行縮進2漢字

1 text-indent: 2em;

 

 

單位：百分數（相對父盒子寬度的比值）

1 ext-indent: 20%;

 

單位： px

1 text-indent: 100px;

 

3.8 text-align

設置文本水平左右居中。

屬性值：

默認值： left(靠左)

靠右（right）

居中（center）

1 text-align: center;

 

 

img:插入圖片（文本）

text-align: center; 設置文本居中（單行，多行）

1

 

 

3.9 text-decoration

文本是否設置下劃線

默認值（除了a標籤）：

沒有下劃線： none

下劃線： underline

1 text-decoration: none; 2 text-decoration: underline;

 

 

2、盒模型

4.1 概述

width: 盒子內容寬度

height: 盒子內容高度

border: 邊框

padding: 內邊距

margin: 外邊距

 

內容區域： 

內容寬 = width

內容高 = height

 

實際佔有區域： 

實際佔有寬度 = width + padding * 2 + border * 2

實際佔有高度 = height + padding * 2 + border * 2

 

計算：

實際寬 = 500 + 50 * 2 + 10 * 2 = 620px

實際高 = 300 + 50 * 2 + 10 * 2 = 420px

 

通常常常給出的是盒子佔有寬高，須要咱們計算出盒子的內容寬和高。

盒子內容寬 width  = 盒子實際寬度 - Padding * 2 - border * 2

盒子內容高 height  = 盒子實際高度 - Padding * 2 - border * 2

 

盒子寬度是500px,盒子高度是 300px，內邊距是50px，邊框是20px，計算盒子內容寬和高度

width = 500 - 50 * 2 - 20 * 2 = 360px

height = 300- 50* 2 - 20 *2 = 160px

 

 

背景（背景色和背景圖）渲染區域：邊框之內（padding區域能夠渲染背景）

 

1 background-image: url(images/star.gif);

 

 

4.2 padding

內邊距： 內容到內邊框之間的距離。

1

 

 

padding:也是複合屬性，能夠按照方向進行拆分

padding-left

padding-right

padding-top

padding-bottom

 

 

能夠書寫複合寫法：

四值法：上 右 下 左；

1 padding: 30px 40px 50px 60px;

 

三值法： 上 右（左） 下；

1 padding: 30px 50px 60px;

 

二值法： 上（下） 右（左）；

1 padding: 30px 50px;

 

單值法： 四個方向都相同;

1 padding: 30px;

 

通常在使用時咱們習慣先書寫單值法，特殊方向用單一屬性層疊掉。

1 padding: 30px; 2 padding-left: 100px;

 

 

4.3 margin

外邊距： 盒子之間的距離

用法和padding 同樣

 

margin也是複合屬性能夠按照方向拆分

1 margin-left 2 margin-right 3 margin-top 4 margin-bottom

 

能夠書寫複合寫法：

四值法： 上 右 下 左；（三值法，二值法，單值法）

1 margin: 20px 30px 40px 50px;css