標籤：

#01你認真學了css？（基本樣式1）

05-09

一、塊級元素、行內元素

  • 塊級（block-level）；行內（內聯inline-level）
  • 塊級可以包含塊級和行內；行內只能包含文本和行內
  • 塊級佔據一整行空間；行內佔據自身寬度空間，
  • 寬高設置、內外邊距的差異

1、block-level

div h1 h2 h3 h4 h5 h6 p hr（線）form ul dl ol pre table li dd dt tr td th

2、inline-level

em strong span a br imgbutton input label select textarea code script

如圖：

二、寬高-width、height

只對塊級元素設置生效，對行內元素設置無效

三、邊框-border

1、涉及邊框的幾個元素

粗細、顏色、類型（實線、虛線、點線）

border-width，border-color，border-style

/*簡寫*/p,span{ border:2px blue solid; }

如圖：

第一個：

第二個：

第三個：

第四個：

第五個：

2、如何使用邊框做三角形？

第一個：

第二個：

第三個：

四、邊距

1、盒模型

2、padding-內邊距

代表內邊距，有四個方向的值，可以合寫，值可以是數值、百分比（相對於父容器，不是自身）

padding-top

padding-right

padding-bottom

padding-left

3、margin-外邊距

代表外邊距，有四個方向的值，可以合寫，值可以是數值、百分比（相對於父容器，不是自身），還可以是負值

外邊距合併問題

在行內元素中，使用margin和padding左右生效，上下不生效，如圖：

行內元素中，margin和padding左右生效，上下不生效

margin-top

margin-right

margin-bottom

margin-left

3.1、margin:0 auto 塊級元素居中

.box{/* margin: 0 auto; 實際上是下面兩個起了作用 */margin-left:auto;margin-right:auto;}

對於塊級元素設置margin:0 auto（即：margin:0 auto 0 auto;）可以達到居中目的

無寬度時，居中不算明顯

有寬度時，居中明顯

4、* 去除元素默認樣式的margin 和padding

*{ margin:0; padding:0;}

由於頁面元素在瀏覽器會有自身的默認樣式：如圖

用於清除瀏覽器的固定樣式，重新設置寬高,如圖可加：

註：默認樣式1em=16px

五、display

1、塊級和行內的display：

  • 塊級：block，list-item,table
  • 行內：inline，inline-table，inline-block

註：一個元素在默認情況下是一個display：inline

displayValue: inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inheritInitial: inlineApplies to: all elementsInherited: no

註：display：inline-block的布局，在做任務的時候，有涉及的資料可以看一下：

CSS之使用display:inline-block來布局 - 淵源遠願 - 博客園?

www.cnblogs.com圖標

2、CSS繼承和不繼承

繼承：每一個元素都是文檔樹的一部分，每個元素都有其對應的父級元素，每一個父級元素的CSS屬性值都可以被應用到它的子元素中。可繼承屬性一般為：font-size、font-family、color

反之，CSS不繼承通常為頁面的細節元素，如border、padding、margin、background-color 、width、height等

六、font

  • font-size：字體大小

如：12px（較小）、14px（正常）、16px（瀏覽器默認）、20px（標題大小）、22、28、60px（大標題大小）

  • font-family：字體，有宋體、微軟雅黑、Arial等
  • font-weight：文字粗度，常用的就是默認值regular和粗體bold
  • line-height：行高，即文字大小，可以用百分比、倍數或者固定尺寸。
  • 垂直高度：font-size*line-height（行+文字佔據的垂直空間）

註：以上屬性為可繼承給子元素

1、如何使用：

body{ font: 12px/1.5 tahoma,arial,Hiragino Sans GB,5b8b4f53,sans-serif;}或者p { line-height: 1.5; font-size: 14px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: bold;}

2、font-family

（1）字體原理

使用瀏覽器打開頁面時，瀏覽器會讀取 HTML 文件進行解析渲染。當讀到文字時會轉換成對應的 unicode碼（可以認為是世界上任意一種文字的特定編號）。再根據HTML 里設置的 font-family （如果沒設置則使用瀏覽器默認設置）去查找電腦里（如果有自定義字體@font-face ，則載入對應字體文件）對應字體的字體文件。找到文件後根據 unicode 碼去查找繪製外形，找到後繪製到頁面上

