CSS筆記

CSS

什么是CSS
- CSS的作用是:可以給網(wǎng)頁中的每一個(gè)元素設(shè)置樣式("化妝"、排版布局),讓網(wǎng)頁更加精美。
- 完全沒有使用CSS的網(wǎng)頁：基本就是一堆從上到下嘉竟、從左到右挨在一起的文字和圖片
- CSS全稱是Cascading Style Sheets. 層疊樣式表

CSS樣式書寫格式

CSS提供了各種各樣、豐富多彩的CSS樣式洋侨，書寫格式如下所示

color: red

冒號(hào)左邊是樣式名舍扰，冒號(hào):右邊是樣式值

如何將CSS樣式應(yīng)用到元素上？

CSS提供了3種方法希坚、可以將CSS樣式應(yīng)用到元素上
- 內(nèi)聯(lián)樣式(inline style)
- 文檔樣式表(document style sheets)边苹、內(nèi)嵌樣式表(embed style style sheet)
- 外部樣式表 (external style sheet)

內(nèi)聯(lián)樣式

將樣式直接寫在元素的style屬性上

<div style="color: white;background-color: red">文字內(nèi)容</div>

CSS樣式之間用;隔開,建議每條CSS樣式后面都加上分號(hào);
在很多國內(nèi)外資料中，CSS樣式與 CSS屬性是一個(gè)意思
- 樣式名對(duì)應(yīng)的屬性名
- 樣式值對(duì)應(yīng)的屬性值
有些人也把inline 翻譯為"行內(nèi)"裁僧，用"內(nèi)聯(lián)"更合適勾给，表示"內(nèi)部自帶"的意思

文檔樣式表

將樣式寫在head元素中的style元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: white;
            background-color: red;
        }
    </style>
</head>

<style> 元素的type屬性值默認(rèn)的是text/css

外部樣式表

將樣式寫在單獨(dú)的CSS文件中，然后在當(dāng)前網(wǎng)頁的head元素中的link元素引用

image.png

image.png

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<link rel="stylesheet" >元素的type屬性值默認(rèn)是text/css
在CSS文件中使用@charset指定文件編碼锅知，一般都是UTF-8

image.png

可以在style元素或者CSS文件中使用@import導(dǎo)入其他的CSS文件

image.png

image.png

不建議使用@import 導(dǎo)入CSS文件播急，它的效率比link元素低

HTML和CSS的編寫準(zhǔn)則

在編寫HTML和CSS代碼過程匯總，要遵守一個(gè)準(zhǔn)則
- 結(jié)構(gòu)售睹、樣式分離
- 因此导匣，不要使用HTML元素的屬性來給元素添加樣式，比如body的bgcolor、img的width \ height等
- 以下是不建議寫法

<body>
    <img src="beer.png" alt="" width="300" height="400">
</body>

以下是建議的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }
        
        img {
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="beer.png" alt="">
</body>
</html>

設(shè)置網(wǎng)頁圖標(biāo)

link元素除了可以用來引入CSS文件懒闷，還可以設(shè)置網(wǎng)頁的圖標(biāo)(href的值是圖標(biāo)鏈接)

   <link rel="icon" type="image/x-icon" >

image.png

link元素的rel屬性不能省略卸奉，用來指定文檔與鏈接資源的關(guān)系
一般rel若確定慰毅，相應(yīng)的type也會(huì)默認(rèn)確定德撬，所有可以省略type
網(wǎng)頁圖標(biāo)支持的圖片格式化是ico、png固歪，常用大小是16x16蒜鸡、24x24胯努、32x32(單位：像素)

常用CSS屬性

按照CSS屬性的具體用途，大致可以分類為
- 文本:color逢防、direction叶沛、letter-spacing、word-spacing忘朝、line-height灰署、text-align、text-transform局嘁、text-decoration溉箕、white-space
- 字體：font、font-family悦昵、font-style肴茄、font-size、font-variant旱捧、font-weight
- 背景：background独郎、background-color踩麦、background-image枚赡、background-repeat、background-attachment谓谦、background-positioin
- 盒子模型: width贫橙、height、border反粥、margin卢肃、padding
- 列表：list-style
- 表格：border-collapse
- 顯示：display、visibility才顿、overflow莫湘、opacity、filter
- 定位：vertical-align郑气、 position幅垮、left、top尾组、right忙芒、bottom、float讳侨、clear

最常用的CSS屬性值

color：前景色(文字顏色)
background：背景色
width：寬度
height：高度
font-size：文字大小

background-color

background-color 決定背景色

color

color屬性用來設(shè)置文本內(nèi)容的前景色
- 包括文字呵萨、裝飾線、邊框跨跨、輪廓等的顏色

span元素

默認(rèn)情況下潮峦，跟普通文件幾乎沒有差別
用與區(qū)分特殊文本和普通文本，比如用來顯示一些關(guān)鍵字

image.png

div元素

一般作為其他元素的父容器，把其他元素包住跑杭，代表一個(gè)整體
用于把網(wǎng)頁分割為多個(gè)獨(dú)立的部分

CSS屬性可用性

由于瀏覽器版本铆帽、CSS版本等問題，有些CSS屬性是無法使用的
- 可以到https://caniuse.com/查詢CSS屬性的版本

顏色

顏色有幾下幾種表示方法
- 基本顏色關(guān)鍵字
  - red：紅色德谅、black：黑色爹橱、yellow：黃色等
  - 只提供了上百種基本顏色的關(guān)鍵字

span {
   background-color: red;
}

RBG顏色
- 十進(jìn)制：rgb(red,green,blue)
- 十六進(jìn)制：#rrggbb、#rgb


        span {
            /*    十進(jìn)制*/
            background-color: rgb(255,0,0);
            /*    十六進(jìn)制*/
            background-color: #ff0000;
            /* 或者*/
            background-color: #f00;
        }

RGBA顏色
- rgba(red,green,blue,alpha)
- alpha取值范圍是0.0~1.0,表示透明度窄做，數(shù)值越大越不透明
- background-color: rgba(255,0,0,5)

CSS屬性-字體

font-size

font-size決定文字大小
常用設(shè)置
- 具體數(shù)字 + 單位
  - 比如100px
  - 也可以使用em單位：1em代表100%愧驱、2em代表200%、0.5em代表50%
百分比
- 基于父元素的font-size計(jì)算椭盏，比如50%表示等于父元素的font-size的一半
一般給body設(shè)置font-size就代表設(shè)置網(wǎng)頁的默認(rèn)字體大小
- 其他元素可以基于父元素設(shè)置字體大小
- 到時(shí)候只需要改變body的字體大小组砚，其他元素都會(huì)按照比例改變

font-family

font-family用于設(shè)置文字的字體名稱
可以設(shè)置1個(gè)或者多個(gè)字體名稱(從左到右按順序選擇字體，直到找到可以用的字體為止)
- font-family: Consolas;
- font-family: "微軟雅黑","Consolas","Symbol","Microsoft Sans Serif";
一般情況下掏颊，英文字體只適用于英文糟红，中文字體同時(shí)適用于英文和中文
- 所以，如果希望中英文分別使用不同的字體乌叶，應(yīng)該先將英文字體寫在前面盆偿，中文字體寫在后面

       div {
            font-family: "Courier New","華文彩云";
        }

@font-face

@font-face可以讓網(wǎng)頁支持網(wǎng)絡(luò)字體(Web Font),不在局限于系統(tǒng)自帶字體
常見的字體種類
- TrueType字體：拓展名是 .ttf
- OpenType字體：拓展名是.ttf、otf准浴，建立在TrueType字體之上
- Embedded OpenType 字體：擴(kuò)展名是.eot,OpenType字體的壓縮版
- SVG字體：擴(kuò)展名是.svg事扭、.svgz
- web開放字體：擴(kuò)展名是.woff,建立在TrueType字體之上
并不是所有的瀏覽器都支持以上字體，使用時(shí)要多加測(cè)試
字體下載：http://font.chinaz.com/
font-face使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            /*字體名稱：可以隨便寫乐横，但建議最好跟原字體名字一致*/
            font-family: "微米簡(jiǎn)書體";
            src: url("fonts/微米簡(jiǎn)書.otf");
        }
        div {
            font-family: "微米簡(jiǎn)書體";
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>hello!我是微米簡(jiǎn)書體</div>

</body>
</html>

image.png

font-weight

font-weight用于設(shè)置文字的粗細(xì)(重量)
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一個(gè)數(shù)字表示一個(gè)重量
- normal：等于400
- bold：等于700
strong求橄、b、h1~h6等標(biāo)簽的font-weight默認(rèn)就是bold

font-sytle

用于設(shè)置文字的常規(guī)葡公、斜體顯示
- normal：常規(guī)顯示
- italic：用字體的斜體顯示
- oblique：文本傾斜顯示
- italic和oblique區(qū)別：
  - italic 字體本身帶有傾斜屬性罐农，如果沒有使用它沒有用
  - oblique有些字體沒有傾斜這個(gè)屬性，這個(gè)時(shí)候就只能用他了催什。
em涵亏、i、cite蛆楞、address溯乒、var、dfn這些元素的font-style默認(rèn)就是italic

font-variant

可以影響小寫字母的顯示形式
可以設(shè)置的值如下：
- normal：常規(guī)顯示
- samll-caps：將小寫字母替換為縮寫過的大寫字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            font-size: 30px;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<span>123,GO!What's wrong?</span>

</body>
</html>

image.png

line-height

line-height用于設(shè)置文本的最小行高
行高可以先簡(jiǎn)單理解為一行文字所占的高度
行號(hào)的嚴(yán)格定義是：兩行文字基線之間的距離
基線(baseline)：與小寫字母x最底部對(duì)齊的線

image.png
可以設(shè)置的值如下
- 具體的單位：比如40px
- 百分比：比如200%豹爹，最終的行高值使用百分比乘以元素的字體大小
  - 如果是寫百分比裆悄，繼承下來的就是經(jīng)過計(jì)算后的像素值
- noraml：常規(guī)顯示，瀏覽器會(huì)基于元素字體調(diào)整一個(gè)合理值臂聋，范圍在1.0~1.2
注意區(qū)分height和line-height的區(qū)別
height：元素的整體高度
line-height：元素中每一行文字所占據(jù)的高度

image.png

image.png
line-height設(shè)置的僅僅是最小行高光稼，不能決定最終行高

font

是一個(gè)縮寫屬性
font-style或南、font-variant、font-weight艾君、font-size/ling-height采够、font-family

div {
   font: italic small-caps 700 20px/40px "微軟雅黑" ;
}

font-style、font-variant冰垄、font-weight可以隨意調(diào)換順序,也可以省略
/line-height可以省略,如果不省略蹬癌，必須跟在font-size后面
font-size，font-family不可以調(diào)換順序虹茶，不可以省略

CSS屬性-文本

text-decoration

用于設(shè)置文字的裝飾線
- none：無任何裝飾線
- underline：下劃線
- overline：上劃線
- line-through：中劃線(刪除線)
u逝薪、ins元素默認(rèn)就是設(shè)置了text-decoration為underline

letter-spacing word-spacing

分別用于設(shè)置字母、單詞之間的間距
默認(rèn)是0蝴罪，可以設(shè)置為負(fù)數(shù)

text-transform

用于設(shè)置文字的大小轉(zhuǎn)換
可以設(shè)置以下值
- capitalize: 將每個(gè)單詞的首字符變?yōu)榇髮?/li>
- uppercase：將每個(gè)單詞所有的字符變?yōu)榇髮?/li>
- lowercase：將每個(gè)單詞的所有字符變?yōu)樾?/li>
- none：沒有任何影響

