黑马程序员pink老师_CSS学习笔记
關于CSS具體屬性：CSS參考手冊網址
目錄
目錄
一、CSS字體樣式屬性
font-size：字號
font-family：字體樣式?
?CSS Unicode字體
font-weight：字體粗細
font-style：字體風格
?二、選擇器【重點】
標簽選擇器（元素選擇器）
類選擇器
CSS命名規范
多類名選擇器
?id選擇器
通配符選擇器【一般用不到，僅作了解】
偽類選擇器
（1）鏈接偽類選擇器
（2）結構偽類選擇器
(3)目標偽類選擇器
三、CSS外觀屬性
顏色屬性
line-height:行間距
text-align: 水平對齊方式
text-indent：首行縮進
letter-spacing：字間距
word-spacing：單詞間距
顏色半透明（CSS3新增）
文字陰影（CSS3）
?Hbuilder快捷方式
四、引入CSS樣式表
內部樣式表
行內樣式（內聯樣式）
外部樣式表
??三種樣式對比
塊級元素（block-level）
行內元素（inline-level）
行內塊元素（inline-block）
標簽模式轉換display
五、CSS復合選擇器?
交集選擇器
并集選擇器
后代選擇器
子元素選擇器
?屬性選擇器
偽元素選擇器（CSS3）
六、CSS書寫規范
空格規范
選擇器規范
屬性規范?
七、CSS背景（background）
背景圖片（image）
背景平鋪（repeat）
背景位置（position）
背景附著
背景簡寫
背景透明（CSS3）
背景縮放（CSS3）
多背景（CSS3）
凹凸文字
八、CSS三大特性
CSS層疊性
CSS繼承性
CSS優先級?
九、CSS盒子模型（重點）
盒子邊框（border）
表格的細線邊框
圓角邊框（CSS3）
內邊距（padding）
外邊距（margin）
外邊距實現盒子居中
清除元素默認外邊距
外邊距合并?
相鄰塊元素垂直外邊距合并
嵌套元素垂直外邊距合并
content寬度和高度
盒子模型布局穩定性
CSS3盒模型（CSS3新增屬性）
十、浮動（float）
普通流
浮動
浮動特性（重難點）?
清除浮動
額外標簽法?
其他方法?
一、CSS字體樣式屬性
font-size：字號
| 相對長度單位 | 說明 |
| em | 相當于當前對象內文本的字體尺寸 |
| px | 像素【最常用，推薦使用】 |
| 絕對長度單位 | 說明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 點 |
font-family：字體樣式?
p {font-family: "宋體"；／＊可以寫多個字體，用英文逗號隔開，表示找不到１字體去找２字體，等等＊／font-size: 14px;／＊ctrl＋／是注釋快捷鍵＊／color: pink; }?CSS Unicode字體
在CSS中設置字體名稱可以直接寫中文，但是在文字編碼（GB2312? ?UTF-8等）不匹配時會產生亂碼的錯誤，ｘｐ系統不支持類似微軟雅黑的中文。
解決方案一：使用英文代替。font-family：“Microsoft Yahei”；
解決方案二：在CSS中直接使用Unicode編碼字體
【建議:Unicode字體只用“宋體”和“微軟雅黑”】
font-weight：字體粗細
除了HTML中的的＜ｂ＞和＜strong＞標簽外，還可以使用CSS完成字體加粗效果，但是CSS是沒有語義的。
font-wieght屬性定義字體的粗細，屬性值有normal，bold，bolder，lighter，數字１００～９００
【一般更喜歡用數字表示，數字４００＝normal，數字７００＝bold】
strong{font-weight: normal;/* 讓標簽包裹的粗體不加粗 */ }font-style：字體風格
除了HTML中的的＜i＞和＜em＞標簽外，還可以使用CSS完成字體傾斜效果，但是CSS是沒有語義的。
normal：指定文本字體樣式為正常的字體
italic：指定文本字體樣式為斜體。對于沒有設計斜體的特殊字體，如果要使用斜體外觀將應用oblique
oblique：指定文本字體樣式為傾斜的字體。人為的使文字傾斜，而不是去選取字體中的斜體字【不常用】
em {
font-style：normal；／＊讓標簽包裹的斜體變得不傾斜， ＊／
}
font：綜合式樣式【重點】
h1 {font: italic bold 14px "microsoft yahei";/*前兩項可以省略，后兩項必須保留，順序不能改變*/ }使用Chrome調試
?二、選擇器【重點】
想要CSS樣式應用于特定的HTML元素，首先要拿到這項元素，在CSS中，執行這一任務的樣式規則的部分被稱為選擇器
標簽選擇器（元素選擇器）
標簽選擇器是指以HTML標簽為選擇器，按標簽分類，為頁面中同類型的標簽快速統一樣式，缺點是不能設計差異化樣式
標簽{屬性1:屬性值1;屬性2:屬性值2; } 元素{屬性1:屬性值1;屬性2:屬性值2; }類選擇器
?以元素為對象定義單獨或相同樣式
<head><style>h1 {color:palevioletred;}.yinshi { /* 加 “.”聲明類樣式 */color: blue;}.shenle {color: orangered;}.xinba {color: gray;}</style> </head> <body><div class="yinshi">銀時</div><!-- 此處引用類樣式 --><div class="shenle">神樂</div><div class="xinba">新八</div>CSS命名規范
類選擇器命名規范
?web前端開發規范手冊pdf下載
多類名選擇器
給標簽添加多個類名，實現多種目的選擇
<head><style>.c-blue { /* 加 “.”聲明類樣式 */color: blue;}.c-orange {color: orangered;}.c-gray {color: gray;}.font20 {font-size: 20px;}</style> </head> <body><div class="c-blue font20">銀時</div><!-- 此處引用類樣式 --><div class="c-orange">神樂</div><div class="c-gray font20">新八</div><!-- 多類名之間用空格隔開 ，此時可以既變顏色又加粗--> </body>?id選擇器
和類選擇器結合記憶
#black {color: black; } <div id="black">土方十四郎</div> <!--區別于類選擇器的“.”開始，id選擇器以“#”開頭命名，在下方標簽處引用-->類選擇器和id選擇器的區別
類選擇器可以重復多次使用，被多個標簽引用，相當于人名
id選擇器是唯一的，相當于身份證號，只允許使用一次
通配符選擇器【一般用不到，僅作了解】
通配符選擇器用“*”表示，是所有選擇器中適用范圍最廣的，能匹配頁面中所有元素，基本語法格式如下
* {屬性1:屬性值1;屬性2:屬性值2; } <head><style>* { /*星號代表所有選擇器*/color: #0000FF;font-size: 20px;} </style> </head> <body><p>銀魂</p><div>銀魂</div><strong>銀魂</strong><i>銀魂</i><span>銀魂</span><!--這是最近正在重刷銀魂的博主--> </body>偽類選擇器
傾向于給某些選擇器添加效果，如給鏈接添加效果
（1）鏈接偽類選擇器
?改變順序可能造成效果全部無法實現的后果。
<head><style>a:link {/* 未訪問的鏈接 */color: cornflowerblue;font-size: 20px;font-weight: 700;}a:visited {/* 訪問過一次的鏈接 */color: darkorchid;font-size: 20px;font-weight: 700;}a:hover {/* 鼠標移動到連接上時鏈接的變化 */color: tomato;font-size: 20px;font-weight: 700;}a:active {/* 選定的鏈接，我們按住鼠標別松開時的狀態 */color: green;font-size: 20px;font-weight: 700;}</style></head><body><div><a href="#">零元購</a></div></body>?以下是鏈接偽類選擇器的簡寫方式【最常用寫法】
<head><style>a {/* a是標簽選擇器，指所有的鏈接 */color: cornflowerblue;font-size: 20px;font-weight: 700;}a:hover {/* ：hover是鏈接偽類選擇器 */color: tomato; /* 鼠標經過，由藍色變紅色 */}</style></head><body><div><a href="#">零元購</a></div></body>（2）結構偽類選擇器
<head><style>li:first-child { /* 第一個孩子 */color: orangered;}li:last-child { /* 最后一個孩子 */color: green;}li:nth-child(3) { /* 第三個孩子，括號寫幾就是第幾個孩子 */color: mediumpurple;}</style></head><body><ul type="square"><li>長虹劍</li><li>冰魄劍</li><li>紫云劍</li><li>奔雷劍</li><li>青光劍</li><li>雨花劍</li><li>旋風劍</li></ul></body>其他用法
li:nth-child(even) {/* 可以選擇所有偶數（even）孩子標簽 */color: orange;} li:nth-child(odd) {/* 可以選擇所有奇數（odd）孩子標簽 */color: skyblue;} li:nth-child(n) {color: aqua;/* 選擇全部孩子 ，里邊還可以寫2n，3n等等*/}(3)目標偽類選擇器
target目標偽類選擇器：選擇器可用于選取當前活動的目標元素
:target {color: red; }三、CSS外觀屬性
顏色屬性
line-height:行間距
用于設置行間距，也稱行高。一般比字號大7，8個像素，即px。
p {line-height: 40px; }text-align: 水平對齊方式
center：居中
left：左對齊
righ：右對齊
text-indent：首行縮進
所有段落都會縮進，建議使用em，作為單位，1em=一個字的寬度
p {text-indent: 2em;/* 此時2em就是兩個字的寬度 */}letter-spacing：字間距
字符之間的空白，允許使用負數，默認為normal
div {letter-spacing: 2px; }word-spacing：單詞間距
對中文無效
顏色半透明（CSS3新增）
color:rgba(r,g,b,a)，a指alpha，即透明度，取值在[0,1]之間，參數不能省略
div {color: rgb(0,200,173,0.5); }/*測試下來rgb和rgba效果一樣，不知道是不是兼容度提高了，為了規范依然使用rgba*/文字陰影（CSS3）
text-shadow：水平位置，垂直位置，模糊距離，陰影顏色；【共計四個參數】前兩個參數必寫，最后兩個可以省略
h1{text-shadow: 1px 2px 4px rgba(183,23,48,0.5);/* 參數之間用“空格”隔開，而不是逗號前兩個參數必須有，后兩個可以省略 */ }?Hbuilder快捷方式
| div*10快速生成10個標簽 |
| ul>li快速生成父子類標簽 |
| div+p快速生成兄弟標簽，同一級的標簽 |
| .red+tab鍵快速生成帶類名的div |
| #red+tab快速生成帶id名的div |
| 例：.nav+.header+.main>.left+.right |
四、引入CSS樣式表
內部樣式表
內部樣式是集中將代碼卸載HTML文檔的head頭部，用style標簽定義。也可也將style標簽放在文檔任何地方。
type=“text/CSS”在HTML5中可以省略，但寫上也比較規范。
行內樣式（內聯樣式）
內聯樣式，又稱行內樣式，內嵌樣式，通過標簽的style屬性來設置元素的樣式。只適合樣式比較少的情況
<標簽名 style=“屬性1：屬性值1；屬性2：屬性值2”>? ? 內容? ?</標簽名>
外部樣式表
外部樣式奧是將所有樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽連接到HTML文檔中。【link是單標簽】
完全實現了結構與樣式分離。
<head><link rel="stylesheet" href="style.css"/> </head>?三種樣式對比
塊級元素（block-level）
每個元素通常會獨自占據一整行或者多行，可以對其設置高度，寬度，對齊屬性
常見塊級元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
?關于塊級元素的特點，要能口述?
行內元素（inline-level）
?不占獨立區域，僅靠自身大小和圖像尺寸來支撐結構。一般不可設置寬度、高度、對齊屬性。
常見行內元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
?關于行內元素的特點，要能口述??
注意：
? ? ? ? 1.只有文字才成段落，因此p標簽里不能放塊級元素，同理<h1>~<h6><dt>內都不能放其他塊級元素。
????????2.鏈接<a>里邊不能再放鏈接。
行內塊元素（inline-block）
標簽模式轉換display
五、CSS復合選擇器?
交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器。第二個為class選擇器，兩個選擇器之間不能有空格。
交集選擇器表示既...又...，使用相對較少
例如：p.one 表示的是類名為one的段落標簽
并集選擇器
如果某些選擇器定義的樣式完全相同，或者部分相同，就用并集選擇器為它們定義相同的CSS樣式 。
只要逗號隔開，所有選擇器都會執行后面的樣式。
<head> <style>p,h1,.toshi {color: aliceblue;} </style> </head><body><p>春江花月夜</p><h1>春江潮水</h1><div class="toshi">海上明月</div> </body>后代選擇器
又稱包含選擇器，用來選擇元素或者元素組的后代。
寫法是把外層標簽寫在前面，內層標簽寫在后邊，中間用空格分隔
<head><style>.songyang div {color: darkcyan;font-size: 16px;}/*只有.songyang下的div才由效果，外邊的div不變*/</style></head><body><div class="songyang"><div>坂田</div><div>桂</div><div>高杉</div></div><div>近藤</div></body>子元素選擇器
只能選擇某元素的子元素，再下一級孫子，重孫子不能選。寫法是：父級標簽 > 子級標簽，符號左右一般各留一個空格
<head><style>.nav>li{color: pink;} /*不知道為什么單獨寫這個不成功*/.nav > li > .two > li{color: black;}/*必須加上這個才能區分一二級菜單*/</style></head><body><ul class="nav"><li>一級菜單<ul class="two"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li>一級菜單<ul class="two"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li></ul></body>?屬性選擇器
<head><meta charset="utf-8"><title></title><style>a[title] {/* 屬性選擇器用中括號來表示，選出有title的 */color: #008000;}input[type=text]{color: red;/* 只有type是text的才顯示紅色 */}</style></head><body><a href="#" title="瀏覽器">Chrome</a><a href="#" title="瀏覽器">edge</a><a href="#">firefox</a><a href="#">Safari</a><a href="#">QQ</a><input type="text"value="這是一個文本框"><input type="submit"><input type="reset"></body> <head><meta charset="utf-8"><title></title><style>div[class^=font]{ /* class^=font表示以font開始 */color: deeppink;}div[class$=nav]{ /* class$=nav表示以nav結束 */color: aquamarine;}div[class*=TB]{ /* class*=TB表示TB在任意位置都行 */color: orange;}</style></head><body><div class="font12">屬性選擇器</div><div class="font12">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="pdd-nav">屬性選擇器</div><div class="jd-nav">屬性選擇器</div><div class="news-TB-heater">屬性選擇器</div><div class="news-TB-footer">屬性選擇器</div></body>偽元素選擇器（CSS3）
::first-letter，選擇文本第一行的單詞或字（如中文日文韓文）
::first-line，選擇文本第一行，不固定，根據瀏覽器窗口大小而變動
::selection，可以改變選中文本樣式，比如藍底白字變顏色變成粉色之類的
? <style>p{line-height: 35px;}::first-letter{color: aquamarine;/*英文是一個單詞，中文是一個字，日文是一個假名*/}</style></head><body><p>なまりの空(そら)【陰霾的天空】重(おも)く垂(た)れ込(こ)み【垂下凝重的幕簾】真白(ましろ)に淀(よど)んだ【沉入蒼白之中】太陽(たいよう)が砕(くだ)けて【將太陽斬碎】耳鳴(みみな)りを尖(とが)らせる【讓我大聲尖叫】</p></body>?.dome：類選擇器
first-child：偽類選擇器
first-letter：偽元素選擇器
::before 和 ::after?
<head><style>div::before{content: "門前";/* 必須和content一起使用，記得加引號“” */color: #FF0000;}div::after{content: "游過一群鴨";color: skyblue;}</style></head><body><div>大橋下</div></body>六、CSS書寫規范
空格規范
選擇器與“ { ”之間必須有空格?。
屬性名與之后的 ：之間不允許有空格，：與屬性值之間必須有空格。
舉例：
.nav a {
?? ??? ??? ??? ?color: red;
?? ??? ??? ?}
選擇器規范
當一個rule里邊包含多個選擇器時，每個選擇器聲明比需獨占一行。?
舉例：
????p,
? ? h1,
? ? .toshi {
?? ??? ??? ??? ?color: aliceblue;
?? ??? ??? ?}?
屬性規范?
屬性定義必須另起一行。
舉例：
div::after{
?? ??? ??? ?content: "游過一群鴨";
?? ??? ??? ?color: skyblue;
?? ??? ?}?
七、CSS背景（background）
背景圖片（image）
?必須引用在同一個項目下的圖片，可以不在同一個文件夾中，引用不同項目下的圖片會失敗
背景圖片更改大小只能用background-size
? div {height: 800px;width: 600px;background-color: pink;background-image: url("圖片/1.png");}?/*問題：1、地址路徑按理說不用加引號，加了反倒會引起瀏覽器兼容性問題，但是必須要加引號才能在我的瀏覽器上顯示出來*/?背景平鋪（repeat）
默認平鋪，取消平鋪要no-reprat。
背景位置（position）
語法：
background-position：length || length
background-position：position || position?
參數：
length：百分數、浮點數和單位標識組成的長度值。參閱長度單位
position：top、center、bottom、left、center、right
設置檢索對象的背景圖像位置必須先指定background-image屬性。默認為（0% 0%）。如果只指定了一個值，該值應用于橫坐標，縱坐標默認50%，如果有兩個值，第二個值應用于縱坐標。
?利用方位名詞更改圖片位置，位置默認左上角
方位名詞沒有順序，誰在前都行，如果只有一個方位詞另一個默認是center
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: right top;}??利用精確單位更改圖片位置
第一個值一定是x坐標，第二個值一定是y坐標。
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: 15px 30px;}??混合使用
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: center 30px;}?背景附著
默認是scroll
語法：
background-attachment：scroll | fixed?
參數：
scroll：背景圖像是隨對象內容滾動的
fixed：背景圖像固定
背景簡寫
和字體簡寫類似，但是順序沒有強制標準，一般建議如下
background：背景顏色 、背景圖片地址，背景平鋪，北京滾動，背景位置
background: pink url("女兒.png") no-repeat fixed center 30px;背景透明（CSS3）
語法：
background：rgba(0，0，0，0.3);
背景半透明是指盒子背景半透明，對于盒子里邊的內容不受影響。
給文字和邊框（border） 設置半透明都可以用rgba。
背景縮放（CSS3）
語法：
background-size：***px | ***% | contain | cover
一般使用px時，只更改一個值，防止縮放實真。使用%時，表示圖片整體縮小為原圖的百分之多少。
?
?cover：自動調整縮放比例，保證圖片始終填充滿背景區域，如果有溢出會被隱藏，圖片等比縮放并保證寬高同時滿足盒子大小。
contain：自動調整縮放比例，但保證圖片始終完整顯示在背景區域。只要寬度和高度有一樣曼珠盒子大小，就不再縮放。保證了圖片的完整性，不會有缺失，但是盒子會有一部分裸露，沒有背景圖片覆蓋。
多背景（CSS3）
- ?一個元素可以設置多重背景圖像
- 每組屬性之間使用逗號分隔
- 如果設置的背景圖片之間存在重疊關系，前面的背景圖片會覆蓋在后面的背景圖片之上
- 為了避免背景色將圖片給蓋住，背景色通常定義在最后一組
?
div {height: 800px;width: 700px;background: url("女兒.png") no-repeat 10px 20px/300px,url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/url(troye.jpg) no-repeat 10px bottom/300px pink;}?凹凸文字
<head><style>body {background-color: #ccc;}div {color: #CCCCCC;font: 700 80px "微軟雅黑";}div:first-child {/* text-shadow:水平位置 垂直位置 模糊距離 陰影顏色 */text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style></head><body><div ><div>我是凸起的文字</div><div class="second">我是凹下的文字</div></div> </body>此處產生了 :last-child 未成功調用問題
解決方法：兩個div必須在父類div下才能成使用 :last-child ，否則只能使用 :first-child 。
??????????????????使用時必須選擇父類下的最后一個元素。
另外：可以成功使用nth-child(n)，不必在父類標簽下
?text-decoration:通常用于給鏈接修改裝飾效果。
?使用技巧：在一行內，設定行高等于盒子高度，可以使文字垂直居中。
八、CSS三大特性
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一種能力，如果一個屬性通過兩個相同的選擇器設置到了同一個元素上，那么此時一個屬性就會將另一個屬性層疊掉，此為樣式沖突。如果出現樣式沖突，以最后的樣式為準。
1、樣式沖突，遵循就近原則。哪個樣式離著結構近，就執行哪個樣式。
2、樣式不沖突，不會層疊。
CSS繼承性
所謂繼承性就是指，書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，比如文本顏色和字號。
恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性，子元素可以繼承的父元素樣式：以text-，font-，line-這些元素開頭的，以及color屬性。
CSS優先級?
在定義CSS樣式時，經常出現兩個或更多規則應用在一個元素上，這時會出現優先級的問題。
關于CSS權重，用一套公式來計算，是衡量CSS優先級的一個標準，具體規范如下：
四個級別從左到右，一級大于一級，數位之間沒有進制，級別之間不可超越。
繼承樣式權重為0，不管父類元素權重多大，它被子類繼承時權重都為0，子元素定義的元素會覆蓋繼承樣式。
?
九、CSS盒子模型（重點）
所謂盒子模型，就是把html頁面中的元素看作是一個矩形的盒子，每個矩形都有元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
所有文檔元素（標簽）都會生成一個矩形框，我們稱之為元素框（element box)，它描述了一個文檔元素在網頁布局匯總所占的位置大小。因此，每個盒子除了有自己的大小和為之外，還影響著其他盒子的大小和位置。
盒子邊框（border）
語法：
border：border-width || border-style || border-color
邊框屬性一：設置邊框樣式（border-style）
邊框樣式用于定義頁面中的邊框風格，常用如下：
none：沒有邊框，忽略所有邊框的寬度（默認值）?
solid：邊框為單實線（最常用）
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線（用得少）
border-style，border-width，border-color，設置四邊屬性時是按照上右下左的順時針順序。
div {border-color: red blue springgreen black;border-style: dashed double solid dotted;border-width: 1px 5px 10px 30px;}一起寫的時候中間用空格隔開。
div:nth-child(4) {border-top: 3px solid orangered;/*上邊框，寬度 樣式 顏色*/border-bottom: blueviolet 3px solid;/*下邊框 顏色 寬度 樣式*//*樣式順序不影響表現*/}?border屬性不繼承，可以繼承的屬性回看關于繼承的部分。
cellspacing和cellpadding的區別：
前者為兩個單元格之間的距離，后者為單元格內文字與邊框的距離。
cellspacing表示表格各單元格之間的空隙，參數值是數字
cellpadding表示表格內文字和表格邊框的距離
兩個屬性都應用在<table>標簽內部
表格的細線邊框
?table {
???????????border-collapse: collapse;
}
?border-collapse: collapse表示邊框合并到一起。
圓角邊框（CSS3）
語法：
border-radius：左上角? 右上角? 右下角? 左下角；
順時針順序
<style>div {height: 400px;width: 400px;border: 1px solid red;}div:first-child {border-radius: 10px;/* 一個數值表示四個角都是相同的10px */}div:nth-child(2) {border-radius: 50%;/*取寬度和高度的50%，會變成一個圓形*/}div:nth-child(3) {border-radius: 10px 40px;/* 取對角線，左上角和右下角是10px，右上角和左下角是40px */}div:nth-child(4) {border-radius: 10px 40px 80px;/* 左上角10 右上角和左下角40 右下角80 */}</style>內邊距（padding）
padding屬性用于設置內邊距，是指內容與邊框之間的距離。
padding后跟的數值個數不同表達意思也不同，padding兩個值代表的方向要和radius分開
| 數值個數 | 表達意思（邊距都指內邊距） |
| 1個值 | 上下左右邊距 |
| 2個值 | 前一個代表上下邊距，后一個代表左右邊距 |
| 3個值 | 上邊距，左右邊距，下邊距 |
| 4個值 | 上邊距，右邊距，下邊距，左邊距 |
外邊距（margin）
margin屬性用于設置外邊距。設置外邊距會在元素之間創建“空白”，這段空白通常不能用來放置其他內容。
margin：上外邊距? 右外邊距? 下外邊距? 左外邊距?
取值順序和內邊距（padding）一樣。
外邊距實現盒子居中
讓一個盒子實現水平居中需要滿足兩個條件?：
1、必須是塊級元素
2、盒子必須指定了寬度（width）
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
header {width: 900px;height: 120px;background-color: black;margin: 0 auto;/* 上下不管，左右是auto就能居中 */}實際案例中，制作導航欄高度應選擇奇數高度，行高用偶數就會出現邊框像素留白的問題，使用a:hover時行內塊不能全部變色，上下邊緣會有1px的空白區域
注意：
“margin:0 auto;” 對于inline-block不起作用。
即使可以首先使用數值指定“inline-block”，使用“margin：0 auto;”居中也不起作用。
“text-align：center;”不會使父元素成為選擇器
“text-align：center;”的基本規則是“selector是父元素”。
如果要將其居中，則必須創建父元素。?
在行內塊元素中使用margin：0 auto時，應同時對其父元素使用text-aline：center才能實現居中?
插入圖片<img>也可也看作一個盒子，可以用margin和padding更改位置，但是背景圖片更改位置只能用background-position。
一般情況下背景圖片適合做一些小圖標使用，產品展示類用的就是插入圖片
清除元素默認外邊距
* {
? ? ? padding: 0;? ? ? ? ?/*清除內邊距*/
? ? ? margin: 0;? ? ? ? ? /*清除外邊距*/
}
行內元素只有左右外邊距，沒有上下外邊距。我們盡量不要給行內元素指定上下外邊距。
外邊距合并?
使用margin定義塊級元素的垂直外邊距時沒可能會出現外邊距的合并（也稱外邊距的塌陷）。?
相鄰塊元素垂直外邊距合并
?
解決方法：
只設定一個margin值?
嵌套元素垂直外邊距合并
?解決方案：
①為父元素定義1像素上邊框（可以用透明邊框，transparent）
②為父元素定義1像素上內邊距（padding）
③為父元素添加overflow：hidden
content寬度和高度
?使用寬度屬性width和高度屬性height可以對盒子大小進行控制。
width和height屬性值可以為不同單位的數值或相對于父元素的百分比，但最常用的還是像素px
/*外和尺寸計算（元素空間尺寸）*/
元素空間高度=? height? +? padding? ＋? border? +? margin
元素空間寬度=? width? +? padding? +? border? +? margin
/*內盒尺寸計算（元素大小）*/
元素內容高度=? height? +? padding? +? border
元素內容寬度=??width? +? padding? +? border
注意：
1、寬度屬性width和高度屬性height僅適用于塊級元素，對于行內元素無效（img和input標簽除外）
2、計算盒子模型總高度時，應該考慮上下兩個盒子垂直外邊距合并的情況。
盒子模型布局穩定性
根據穩定性區分使用優先級
width? ?>? ?padding? ?>? ?margin
?原因：
1、margin會有外邊距合并問題，所以最后使用
2、padding會影響盒子大小，需要進行加減計算后使用，比較麻煩
3、width沒有問題，經常使用寬度 / 高度剩余法來做。
CSS3盒模型（CSS3新增屬性）
CSS3中可以用box-sizing 來指定和模型，可指定為content-box，border-box，這樣計算盒子大小的方式會分為兩種情況
1、content-box：傳統盒子模型，盒子大小為：width + padding + border。content-box為默認值，維持W3C的標準Box Mode
2、border-box：CSS3新增盒子模型，盒子大小為：width，就是說padding和border是包含在width里邊的，不會撐大盒子。
十、浮動（float）
普通流
?簡單理解就是傳統div盒子，行內元素啊，塊級元素啊，行內塊元素的，就是普通流，也叫標準流
浮動
元素浮動是指設置了浮動屬性的元素會脫離標準流控制，也就是飄起來
語法
選擇器 { float：屬性值；}
| 屬性值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動（默認） |
浮動元素首先找離自己最近的父元素對齊（左上角，或右上角對齊，取決于left和right），但是不會超過padding和border，只靠近內測對齊?
浮動特性（重難點）?
1、浮動脫標（脫離標準流），不占位置，會影響標準流。浮動只會左右浮動
2、浮動的盒子不再保留原先的位置
3、?如果多個盒子都設置了浮動，則它們會按照屬性值一行內顯示并且頂端對齊排列。
?注意： 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。
4、浮動元素會具有行內塊元素特性?
- 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據內容來決定
- 浮動的盒子中間是沒有縫隙的，是緊挨著一起的
- 行內元素同理
浮動常常和父級標準流一起使用，即標準流父盒子內是浮動的子盒子?
?一個元素浮動了，理論上其余的兄弟元素也要浮動。
如果不浮動會出問題
浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流.
清除浮動
清除浮動本質：解決父級元素因為子元素浮動引起的內部高度為0的問題。【本來子盒子是可以把父親撐開的，但是浮動相當于飄起來，沒法撐開了，父親如果不設置高度，高度就會變成0】
清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。
清除浮動語法
選擇器{clear:屬性值;}
| 屬性值 | 描述 |
| left???????? | 清除左側浮動的影響 |
| right | 清除右側浮動的影響 |
| both | 同時清除 |
?我們實際工作中， 幾乎只用 clear: both;
額外標簽法?
額外標簽法也稱為隔墻法，是 W3C 推薦的做法。?
額外標簽法會在浮動元素末尾添加一個空的標簽，例如 <div style=”clear:both”></div>?
注意： 要求這個新的空標簽必須是塊級元素。?
其他方法?
1、父級添加 overflow 屬性
????????給父級添加 overflow 屬性，將其屬性值設置為 hidden、 auto 或 scroll 。
2、父級添加after偽元素
?????????:after 方式是額外標簽法的升級版。也是給父元素添加
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; }3、 父級添加雙偽元素
?????????也是給給父元素添加
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }總結
以上是生活随笔為你收集整理的黑马程序员pink老师_CSS学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [软技能] 现如今面对如层出不穷的类库
- 下一篇： [css] 你有用过CSS预处理器吗？