（2）了解

這裡有一篇老師寫的關於字體方面的實現原理，以前學過一點設計看了，以後如何配合設計師進行字體需求上還是蠻受用的，可以看看：

若愚：「每日一題」聊一聊字體圖標的實現原理?

zhuanlan.zhihu.com圖標

（3）font-family寫法

在 CSS 中設置字體時，直接寫字體中文或英文名稱瀏覽器都能識別，直接寫中文的情況下編碼（GB2312、UTF-8 等）不匹配時會產生亂碼。保險的方式是將字體名稱用Unicode來表示

宋體 | SimSun | 5B8B4F53 （Unicode碼）

黑體 | SimHei | 9ED14F53

微軟雅黑 | Microsoft YaHei | 5FAE8F6F96C59ED1

？可打開控制台 escape(微軟雅黑)，將 %u替換成

3、chrome最小字體

chrome 默認字體大小16px, 最小字體 12px

若需要小於12px的字體，可參考以下解決方案：islittle/Web-Developer

七、文本

1、類型

  • text-align：文本對其方式。left、center、right、justify（≈兩端對齊）
  • text-indent：文案第一行縮進距離
  • text-decoration：none（去掉下劃線）、underline、line-through（刪除線）、overline（頂部線）
  • color：文字顏色
  • text-transform：改變文字大小寫。none（不改寫）、uppercase（小寫展示大寫）、lowercase（大寫展示小寫）、capitalize（單詞的首字母變大寫展示）
  • word-spacing：可以改變字（單詞）之間的標準間隔（對於中文，每字就是一單詞）
  • letter-spacing：字母間隔修改的是字元或字母之間的間隔

演示如圖所示：

2、幾種情況：

（1）行內元素居中，如：

<style> .box{ text-align: center; }</style> <div class="box"> <img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/6673909a-098c-4202-8b80-f4aad64e0262.png"> </div>

（2）display：inline-block元素居中，如：

<div stylex="text-align: center;"> <img stylex="margin: 0 auto" src="XXX.png"> </div>

（3）單行文本溢出，關鍵代碼如：

.card > h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

如圖：

八、顏色

1、單詞：

red、blue、pink、yellow、white、black

2、十六進位：

#ff0000 紅色

#0000ff 藍色

#008000 綠色

#000000（黑色）=#000、#ffffff（白色）=#fff、#eeeeee（淡灰色）=#eee、#cccccc（灰色）=#ccc、#666666（深灰色）=#666、#333333（深黑色）=#333、#f00（紅色）、#0f0（綠色）、#00f（藍色）

rgb: rgb(255,255,255)，rgb(0,255,0)

rgba: rgba(0,0,0,0.5) css3中涉及

九、單位

1、px：固定單位

*2、em：相對長度單位，相對於當前元素的字體大小。如圖：

*3、rem：相對單位，相對於根元素（html）字體大小，即1rem = html設置的font-size。移動端較常用。

關於rem的好處我查了資料這個我比較理解，分享出來：

css3的字體大小單位[rem]到底好在哪？?

www.zhihu.com圖標

4、vw vh：相對單位，1vw為屏幕寬度的1% 兼容性較差

5、百分比：（涉及寬高？文字大小？line-height、position）

十、其他

1、a鏈接設置顏色

註：

  • 當滑鼠放置a鏈接，本身就會出現「手」指針的形狀效果
  • a有默認顏色和樣式，會覆蓋繼承的樣式

a{color：red；text-decoration: none;}

實際，.box a{}

2、列表去掉點

/* 設定列表樣式為：無 ,即沒有順序數字、圓點出現*/

ul{ list-style: none;}/*也可這樣*/ li{ list-style: none;}

如圖：


推薦閱讀：

※用CSS畫行號
※css sprite中的sprite應該如何翻譯比較達意？
※CSS整理
※盒模型的哪種寬高定義更符合人類直覺？
※面對變化莫測的 CSS，我該怎麼辦？

TAG:CSS | HTMLCSS | 前端開發入門 |