text-indent

用于設(shè)置第一行內(nèi)容的縮進(jìn)
text-indnt：2em;剛好是縮進(jìn)2個(gè)文字

image.png

text-align

可用于設(shè)置元素內(nèi)容在元素中的水平對(duì)齊方式
常用的值
- left：左對(duì)齊
- right：右對(duì)齊
- center：正中間顯示
- justify：兩端對(duì)齊

CSS選擇器

開發(fā)中經(jīng)常需要找打特定的網(wǎng)頁元素進(jìn)行設(shè)置樣式
什么是CSS選擇器
- 按照一定的規(guī)則選出符合條件的元素董济，為之添加CSS樣式
選擇器的種類繁多，大概可以這么歸類
- 通用選擇器(universal selector)
- 元素選擇器(type selectors)
- 類選擇器(class selectors)
- id選擇器(id selectors)
- 屬性選擇器(attribute selectors)
- 組合(combinators)
- 偽類(pseudo-class)
- 偽元素(pseudo-elements)

元素選擇器(type selectors)

所有的div元素

div {
color: red;
}

<body>
<div>文字內(nèi)容1</div>
<p>文字內(nèi)容2</p>
<span>文字內(nèi)容3</span>
<div>文字內(nèi)容4</div>
</body>

image.png

或者叫做"標(biāo)簽選擇器"

通用選擇器

所有的元素

* {
color: red;
}

<body>
<div>文字內(nèi)容1</div>
<p>文字內(nèi)容2</p>
<span>文字內(nèi)容3</span>
</body>

image.png

一般用來給我所有元素做一些通用性的設(shè)置
- 比如內(nèi)邊距要门、外邊局
- 參考：http://www.jd.com
效率比較低虏肾，盡量不要使用

id選擇器

id值為one的元素

#one {
  color: red;
}

<body>
<div id="two">文字內(nèi)容1</div>
<p id="one">文字內(nèi)容2</p>
<span id="three">文字內(nèi)容3</span>
</body>

image.png

id注意點(diǎn)
- 一個(gè)HTML文檔里面的id值是唯一的，不能重復(fù)
- id值如果由多個(gè)單詞組成欢搜，單詞之間可以用中劃線-封豪、下劃線_連接,也可以使用駝峰標(biāo)識(shí)。
- 最好不要用標(biāo)簽名作為id值

<span id="three">文字內(nèi)容3</span>
<!--中劃線隔開-->
 <div id="the-first-box"></div>
<!--下劃線隔開-->
 <div id="the_second_box"></div>
<!--駝峰標(biāo)識(shí):第一個(gè)單詞首字母小寫狂巢，其他單詞首字母大寫-->
 <div id="theAThreadBox"></div>

中劃線又叫連字符

類選擇器

class值有one元素

       .one {
           color: red;
       }

<body>
<div class="two">文字內(nèi)容1</div>
<p class="one">文字內(nèi)容2</p>
<span class="two one">文字內(nèi)容3</span>
<div class="one">文字內(nèi)容4</div>
</body>

image.png

class注意點(diǎn)
- 一個(gè)元素可以有多個(gè)class值撑毛，每個(gè)class之間使用空格隔開
- class值如果由多個(gè)單詞組成书聚，單詞之間可以用中劃線-唧领、下劃線_連接，也可以使用駝峰標(biāo)識(shí).
- 最好不要用標(biāo)簽名作為class的值

屬性選擇器(attribute slecotors)

擁有title屬性的元素

[title] {
       color: red;
}

<body>
<div title="one">文字內(nèi)容1</div>
<div>文字內(nèi)容2</div>
<div>
    <p title="two">文字內(nèi)容3</p>
</div>
<span title="">文字內(nèi)容4</span>
</body>

image.png

屬性選擇器 - [att=val]

title 屬性值恰好等于one的元素

  [title="one"] {
          color: red;
      }

<body>
<div title="one">文字內(nèi)容1</div>
<div>文字內(nèi)容2</div>
<div>
    <p title="one">文字內(nèi)容3</p>
</div>
<span title="two">文字內(nèi)容4</span>
</body>

image.png

屬性控制器 - [attr~=val]

title屬性值包含單詞one的元素(單詞one與其他單詞之間必須用空格隔開)

[title~="one"] {
         color: red;
  }

<body>
<div title="testonetwo">文字內(nèi)容1</div>
<div title="testone two">文字內(nèi)容2</div>
<div title="test one two">文字內(nèi)容3</div>
<div title="test one">文字內(nèi)容4</div>
<div title="one two">文字內(nèi)容5</div>
<div title="one-two">文字內(nèi)容6</div>
<div title="one_two">文字內(nèi)容7</div>
<div title="one">文字內(nèi)容8</div>
<div title="two">文字內(nèi)容9</div>
</body>

image.png

屬性選擇器 - [attr|=vale]
- title屬性值恰好等于one或者以單詞one開頭且后面緊跟著連字符-元素
- 一般使用在lang屬性上面
```
  [lang|="en"] {
            color: red;
        }
```

屬性選擇器 - [attr^=val]

title屬性值以單詞one開頭的元素

 [lang^="one"] {
     color: red;
}

<body>
<div title="one">文字內(nèi)容1</div>
<div title="one two">文字內(nèi)容2</div>
<div title="onetwo">文字內(nèi)容3</div>
<div title="one-two">文字內(nèi)容4</div>
<div title="one_two">文字內(nèi)容5</div>
</body>

-屬性選擇器 - [attr$=val]

title屬性值以單詞one結(jié)尾的元素

   [title$="one"] {
          color: red;
      }

  <body>
<div title="one">文字內(nèi)容1</div>
<div title="twoone">文字內(nèi)容2</div>
<div title="two one">文字內(nèi)容3</div>
<div title="two-one">文字內(nèi)容4</div>
<div title="two_one">文字內(nèi)容5</div>
</body>

屬性選擇器 - [attr*=val]

title屬性值包含單詞one的元素

[title*="one"] {
        color: red;
}

<body>
<div title="one">文字內(nèi)容1</div>
<div title="twoone">文字內(nèi)容2</div>
<div title="two one">文字內(nèi)容3</div>
<div title="two-one">文字內(nèi)容4</div>
<div title="two_one">文字內(nèi)容5</div>
<div title="two呵呵one">文字內(nèi)容6</div>
</body>

組合

后代選擇器(descendant combinator)

div元素里面的span元素(包括直接雌续、間接子元素)

div span {
    color: red;
}

<body>
<span>文字內(nèi)容1</span>
<div>
    <span>文字內(nèi)容2</span>
    <p>
        <span>文字內(nèi)容3</span>
    </p>
</div>
<div>
    <span>文字內(nèi)容4</span>
</div>
<span>文字內(nèi)容5</span>
</body>

image.png

子選擇器(child combinators)

div元素里面的直接span子元素(不包括間接子元素)

div>span {
    color: red;
}

<body>
<span>文字內(nèi)容1</span>
<div>
    <span>文字內(nèi)容2</span>
    <p>
        <span>文字內(nèi)容3</span>
    </p>
</div>
<div>
    <span>文字內(nèi)容4</span>
</div>
<span>文字內(nèi)容5</span>
</body>

image.png

相鄰兄弟選擇器

div元素后面緊挨著的p元素

div+p {
    color: red;
}

</head>
<body>
<p>文字內(nèi)容1</p>
<div>
    <p>文字內(nèi)容3</p>
</div>
<p>文字內(nèi)容3</p>
<p>文字內(nèi)容4</p>
</body>

image.png

全體兄弟選擇器

div元素后面的p元素(且div斩个、p元素必須是兄弟關(guān)系)

div~p {
    color: red;
}

<body>
<p>文字內(nèi)容1</p>
<div>
    <p>文字內(nèi)容3</p>
</div>
<p>文字內(nèi)容3</p>
<p>文字內(nèi)容4</p>
</body>

image.png

選擇器組- 并集選擇器

所有的div元素+所有class值有one的元素+所有title屬性值等于test元素

div,.one,[title="test"] {
    color: red;
}

<body>
<div>文字內(nèi)容1</div>
<span title="test">文字內(nèi)容2</span>
<p class="one">文字內(nèi)容3</p>
</body>

選擇器組-交集選擇器

同時(shí)符合2個(gè)條件的元素：div元素、class的值有one

div.one {
    color: red;
}

<div class="one">文字內(nèi)容1</div>
<span class="one">文字內(nèi)容2</span>
<p class="one">文字內(nèi)容3</p>

image.png

偽類

常見的偽類有
動(dòng)態(tài)偽類(dynamic pseudo-classes)
- :link驯杜、:visited受啥、:hover、:active姻报、:focus
目標(biāo)偽類(target pseudo-classes)
- :target
語言偽類(language pseudo-classes)
- :lang()
元素狀態(tài)偽類(UI element states pseudo-classes)
- :enabled腺晾、:disabled摊趾、:checked
結(jié)構(gòu)偽類(structural pseudo-classes)
- :nth-child()、:nth-lase-child()藤肢、:nth-of-type、:nth-last-of-type()
- :first-child糯景、:last-child嘁圈、:first-of-type省骂、:last-of-type
- :root、:only-child最住、:only-of-type钞澳、:empty
否定偽類(negation pseudo-classes)
- :not()

動(dòng)態(tài)偽類

使用舉例
- a:link 未訪問的鏈接
- a:visited 已訪問的鏈接
- a:hover 鼠標(biāo)挪動(dòng)到鏈接上
- a:active 激活鏈接(鼠標(biāo)在鏈接上長(zhǎng)按住未松開)
使用注意
:hover必須放在:link和:visited后面才能完全生效
:active必須放在:hover后面才能完全生效
所有建議編寫順序是:link、:visited涨缚、:hover轧粟、:active
記憶：女朋友看到LV包包后.ha ha大笑
除了a元素,:hover、:active也能用在其他元素上

動(dòng)態(tài)偽類-：focus

:focus指當(dāng)前擁有輸入焦點(diǎn)的元素(能接收鍵盤的輸入)
- 本文輸入框一聚焦后脓魏，背景就會(huì)變紅色
```
 input:focus {
   background-color: red;
 }
```
- 因?yàn)殒溄觓元素可以被鍵盤Tab鍵選中聚焦,所有:focus也適用于a元素
```
input:focus {
  color: red;
}
a:focus {
    color: red;
}
```
動(dòng)態(tài)偽類編寫順序建議為
- :link逃延、:visited、:focus轧拄、:hover揽祥、active
- 記憶：女朋友看到LV包包后，F(xiàn)eng瘋一樣地ha ha大小
去除a元素默認(rèn)的:focus效果

a:focus {
    outline: none;
}

或者將tabindex屬性設(shè)置為-1

tabindex屬性

使用tabindex可以控制tab鍵選中元素的順序檩电，從1開始
tabindex設(shè)置為-1,代表禁止使用tab鍵選中
細(xì)節(jié)
- 直接給a元素設(shè)置樣式拄丰，相當(dāng)于給a元素所有的動(dòng)態(tài)偽類都設(shè)置了
```
a {
   color: red;
}
```
- 相當(dāng)于a:link、a:visited俐末、a:hover料按、a:active、a:focus的color都是red

目標(biāo)偽類(target pseudo-classes)

當(dāng)元素被錨點(diǎn)鏈接當(dāng)作目標(biāo)跳轉(zhuǎn)之后起作用

p:target {
    color: red;
}

<p id="ppp"></p>
<a href="#ppp"></a>

image.png

語言偽類(language pseudo-classes)

語言是en系列(英語)的所有div元素

div:lang(en) {
    color: red;
}

<body lang="en">
<div>文字內(nèi)容1</div>
<div lang="en">文字內(nèi)容2</div>
<div lang="zh">文字內(nèi)容3</div>
<div lang="en-us">文字內(nèi)容4</div>
</body>

image.png

元素狀態(tài)偽類(UI element states pseudo-classes)

:enable啟動(dòng)狀態(tài)
:disabled禁止?fàn)顟B(tài)
:checked被選中狀態(tài)


input:enabled {
    border: 2px solid red;
}
input:disabled {
    border: 2px solid black;
}

input:checked {
    outline: 2px solid blue;
}

結(jié)構(gòu)偽類

:nth-child(1)

是父元素中的第一個(gè)子元素

image.png

:nth-child(2n)

n代表任意正整數(shù)和0
是父元素中的第偶數(shù)個(gè)子元素
跟:nth-child(even)同義

:nth-child(2n+1)

父元素中第奇數(shù)個(gè)子元素
跟:nth-child(odd)同義

:nth-child()的完整使用格式是:nth-child(an+b)

是父元素中的第an+b個(gè)子元素
a 卓箫、b需要給出具體的值载矿，可以是正整數(shù)、也可以是負(fù)整數(shù)烹卒，0
n代表任意正整數(shù)和0

:nth-last-child()從最后一個(gè)子元素開始往前計(jì)數(shù)闷盔，

:nth-last-child(1)，代表倒數(shù)第一個(gè)子元素
:nth-last-child(-n + 2),代表最后兩個(gè)子元素
練習(xí):表示第2個(gè)~倒數(shù)第2個(gè)元素(去除頭和尾元素)

p:nth-child(n + 2):nth-last-child(n+2) {
    color: red;
}

<body>
<div>
    <p>文字內(nèi)容1</p>
    <p>文字內(nèi)容2</p>
    <p>文字內(nèi)容3</p>
    <p>文字內(nèi)容4</p>
    <p>文字內(nèi)容5</p>
    <p>文字內(nèi)容6</p>
</div>
</body>

image.png

:nth-of-type()旅急、:nth-last-of-type()

:nth-of-type()用法跟:nth-child()類似逢勾，不同點(diǎn)是:nth-of-type()計(jì)數(shù)時(shí)只計(jì)算同種類元素，就是只計(jì)數(shù)兄弟類

其他 :first-child藐吮、:last-child溺拱、:first-of-type、:last-of-type谣辞、:only-child迫摔、only-of-type、root:

first-child 等同于:nth-child(1)
:last-child 等同于:nth-last-child(1)
:first-of-type 等同于:nth-of-type(1)
:last-of-type 等同于:nth-last-of-type(1)
:ony-child 是父元素中唯一的子元素泥从。
- 等同于 :first-child:last-child或者:nth-child(1):nth-last-child(1)
:only-of-type 是父元素中唯一的這種元素的子類
- 等同于:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)

:empty

:empty代表里面完全空白元素

p:empty {
    width: 200px;
    height: 20px;
    background: red;
}

<body lang="en">
<p></p>
<p>文字內(nèi)容1</p>
<p> </p>
<p><span></span></p>
<p>文字內(nèi)容2</p>
</body>

image.png

否定偽類(negation pseudo-class)

:not()的格式是:not(x)
- x是一個(gè)簡(jiǎn)單的選擇器
- 可以是元素選擇器句占、通用選擇器、屬性選擇器歉闰、類選擇器辖众、id選擇器卓起、偽類(出否定偽類)

/*除了第一個(gè)同級(jí)子類p元素和最后一個(gè)同級(jí)子類p元素以外的所有p元素*/
p:not(:first-of-type):not(:last-of-type) {
    color: red;
}

<body>
<p>文字內(nèi)容1</p>
<p>文字內(nèi)容2</p>
<p>文字內(nèi)容3</p>
<p>文字內(nèi)容4</p>
<p>文字內(nèi)容5</p>
</body>

image.png

:not(x)表示除x以外的元素

/*除了p元素、body元素凹炸、html元素以外的所有元素都為紅色*/
:not(p):not(body):not(html) {
    color: red;
}

<body>
<p>文字內(nèi)容1</p>
<span>文字內(nèi)容2</span>
<div>文字內(nèi)容3</div>
<p>文字內(nèi)容4</p>
</body>

image.png

偽元素(pseudo-elements)

常用的偽元素有
- :first-line等價(jià)寫法::first-line
- :first-letter等價(jià)寫法::first-letter
- :before等價(jià)寫法::before
- :after等價(jià)寫法::after
為了區(qū)分偽元素和偽類戏阅，建議偽元素使用2個(gè)冒號(hào)，比如::first-line

::first-line

可以針對(duì)首行文本設(shè)置屬性

div::first-line {
    color: blue;
    text-decoration: underline;
}

image.png

只有一下屬性可以可以應(yīng)用在::first-line偽元素
- 字體屬性啤它、顏色屬性奕筐、背景屬性
- word-spacing、letter-spacing变骡、text-decoration离赫、text-transform、line-height

::first-letter

::first-letter可以針對(duì)首個(gè)字符設(shè)置屬性

div::first-letter {
    color: blue;
    text-decoration: underline;
    font-size: 30px;
}

image.png

只有下列屬性可以應(yīng)用在::first-letter偽元素
- 字體屬性塌碌、margin屬性渊胸、padding屬性、border屬性台妆、顏色屬性翎猛、背景屬性
- text-decoration、text-transform接剩、letter-spacing切厘、word-spacing、line-height懊缺、float疫稿、vertical-align(只有當(dāng)float是none時(shí))

::before和::after

用來在一個(gè)元素的內(nèi)容之前或者之后插入其他內(nèi)容(可以是文字圖片)

div {
    color: red;
}
div::before {
    /*在div前面插入的內(nèi)容"before"*/
    content: "before";
    font-size: 40px;

}
div::after {
    /*在div后面輸入一張圖片*/
    content: url("https://www.jd.com/favicon.ico");
}

<body>
<div>這是京東icon</div>
</body>

image.png

attr()

在content中，還可以使用attr屬性名來獲取元素的屬性值

/*a[href^="http"]細(xì)節(jié)
a[href]表示元素里面必須href元素
href^="http" 表示href必須以http開頭
*/
a[href^="http"]::after {
    content: "[" attr(href) "]";
}

<body>
<a >京東</a> <br>
<a >百度</a><br>
<a >淘寶</a><br>
<a >小碼哥</a>
</body>

image.png

特性

屬性繼承

CSS中有些屬性是可以繼承的鹃两，何為元素屬性繼承遗座？
- 一個(gè)元素如果沒有設(shè)置某屬性值，就會(huì)跟隨父元素的值
- 當(dāng)然怔毛，一個(gè)元素如果有設(shè)置某屬性的值员萍，就使用自己設(shè)置的值
比如color 腾降、font-size等屬性都可以繼承的
不能繼承的屬性拣度，一般可以使用inherit值強(qiáng)制繼承
CSS屬性繼承的是計(jì)算值，并不是當(dāng)初編寫屬性時(shí)的指定的值(字面值)

    <style>
        .div1 {
            font-size: 30px;
        }
        .div2 {
            font-size: 50%;
        }
        .div3  {
            /*inherit強(qiáng)制繼承螃壤，繼承的是30px * 50% = 15px,這里15px是計(jì)算值*/
            /*div3 的font-size 為15px*/
            font-size: inherit;
        }
    </style>

<body>
<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>
</body>

屬性層疊

CSS允許多個(gè)相同名字的CSS屬性層疊在同一個(gè)元素上
- 層疊后的結(jié)果是：只有一個(gè)CSS屬性會(huì)生效

    <style>
        #box {
            color: red;
        }
        .word {
             color: green;
         }

        div {
            color:blue;
        }
    </style>

<div class="word" id="box">div1

image.png

使用經(jīng)驗(yàn)

為何有時(shí)候編寫的CSS屬性不好使抗果，有可能是因?yàn)?
- 選擇器的優(yōu)先級(jí)太低
- 選擇器沒選中對(duì)應(yīng)的元素
- CSS屬性樣式不對(duì)
  - 元素不支持此CSS屬性，比如span默認(rèn)是不支持width和height的
  - 瀏覽器不支持此CSS屬性奸晴，比如舊版本的瀏覽器不支持CSS3的某些屬性
  - 被同類型的CSS屬性覆蓋冤馏，比如font覆蓋font-size
建議
- 充分利用瀏覽器的開發(fā)者工具進(jìn)行調(diào)試(增加、修改樣式)寄啼、查錯(cuò)

元素類型

塊級(jí)逮光、行內(nèi)級(jí)元素

根據(jù)元素的顯示類型代箭、HTML元素可以主要分為2大類
- 塊級(jí)元素
  - 獨(dú)占一行
  - 比如div、p涕刚、pre嗡综、h1~h6、ul杜漠、ol极景、li、dl驾茴、dt盼樟、dd、table锈至、form晨缴、artcle、aside峡捡、footer喜庞、header、hgroup棋返、main延都、nav、section睛竣、blockquote晰房、hr等
- 行內(nèi)級(jí)元素
  - 多個(gè)行內(nèi)級(jí)元素可以在父元素的同一行中顯示
  - 比如a、img射沟、span殊者、strong、code验夯、iframe猖吴、label、input挥转、button海蔽、canvas、embed绑谣、object党窜、video、audio等

替換借宵、非替換元素

根據(jù)元素的內(nèi)容類型幌衣，HTML元素可以主要分為2大類
- 替換元素
  - 元素本身沒有實(shí)際內(nèi)容，瀏覽器根據(jù)元素的類型和屬性壤玫，來決定元素的具體顯示內(nèi)容
  - 比如img豁护、input哼凯、video、embed楚里、canvas挡逼、audio、object等
- 非替換元素
  - 和替換元素相反腻豌，元素本身是有實(shí)際內(nèi)容的家坎，瀏覽會(huì)直接將其內(nèi)容顯示出來，而不需要根據(jù)元素類型和屬性來判斷到底是什么內(nèi)容
  - 比如div吝梅、p虱疏、pre、h1~h6苏携、ul做瞪、ol、li右冻、dl装蓬、dt控漠、dd迅腔、table、form安疗、article乳蛾、aside暗赶、footer、header肃叶、hgroup蹂随、main、div因惭、nav岳锁、section、blockquote蹦魔、hr激率、a、strong版姑、span柱搜、code、label等

元素的分類總結(jié)

image.png

display

CSS中有個(gè)display屬性剥险，能修改元素的顯示類,有4個(gè)常用的值
block：讓元素顯示為塊級(jí)元素
inline：讓元素顯示為行內(nèi)級(jí)元素
none：隱藏元素
inline-block：讓元素同時(shí)具備行內(nèi)級(jí)、塊級(jí)元素的特征
display的以下取值宪肖，等同于某些HMTL元素
- table：<table>表制，一個(gè)block-level表格
- inline-table：<table>健爬，一個(gè)inline-level表格
- table-row：<tr>
- table-row-group：<tbody>
- table-header-group：<thead>
- table-footer-group：<tfoot>
- table-cell：<td>、<th>么介，一個(gè)單元格
- table-caption：<caption>娜遵，表格標(biāo)題
- list-item：<li>

inline-block

可以讓元素同時(shí)具備塊級(jí)、行內(nèi)級(jí)元素的特征
- 跟其他行內(nèi)級(jí)元素在同一行顯示
- 可以隨意設(shè)置寬高
- 寬高默認(rèn)有內(nèi)容決定
可以理解為
- 對(duì)外來說壤短，它是一個(gè)行內(nèi)級(jí)元素
- 對(duì)內(nèi)來說设拟，它是一個(gè)塊級(jí)元素
常見用途
- 讓行內(nèi)級(jí)非替換元素(比如a、span等)能夠隨時(shí)設(shè)置寬高
- 讓塊級(jí)元素(比如div久脯、p等)能夠跟其他元素在同一行顯示

visibility

visibility纳胧，能控制元素的可見性，有2個(gè)常用值
- visible：顯示元素
- hidden：隱藏元素
visibility:hidden;和display:none;區(qū)別
- visibility:hidden
  - 雖然元素看不見了帘撰，但元素的框依舊還留著跑慕，還會(huì)占著原來的位置
- display:none
  - 不僅元素看不見了，而且元素的框也會(huì)被移除摧找，不會(huì)占著任何位置

overflow

overflow用于控制內(nèi)容溢出時(shí)的行為
- visible：溢出的內(nèi)容照樣可見
- hidden：溢出的內(nèi)容直接裁剪
- scoll：溢出的內(nèi)容被裁剪核行，但可以通過滾動(dòng)機(jī)制查看
  - 會(huì)一直顯示滾動(dòng)條區(qū)域，滾動(dòng)條區(qū)域占用的空間屬于width蹬耘、height
- auto：自動(dòng)根絕內(nèi)容是否溢出來決定是否提供滾動(dòng)機(jī)制
- 還有overflow-x芝雪、overflow-y兩個(gè)屬性，可以分別設(shè)置水平垂直方向(建議還是直接使用overflow综苔，因?yàn)槟壳?code>overflow-x绵脯，overflow-y還沒有成為標(biāo)準(zhǔn)，瀏覽器不支持)

元素之間的空格

行內(nèi)級(jí)元素：包括(inline-block元素)的代碼之間如果有空格休里，會(huì)被解析顯示為空格

<span>span1</span> <span>span2</span>
<span>span3</span>

image.png

目前建議解決的方法
- 1.元素代碼之間不要留空格
- 2.注釋掉空格
```
<span>span1</span><span>span2</span>
```
- 3.設(shè)置父元素的font-size為0蛆挫，然后在元素中重新設(shè)置自己需要的font-size
  - 此方法在safari不適用
- 4.給元素加float

注意點(diǎn)

塊級(jí)元素、line-block元素
- 一般情況下妙黍，可以包含任何其他元素(比如塊級(jí)元素悴侵、行內(nèi)級(jí)元素、inline-block元素)
- 特殊情況拭嫁，p元素不能包含其他塊級(jí)元素
行內(nèi)級(jí)元素
- 一般情況下可免，只能包含行內(nèi)級(jí)元素

盒子模型

盒子

HTML中的每一個(gè)元素都可以看做是一個(gè)盒子，如下圖所示做粤，可以具備這4個(gè)屬性
- 內(nèi)容(content)
  - 盒子里面裝的東西
- 內(nèi)邊距(padding)
  - 怕盒子里面裝的東西損壞而添加的泡沫或者其他抗震的輔料
- 邊框(border)
  - 就是盒子的邊框浇借，比如木盒子四周的目標(biāo)
- 外邊距(margin)
  - 為了方便取出，盒子之間保留一定的空隙
    
    image.png
默認(rèn)的盒子模型如下圖所示

image.png
瀏覽器開發(fā)者工具中看到的盒子模型

image.png

一個(gè)元素實(shí)際占用的寬度= border-left + padding-left + width + padding-right + border-right
一個(gè)元素實(shí)際占用的高度= border-top + padding-top + height + padding-bottom + border-bottom
一個(gè)元素的空間寬度= margin-left + border-left + padding-left + width + padding-right + border-right + margint-right
一個(gè)元素空間的高度= margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

寬度怕品、高度相關(guān)

width：寬度
- min-width：最小寬度妇垢，無論內(nèi)容多少，寬度都大于或等于min-width
- max-width：最大寬度,無論內(nèi)容多少，寬度都小于或等于max-width
hegith：高度
- min-height：最小高度闯估，無論內(nèi)容多少灼舍，高度都大于或等于min-height
- max-height：最大高度，無論內(nèi)容多少涨薪，高度都小于或等于max-height

內(nèi)邊距相關(guān)

padding-left：左內(nèi)邊距
padding-right：右內(nèi)邊距
padding-top：上內(nèi)邊距
padding-bottom：下內(nèi)邊距
padding：是paddng-top骑素、padding-right、padding-bottom刚夺、padding-left的簡(jiǎn)寫屬性献丑。
- 注意：這個(gè)簡(jiǎn)寫屬性是有順序的按照順時(shí)針旋轉(zhuǎn)依次為：上、右侠姑、下创橄、左。如果缺少left结借，那么left就是用rightd的值筐摘、如果缺少bottom，那么bottom就是用top的值

外邊距相關(guān)屬性

margin-left：左外邊距
margin-right：右外邊距
margin-top：上外邊距
margin-bottom：下外邊距
margin：是margin-top船老、margin-right咖熟、margin-bottom、margin-left的簡(jiǎn)寫水屬性柳畔。和padding的規(guī)律一樣馍管。都是順時(shí)針旋轉(zhuǎn)。

上下margin傳遞

margin-top傳遞
- 如果塊級(jí)元素的頂部線和塊級(jí)父元素的頂部線重疊薪韩，那么這個(gè)塊級(jí)元素的margin-top值會(huì)傳遞給父元素
```
<div style="width: 100px;height: 100px;background: green">
    <div style="width: 100px;height: 100px;background: red;margin-top: 10px">aa</div>
</div>
```
margin-bottom傳遞
如果塊級(jí)元素的底部線和塊級(jí)父元素的底部線重疊确沸，并且父元素的高度是auto，那么這個(gè)塊級(jí)元素的margin-bottom的值會(huì)傳遞給父元素

<div style="width: 100px;height: 100px;background: green;height: auto">
    <div style="width: 100px;height: 100px;background: red;margin-bottom: 10px">aa</div>
</div>
<div style="background: cyan">aa</div>

水平方向的margin是永遠(yuǎn)不會(huì)發(fā)生傳遞現(xiàn)象
如何防止傳遞問題俘陷？
- 給父元素設(shè)置padding-top\padding-bottom
- 給父元素設(shè)置border
- 給父元素或者子元素設(shè)置display:inline-block
建議
- margin一般使用設(shè)置兄弟元素之間的間距
- padding一般用來設(shè)置父子元素之間的間距

上下margin折疊

垂直方向上相鄰的2個(gè)margin(margin-top罗捎、margin-bttom)有可能合并為一個(gè)margin，這種現(xiàn)象叫做collaps(折疊)
水平方向上的margin(margin-left拉盾、margin-right)永遠(yuǎn)不會(huì)collapse
折疊后的最終值的計(jì)算規(guī)則
- 如果都是正數(shù)桨菜，最終值是：絕對(duì)值最大的那個(gè)正數(shù)值
- 如果都是負(fù)數(shù)，最終值是：絕對(duì)值最大的那個(gè)負(fù)數(shù)值
- 如果正數(shù)捉偏、負(fù)數(shù)都有倒得，最終值是：最大的正數(shù)和最小的負(fù)數(shù)相加
如何防止margin collapse
- 只設(shè)置其中一個(gè)元素的margin
- 條件允許的話，使用padding取代margin
兩個(gè)兄弟塊級(jí)元素之間上下margin折疊

image.png
父子塊級(jí)元素之間的margin折疊

image.png
無內(nèi)容塊級(jí)元素的margin的折疊

image.png
無內(nèi)容塊級(jí)元素的margin的折疊(折疊可以是連續(xù)的)

image.png
塊級(jí)元素折疊問題看似有點(diǎn)莫名其妙夭禽，實(shí)際上還是有實(shí)用之處
- 比如連續(xù)段落之間的margin霞掺，恰好需要這種折疊效果
  
  image.png

邊框(border)相關(guān)屬性

邊框?qū)挾?
- border-top-width、border-right-width讹躯、border-bottom-width菩彬、border-left-width
- border-width是上面4個(gè)屬性的簡(jiǎn)寫屬性
邊框顏色
- border-top-color缠劝、border-right-color、border-bottom-color挤巡、border-left-color
- border-color是上面4個(gè)屬性的簡(jiǎn)寫屬性
邊框樣式
border-top-style剩彬、border-right-style酷麦、border-bottom-style矿卑、border-left-style
border-style是上面4個(gè)屬性的簡(jiǎn)寫屬性

邊框樣式的取值

none:沒有邊框，邊框顏色沃饶，邊框的寬度會(huì)被忽略
hidden：與"none"類似母廷，多用在表格上，用于解決邊框沖突
dotted：邊框是一些列的點(diǎn)
dashed：邊框是一條虛線
solid：邊框是一條實(shí)線
double：邊框有兩條實(shí)線糊肤。兩條線寬度和其中的空白的寬度之和等于border-width的值
groove：邊框看上去好像是雕刻在畫布中吐出來的
inset：該邊框使整個(gè)框看上去好像是嵌在畫布中
outset：和inset相反琴昆，該邊框使整個(gè)框看上去好像是凸出來

image.png

邊框相關(guān)的屬性

border-top、border-right馆揉、border-bottom业舍、border-left

            border-top: 2px #0f0 dotted;
            border-right: 2px solid #f00;
            border-bottom: 2px dashed #0ff;
            border-left: 2px solid #ff0;

image.png

邊框顏色、寬度升酣、樣式的編寫順序任意
border：統(tǒng)一設(shè)置4個(gè)方向的邊框

border: 2px solid #f00;

邊框的形狀

邊框的形狀可能是
- 矩形舷暮、梯形、三角形等形狀
  
  image.png

邊框妙用- 實(shí)現(xiàn)三角形

image.png

transparent 透明
transform：旋轉(zhuǎn)

邊框妙用-實(shí)現(xiàn)雙色平分

        div {
            background: #DDD;
            width: 100px;
            height: 50px;
            border-bottom: 50px solid #111;
        }

image.png

行內(nèi)級(jí)費(fèi)替換元素的注意點(diǎn)

以下屬性對(duì)行內(nèi)級(jí)非替換元素不起作用
- width噩茄、height下面、margin-top、margin-bottom
以下屬性對(duì)行內(nèi)級(jí)非替換元素效果比較特殊
- padding-top绩聘、padding-bottom沥割、border-top、border-bottom

border---radius

圓角半徑相關(guān)的屬性有
virder-top-left-radius凿菩、border-top-right-radius机杜、border-bottom-left-radius、border-bottom-right-radius
border-top-left-radius: 40px 20px;
border---radius定義的是四分之一橢圓的半徑
- 第一個(gè)是水平半徑
- 第二個(gè)是垂直半徑(如果不設(shè)置衅谷，就跟隨水平半徑的值)
border-top-left-radius: 50%
還可以設(shè)置百分比
- 參考的是border-box的寬度和高度(也就是元素的實(shí)際占用尺寸椒拗，border+padding+width\height)
border-top-left-radius:55px 25px

image.png

border-radius

border-radius是一個(gè)縮寫屬性
bordeer-radius:10px 20px 30px 40px/15px 25px 35px 45px
斜線/前面是水平半徑，后面是垂直半徑
4個(gè)值的順序是top-left会喝、top-right陡叠、bottom-right、bottom-left(順時(shí)針方向)
- 如果bottom-left沒設(shè)置肢执，就跟隨top-right
- 如果bottom-right沒設(shè)置枉阵，就跟隨top-left
- 如果top-right沒設(shè)置，就跟隨top-left
border-radius大于或等于50%時(shí)预茄，就會(huì)變成一個(gè)圓

        div {
            width: 90px;
            height: 90px;
            border: 30px solid #000;
            background-color: #f00;
            border-radius: 50%;
        }

image.png

outline

outline表示元素的外輪廓
- 不占用空間
- 默認(rèn)顯示在border的外面
- 每個(gè)部位都是完整連接的兴溜，不會(huì)像border那樣有可能斷開(比如行內(nèi)級(jí)非替換元素的換行)
outline相關(guān)屬性有
- outline-width
- outline-style：取值跟border的樣式一樣侦厚，比如solid、dotted等
- outline-color
- outline:outline-width拙徽、outline-style刨沦、outline-color的簡(jiǎn)寫屬性，跟border用法類似
- outline-offset：設(shè)置outline和border之間的間距
應(yīng)用實(shí)例
- 去除a元素膘怕、input元素的focus輪廓效果

box-shadow

box-shadow屬性可以設(shè)置一個(gè)或多個(gè)陰影
- 每個(gè)陰影用<shadow>表示
- 多個(gè)陰影之間用逗號(hào)隔開想诅，從前到后疊加
- <shadow>的常見格式如下
  - <shadow> = inset? && <length>{2,4} &&<color>?
  - 第一個(gè)<length>：水平方向的偏移，正數(shù)往右偏移
  - 第二個(gè)<length>：垂直方向的偏移岛心，正數(shù)往下偏移
  - 第三個(gè)<length>：模糊半徑
  - 第四個(gè)<length>：延伸距離
  - <color>：陰影的顏色来破，如果沒有設(shè)置，就跟隨color屬性的顏色
  - inset：外框陰影變成內(nèi)框陰影

box-shadow示例1

            width: 100px; height: 100px;
            border: 12px solid blue; background-color: orange;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset,
            12px 12px 0px 8px rgba(0,0,0,0.4) ;

image.png

box-shadow示例2

image.png

text-shadow

text-show用于類似于box-shadow忘古，用于給文字添加陰影效果
text-show同樣適用于::first-line徘禁、::first-letter

box-sizing

box-sizing用來設(shè)置盒子模型中的寬高行為
content-box
- padding、borde都布置在width髓堪、height外邊
border-box
padding送朱、border布置在width坑鱼、height里邊

content-box

image.png

元素的實(shí)際寬度 = border + padding + width
元素的實(shí)際高度 = border + padding + height

border-box

image.png

元素的實(shí)際占用寬度= width
元素的實(shí)際占用高度 = height

盒子模型

image.png

元素的水平居中顯示

在一些需求中甲葬，需要元素在父元素中水平居中顯示(父元素一般都是塊級(jí)元素模闲、inline-block)
行內(nèi)級(jí)元素键兜、inline-block元素
- 水平居中：在父元素中設(shè)置text-align:center
塊級(jí)元素
水平居中：給自己設(shè)置margin-left:auto肝箱、margin-right:auto

背景

background-image

background-image用于設(shè)置元素的背景圖片
- 會(huì)蓋在background-color的上面
- 在圖片的透明區(qū)域擅编，可以看到背景色
如果設(shè)置了多張圖片
background-image: url("bg001.png"),url("bg002.png"),url("bg003.png");
- 設(shè)置的第一張圖片將會(huì)在最上面押逼，其他圖片按順序?qū)盈B在下面
注意：如果設(shè)置了背景圖后申尼，元素沒有具體的寬高祭阀，背景圖片是不會(huì)顯示出來的

background-repeat

background-repeat用于設(shè)置背景圖片是否需要平鋪
常見的設(shè)置右
- repeat：平鋪
- no-repeat：不平鋪
- repeat-x：只有在水平放心上平鋪
- repeat-y：只有在垂直方向上平鋪

background-size

background-size用于設(shè)置大小

            /*寬度150鹉戚，高度180*/
            background-size: 150px 180px;
            /* 寬度保持原來的寬高比自動(dòng)計(jì)算。高度180*/
            background-size: auto 180px;
            /* 寬度150专控，高度保持原來的寬高比自動(dòng)計(jì)算*/
            background-size: 150px auto;
            background-size: 150px;

background-position

用于設(shè)置背景圖片水平抹凳、垂直方向上的具體位置

image.png
水平方向上還可以設(shè)置：left、center伦腐、right
垂直方向上還可以設(shè)置：top赢底、center、bottom
如果只設(shè)置了1個(gè)方向柏蘑，另一個(gè)方向默認(rèn)是center
比如background-position:80px;等價(jià)于background-position:80px center;

Sprite

什么是CSS Sprint
- 是一種CSS圖像合成技術(shù)幸冻，將各種小圖片合并到一張圖上，然后利用CSS的背景定位來顯示對(duì)應(yīng)的圖片部分
- 有人翻譯為：CSS雪碧咳焚、CSS精靈
使用CSS Sprint的好處
- 減少網(wǎng)頁的http請(qǐng)求數(shù)量洽损，加快網(wǎng)頁響應(yīng)速度，減輕服務(wù)器壓力
- 減小圖片總大小
- 解決了圖片命名的困擾革半，只需要針對(duì)一張集合的圖片命名
- 更換風(fēng)格方便簡(jiǎn)單碑定，只需要在少數(shù)張圖片上修改圖片的顏色和樣式流码，整個(gè)網(wǎng)頁的風(fēng)格就可以改變
Sprite圖片制作
- 方法1：Photoshop
- 方法2：https://www.toptal.com/developers/css/sprite-generator

background-attachment

可以設(shè)置以下3個(gè)值
- scroll：背景圖片跟隨元素一起滾動(dòng)(默認(rèn)值)
- local：背景圖片跟隨元素以及元素內(nèi)容一起滾動(dòng)
- fixed：背景圖片相當(dāng)于瀏覽器窗口固定

background

是一系列背景相關(guān)屬性的簡(jiǎn)稱，常用格式是
- image position/size repeat attachment color
- background-size可以省略不寫延刘，如果不省略漫试，/background-size必須緊跟在background-position的后面
- 其他屬性也都可以省略。而且順序任意
  background: url("image/beer.png" ) center center/150px 250px no-repeat #f00;
Sprite編寫建議


        /*先將所有的image加載出來*/
        .div1,.div2,.div3 {
            background: url("images/mhxy.jpg");
        }
        /*在分別設(shè)置對(duì)應(yīng)點(diǎn)的位置*/
        .div1 {
            background-position: -10px -30px;
        }
        .div2 {
            background-position: -60px -50px;
        }
        .div3 {
            background-position: -110px -75px;
        }

background-image和img的選擇

利用background-image和img都能夠?qū)崿F(xiàn)顯示圖片的需求碘赖，在開發(fā)中如何選擇驾荣？

image.png
總結(jié)
- img，作為網(wǎng)頁內(nèi)容的重要組成部分崖疤，比如廣告圖秘车、LOGO圖片典勇、文章配圖劫哼、產(chǎn)品圖片
- background-image，可有可無割笙。有权烧，能讓網(wǎng)頁更美觀。無伤溉，也不影響用戶獲取完整網(wǎng)頁內(nèi)容信息
- 宗旨
  - 在沒有任何CSS樣式的情況下般码，用戶也能瀏覽到網(wǎng)頁中完整的內(nèi)容信息。(PS：網(wǎng)絡(luò)出現(xiàn)問題或服務(wù)器出現(xiàn)問題是乱顾，有可能會(huì)導(dǎo)致CSS文件加載失敗)

文檔畫布背景

沒有HTML元素對(duì)應(yīng)著文檔畫布板祝，如何設(shè)置文檔畫布的背景
- html或者body元素的背景都能夠延伸到整個(gè)文檔畫布
- 如果同時(shí)設(shè)置了html和body元素的背景，根元素html的背景才會(huì)作為文檔的畫布背景
- 建議通過body元素來設(shè)置文檔畫布背景

偽元素::first-line的背景

::first-line雖然意為第一行內(nèi)容走净，但它的背景并不一定填滿一行券时，取決于各種因素
文字大小、容器寬度伏伯、文字對(duì)齊方式

        div::first-line {
            background-color: blue;
        }

image.png

background實(shí)現(xiàn)圖片鏈接

使用background也可以實(shí)現(xiàn)圖片鏈接

        a {
            background: url("bg001.png") no-repeat;
            width: 70px;
            height: 70px;
            display: inline-block;
        }
<a ></a>

cursor

cursor屬性有auto橘洞、default、pointer说搅、text炸枣、none

image.png
cursor除了可以設(shè)置系統(tǒng)自帶的一些值以外，還可以設(shè)置圖片
cursor: url("text/russel.png" 0 0,pointer);
- url()后面的2個(gè)數(shù)字
  - 分別代表圖片在水平弄唧、垂直方向上的偏移适肠，不能設(shè)置負(fù)數(shù)
  - 0和0代表圖片左上角和指針是重疊的，數(shù)值變大候引，圖片左上角會(huì)朝著左上角方向偏移
  - 如果水平侯养、垂直分別設(shè)置圖片寬度的一半，圖片的中心點(diǎn)將和指針重疊
如果圖片找不到背伴，就會(huì)使用pointer作為cursor的值

定位

標(biāo)準(zhǔn)流

默認(rèn)情況下沸毁，元素都是按照normal flow(標(biāo)準(zhǔn)流峰髓、常規(guī)流、正常流息尺、文檔流(document flow))進(jìn)行定位
- 從上到下携兵、從左到右順序擺放好
- 默認(rèn)情況下，互相之間不存在層疊現(xiàn)象
  
  image.png

margin搂誉、padding定位

在標(biāo)準(zhǔn)流中徐紧，可以使用margin、padding對(duì)元素進(jìn)行定位
- 其中margin還可以設(shè)置負(fù)數(shù)
比較明顯的缺點(diǎn)是
- 設(shè)置一個(gè)元素的margin或者padding炭懊，通常會(huì)影響到標(biāo)準(zhǔn)流中的其他元素
- 不便于實(shí)現(xiàn)元素的層疊效果

position

利用position可以對(duì)元素進(jìn)行定位并级，常用取值有4個(gè)
- static：靜態(tài)定位
- relative：相對(duì)定位
- absolute：絕對(duì)定位
- fixed：固定定位

relative 相對(duì)定位

元素按照normal flow布局、
可以通過left侮腹、right嘲碧、top、bottom進(jìn)行定位
- 定位參照對(duì)象是元素自己原來的位置
left父阻、right愈涩、top、bottom用來設(shè)置元素的具體位置加矛，對(duì)元素的作用如下圖所示

最后編輯于：2020.10.04 00:44:37

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末履婉，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子斟览，更是在濱河造成了極大的恐慌毁腿，老刑警劉巖，帶你破解...
沈念sama閱讀 222,104評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件苛茂，死亡現(xiàn)場(chǎng)離奇詭異已烤，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)味悄，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,816評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門草戈，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人侍瑟，你說我怎么就攤上這事唐片。” “怎么了涨颜？”我有些...
開封第一講書人閱讀 168,697評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵费韭，是天一觀的道長(zhǎng)。經(jīng)常有香客問我庭瑰，道長(zhǎng)星持，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,836評(píng)論 1贊 298
?港島之戀（遺憾婚禮）
正文為了忘掉前任弹灭，我火速辦了婚禮督暂，結(jié)果婚禮上揪垄，老公的妹妹穿的比我還像新娘。我一直安慰自己逻翁，他們只是感情好饥努，可當(dāng)我...
茶點(diǎn)故事閱讀 68,851評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著八回，像睡著了一般酷愧。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上缠诅，一...
開封第一講書人閱讀 52,441評(píng)論 1贊 310
城市分裂傳說
那天溶浴，我揣著相機(jī)與錄音，去河邊找鬼管引。笑死士败，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的汉匙。我是一名探鬼主播拱烁，決...
沈念sama閱讀 40,992評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼噩翠！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起邦投，我...
開封第一講書人閱讀 39,899評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤伤锚，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后志衣，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屯援，經(jīng)...
沈念sama閱讀 46,457評(píng)論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,529評(píng)論 3贊 341
?白月光啟示錄
正文我和宋清朗相戀三年念脯，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狞洋。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,664評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡绿店，死狀恐怖吉懊，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情假勿，我是刑警寧澤借嗽，帶...
沈念sama閱讀 36,346評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站转培，受9級(jí)特大地震影響恶导，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浸须，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,025評(píng)論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一惨寿、第九天我趴在偏房一處隱蔽的房頂上張望邦泄。院中可真熱鬧，春花似錦裂垦、人聲如沸虎韵。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,511評(píng)論 0贊 24
一樁弒父案缸废，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽包蓝。三九已至，卻和暖如春企量，著一層夾襖步出監(jiān)牢的瞬間测萎，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,611評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工届巩，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留硅瞧，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,081評(píng)論 3贊 377
代替公主和親
正文我出身青樓恕汇，卻偏偏與公主長(zhǎng)得像腕唧，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子瘾英，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,675評(píng)論 2贊 359