當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

黑马程序员pink老师_CSS学习笔记

發(fā)布時間：2023/12/9 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了黑马程序员pink老师_CSS学习笔记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

關(guān)于CSS具體屬性：CSS參考手冊網(wǎng)址

一、CSS字體樣式屬性

font-size：字號

font-family：字體樣式?

?CSS　Unicode字體

font-weight：字體粗細

font-style：字體風格

?二、選擇器【重點】

標簽選擇器（元素選擇器）

類選擇器

CSS命名規(guī)范

多類名選擇器

?id選擇器

通配符選擇器【一般用不到，僅作了解】

偽類選擇器

（1）鏈接偽類選擇器

（2）結(jié)構(gòu)偽類選擇器

(3)目標偽類選擇器

三、CSS外觀屬性

顏色屬性

line-height:行間距

text-align: 水平對齊方式

text-indent：首行縮進

letter-spacing：字間距

word-spacing：單詞間距

顏色半透明（CSS3新增）

文字陰影（CSS3）

?Hbuilder快捷方式

四、引入CSS樣式表

內(nèi)部樣式表

行內(nèi)樣式（內(nèi)聯(lián)樣式）

外部樣式表

??三種樣式對比

塊級元素（block-level）

行內(nèi)元素（inline-level）

行內(nèi)塊元素（inline-block）

標簽模式轉(zhuǎn)換display

五、CSS復合選擇器?

交集選擇器

并集選擇器

后代選擇器

子元素選擇器

?屬性選擇器

偽元素選擇器（CSS3）

六、CSS書寫規(guī)范

空格規(guī)范

選擇器規(guī)范

屬性規(guī)范?

七、CSS背景（background）

背景圖片（image）

背景平鋪（repeat）

背景位置（position）

背景附著

背景簡寫

背景透明（CSS3）

背景縮放（CSS3）

多背景（CSS3）

凹凸文字

八、CSS三大特性

CSS層疊性

CSS繼承性

CSS優(yōu)先級?

九、CSS盒子模型（重點）

盒子邊框（border）

表格的細線邊框

圓角邊框（CSS3）

內(nèi)邊距（padding）

外邊距（margin）

外邊距實現(xiàn)盒子居中

清除元素默認外邊距

外邊距合并?

相鄰塊元素垂直外邊距合并

嵌套元素垂直外邊距合并

content寬度和高度

盒子模型布局穩(wěn)定性

CSS3盒模型（CSS3新增屬性）

十、浮動（float）

普通流

浮動

浮動特性（重難點）?

清除浮動

額外標簽法?

其他方法?

一、CSS字體樣式屬性

font-size：字號

相對長度單位	說明
em	相當于當前對象內(nèi)文本的字體尺寸
px	像素【最常用，推薦使用】
絕對長度單位	說明
in	英寸
cm	厘米
mm	毫米
pt	點

font-family：字體樣式?

p {font-family: "宋體"；／＊可以寫多個字體，用英文逗號隔開，表示找不到１字體去找２字體，等等＊／font-size: 14px;／＊ctrl＋／是注釋快捷鍵＊／color: pink; }

?CSS　Unicode字體

在CSS中設(shè)置字體名稱可以直接寫中文，但是在文字編碼（GB2312? ?UTF-8等）不匹配時會產(chǎn)生亂碼的錯誤，ｘｐ系統(tǒng)不支持類似微軟雅黑的中文。

解決方案一：使用英文代替。font-family：“Microsoft　Yahei”；

解決方案二：在CSS中直接使用Unicode編碼字體

【建議:Unicode字體只用“宋體”和“微軟雅黑”】

font-weight：字體粗細

除了HTML中的的＜ｂ＞和＜strong＞標簽外，還可以使用CSS完成字體加粗效果，但是CSS是沒有語義的。

font-wieght屬性定義字體的粗細，屬性值有normal，bold，bolder，lighter，數(shù)字１００～９００

【一般更喜歡用數(shù)字表示，數(shù)字４００＝normal，數(shù)字７００＝bold】

strong{font-weight: normal;/* 讓標簽包裹的粗體不加粗 */ }

font-style：字體風格

除了HTML中的的＜i＞和＜em＞標簽外，還可以使用CSS完成字體傾斜效果，但是CSS是沒有語義的。

normal：指定文本字體樣式為正常的字體

italic：指定文本字體樣式為斜體。對于沒有設(shè)計斜體的特殊字體，如果要使用斜體外觀將應用oblique

oblique：指定文本字體樣式為傾斜的字體。人為的使文字傾斜，而不是去選取字體中的斜體字【不常用】

em {
　　font-style：normal；／＊讓標簽包裹的斜體變得不傾斜，　＊／
}

font：綜合式樣式【重點】

h1 {font: italic bold 14px "microsoft yahei";/*前兩項可以省略，后兩項必須保留，順序不能改變*/ }

使用Chrome調(diào)試

?二、選擇器【重點】

想要CSS樣式應用于特定的HTML元素，首先要拿到這項元素，在CSS中，執(zhí)行這一任務的樣式規(guī)則的部分被稱為選擇器

標簽選擇器（元素選擇器）

標簽選擇器是指以HTML標簽為選擇器，按標簽分類，為頁面中同類型的標簽快速統(tǒng)一樣式，缺點是不能設(shè)計差異化樣式

標簽{屬性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命名規(guī)范

類選擇器命名規(guī)范

?web前端開發(fā)規(guī)范手冊pdf下載

多類名選擇器

給標簽添加多個類名，實現(xiàn)多種目的選擇

<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選擇器

和類選擇器結(jié)合記憶

#black {color: black; } <div id="black">土方十四郎</div>

類選擇器和id選擇器的區(qū)別

類選擇器可以重復多次使用，被多個標簽引用，相當于人名

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）鏈接偽類選擇器

?改變順序可能造成效果全部無法實現(xiàn)的后果。

<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 {/* 選定的鏈接，我們按住鼠標別松開時的狀態(tài) */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; /* 鼠標經(jīng)過，由藍色變紅色 */}</style></head><body><div><a href="#">零元購</a></div></body>

（2）結(jié)構(gòu)偽類選擇器

<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) {/* 可以選擇所有偶數(shù)（even）孩子標簽 */color: orange;} li:nth-child(odd) {/* 可以選擇所有奇數(shù)（odd）孩子標簽 */color: skyblue;} li:nth-child(n) {color: aqua;/* 選擇全部孩子，里邊還可以寫2n，3n等等*/}

(3)目標偽類選擇器

target目標偽類選擇器：選擇器可用于選取當前活動的目標元素

:target {color: red; }

三、CSS外觀屬性

顏色屬性

line-height:行間距

用于設(shè)置行間距，也稱行高。一般比字號大7，8個像素，即px。

p {line-height: 40px; }

text-align: 水平對齊方式

center：居中

left：左對齊

righ：右對齊

text-indent：首行縮進

所有段落都會縮進，建議使用em，作為單位，1em=一個字的寬度

p {text-indent: 2em;/* 此時2em就是兩個字的寬度 */}

letter-spacing：字間距

字符之間的空白，允許使用負數(shù)，默認為normal

div {letter-spacing: 2px; }

word-spacing：單詞間距

對中文無效

顏色半透明（CSS3新增）

color:rgba(r,g,b,a)，a指alpha，即透明度，取值在[0,1]之間，參數(shù)不能省略

div {color: rgb(0,200,173,0.5); }/*測試下來rgb和rgba效果一樣，不知道是不是兼容度提高了，為了規(guī)范依然使用rgba*/

文字陰影（CSS3）

text-shadow：水平位置，垂直位置，模糊距離，陰影顏色；【共計四個參數(shù)】前兩個參數(shù)必寫，最后兩個可以省略

h1{text-shadow: 1px 2px 4px rgba(183,23,48,0.5);/* 參數(shù)之間用“空格”隔開，而不是逗號前兩個參數(shù)必須有，后兩個可以省略 */ }

?Hbuilder快捷方式

div*10快速生成10個標簽

ul>li快速生成父子類標簽

div+p快速生成兄弟標簽，同一級的標簽

.red+tab鍵快速生成帶類名的div

#red+tab快速生成帶id名的div

例：.nav+.header+.main>.left+.right

四、引入CSS樣式表

內(nèi)部樣式表

內(nèi)部樣式是集中將代碼卸載HTML文檔的head頭部，用style標簽定義。也可也將style標簽放在文檔任何地方。

type=“text/CSS”在HTML5中可以省略，但寫上也比較規(guī)范。

行內(nèi)樣式（內(nèi)聯(lián)樣式）

內(nèi)聯(lián)樣式，又稱行內(nèi)樣式，內(nèi)嵌樣式，通過標簽的style屬性來設(shè)置元素的樣式。只適合樣式比較少的情況

<標簽名 style=“屬性1：屬性值1；屬性2：屬性值2”>? ? 內(nèi)容? ?</標簽名>

外部樣式表

外部樣式奧是將所有樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽連接到HTML文檔中。【link是單標簽】

完全實現(xiàn)了結(jié)構(gòu)與樣式分離。

?三種樣式對比

塊級元素（block-level）

每個元素通常會獨自占據(jù)一整行或者多行，可以對其設(shè)置高度，寬度，對齊屬性

常見塊級元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

?關(guān)于塊級元素的特點，要能口述?

行內(nèi)元素（inline-level）

?不占獨立區(qū)域，僅靠自身大小和圖像尺寸來支撐結(jié)構(gòu)。一般不可設(shè)置寬度、高度、對齊屬性。

常見行內(nèi)元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

?關(guān)于行內(nèi)元素的特點，要能口述??

注意：

? ? ? ? 1.只有文字才成段落，因此p標簽里不能放塊級元素，同理<h1>~<h6><dt>內(nèi)都不能放其他塊級元素。

????????2.鏈接<a>里邊不能再放鏈接。

行內(nèi)塊元素（inline-block）

標簽模式轉(zhuǎn)換display

五、CSS復合選擇器?

交集選擇器

交集選擇器由兩個選擇器構(gòu)成，其中第一個為標簽選擇器。第二個為class選擇器，兩個選擇器之間不能有空格。

交集選擇器表示既...又...，使用相對較少

例如：p.one 表示的是類名為one的段落標簽

并集選擇器

如果某些選擇器定義的樣式完全相同，或者部分相同，就用并集選擇器為它們定義相同的CSS樣式。

只要逗號隔開，所有選擇器都會執(zhí)行后面的樣式。

<head> <style>p,h1,.toshi {color: aliceblue;} </style> </head><body><p>春江花月夜</p><h1>春江潮水</h1><div class="toshi">海上明月</div> </body>

后代選擇器

又稱包含選擇器，用來選擇元素或者元素組的后代。

寫法是把外層標簽寫在前面，內(nèi)層標簽寫在后邊，中間用空格分隔

<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;}/*必須加上這個才能區(qū)分一二級菜單*/</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結(jié)束 */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，選擇文本第一行，不固定，根據(jù)瀏覽器窗口大小而變動

::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書寫規(guī)范

空格規(guī)范

選擇器與“ { ”之間必須有空格?。

屬性名與之后的：之間不允許有空格，：與屬性值之間必須有空格。

舉例：

.nav a {
?? ??? ??? ??? ?color: red;
?? ??? ??? ?}

選擇器規(guī)范

當一個rule里邊包含多個選擇器時，每個選擇器聲明比需獨占一行。?

舉例：

????p,
? ? h1,
? ? .toshi {
?? ??? ??? ??? ?color: aliceblue;
?? ??? ??? ?}?

屬性規(guī)范?

屬性定義必須另起一行。

舉例：

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?

參數(shù)：

length：百分數(shù)、浮點數(shù)和單位標識組成的長度值。參閱長度單位

position：top、center、bottom、left、center、right

設(shè)置檢索對象的背景圖像位置必須先指定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?

參數(shù)：

scroll：背景圖像是隨對象內(nèi)容滾動的

fixed：背景圖像固定

背景簡寫

和字體簡寫類似，但是順序沒有強制標準，一般建議如下

background：背景顏色、背景圖片地址，背景平鋪，北京滾動，背景位置

background: pink url("女兒.png") no-repeat fixed center 30px;

背景透明（CSS3）

語法：

background：rgba(0，0，0，0.3);

背景半透明是指盒子背景半透明，對于盒子里邊的內(nèi)容不受影響。

給文字和邊框（border）設(shè)置半透明都可以用rgba。

背景縮放（CSS3）

語法：

background-size：***px | ***% | contain | cover

一般使用px時，只更改一個值，防止縮放實真。使用%時，表示圖片整體縮小為原圖的百分之多少。

?cover：自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如果有溢出會被隱藏，圖片等比縮放并保證寬高同時滿足盒子大小。

contain：自動調(diào)整縮放比例，但保證圖片始終完整顯示在背景區(qū)域。只要寬度和高度有一樣曼珠盒子大小，就不再縮放。保證了圖片的完整性，不會有缺失，但是盒子會有一部分裸露，沒有背景圖片覆蓋。

多背景（CSS3）

?一個元素可以設(shè)置多重背景圖像
每組屬性之間使用逗號分隔
如果設(shè)置的背景圖片之間存在重疊關(guān)系，前面的背景圖片會覆蓋在后面的背景圖片之上
為了避免背景色將圖片給蓋住，背景色通常定義在最后一組

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>

此處產(chǎn)生了 :last-child 未成功調(diào)用問題

解決方法：兩個div必須在父類div下才能成使用 :last-child ，否則只能使用 :first-child 。

??????????????????使用時必須選擇父類下的最后一個元素。

另外：可以成功使用nth-child(n)，不必在父類標簽下

?text-decoration:通常用于給鏈接修改裝飾效果。

?使用技巧：在一行內(nèi)，設(shè)定行高等于盒子高度，可以使文字垂直居中。

八、CSS三大特性

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理沖突的一種能力，如果一個屬性通過兩個相同的選擇器設(shè)置到了同一個元素上，那么此時一個屬性就會將另一個屬性層疊掉，此為樣式?jīng)_突。如果出現(xiàn)樣式?jīng)_突，以最后的樣式為準。

1、樣式?jīng)_突，遵循就近原則。哪個樣式離著結(jié)構(gòu)近，就執(zhí)行哪個樣式。

2、樣式不沖突，不會層疊。

CSS繼承性

所謂繼承性就是指，書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，比如文本顏色和字號。

恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性，子元素可以繼承的父元素樣式：以text-，font-，line-這些元素開頭的，以及color屬性。

CSS優(yōu)先級?

在定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在一個元素上，這時會出現(xiàn)優(yōu)先級的問題。

關(guān)于CSS權(quán)重，用一套公式來計算，是衡量CSS優(yōu)先級的一個標準，具體規(guī)范如下：

四個級別從左到右，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。

繼承樣式權(quán)重為0，不管父類元素權(quán)重多大，它被子類繼承時權(quán)重都為0，子元素定義的元素會覆蓋繼承樣式。

九、CSS盒子模型（重點）

所謂盒子模型，就是把html頁面中的元素看作是一個矩形的盒子，每個矩形都有元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

所有文檔元素（標簽）都會生成一個矩形框，我們稱之為元素框（element box)，它描述了一個文檔元素在網(wǎng)頁布局匯總所占的位置大小。因此，每個盒子除了有自己的大小和為之外，還影響著其他盒子的大小和位置。

盒子邊框（border）

語法：

border：border-width || border-style || border-color

邊框?qū)傩砸?#xff1a;設(shè)置邊框樣式（border-style）

邊框樣式用于定義頁面中的邊框風格，常用如下：

none：沒有邊框，忽略所有邊框的寬度（默認值）?

solid：邊框為單實線（最常用）

dashed：邊框為虛線

dotted：邊框為點線

double：邊框為雙實線（用得少）

border-style，border-width，border-color，設(shè)置四邊屬性時是按照上右下左的順時針順序。

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;/*下邊框顏色寬度樣式*//*樣式順序不影響表現(xiàn)*/}

?border屬性不繼承，可以繼承的屬性回看關(guān)于繼承的部分。

cellspacing和cellpadding的區(qū)別：

前者為兩個單元格之間的距離，后者為單元格內(nèi)文字與邊框的距離。

cellspacing表示表格各單元格之間的空隙，參數(shù)值是數(shù)字

cellpadding表示表格內(nèi)文字和表格邊框的距離

兩個屬性都應用在<table>標簽內(nèi)部

表格的細線邊框

?table {

???????????border-collapse: collapse;

}

?border-collapse: collapse表示邊框合并到一起。

圓角邊框（CSS3）

語法：

border-radius：左上角? 右上角? 右下角? 左下角；

順時針順序

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距，是指內(nèi)容與邊框之間的距離。

padding后跟的數(shù)值個數(shù)不同表達意思也不同，padding兩個值代表的方向要和radius分開

數(shù)值個數(shù)	表達意思（邊距都指內(nèi)邊距）
1個值	上下左右邊距
2個值	前一個代表上下邊距，后一個代表左右邊距
3個值	上邊距，左右邊距，下邊距
4個值	上邊距，右邊距，下邊距，左邊距

外邊距（margin）

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會在元素之間創(chuàng)建“空白”，這段空白通常不能用來放置其他內(nèi)容。

margin：上外邊距? 右外邊距? 下外邊距? 左外邊距?

取值順序和內(nèi)邊距（padding）一樣。

外邊距實現(xiàn)盒子居中

讓一個盒子實現(xiàn)水平居中需要滿足兩個條件?：

1、必須是塊級元素

2、盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto，就可使塊級元素水平居中。

header {width: 900px;height: 120px;background-color: black;margin: 0 auto;/* 上下不管，左右是auto就能居中 */}

實際案例中，制作導航欄高度應選擇奇數(shù)高度，行高用偶數(shù)就會出現(xiàn)邊框像素留白的問題，使用a:hover時行內(nèi)塊不能全部變色，上下邊緣會有1px的空白區(qū)域

注意：

“margin:0 auto;” 對于inline-block不起作用。
即使可以首先使用數(shù)值指定“inline-block”，使用“margin：0 auto;”居中也不起作用。
“text-align：center;”不會使父元素成為選擇器
“text-align：center;”的基本規(guī)則是“selector是父元素”。
如果要將其居中，則必須創(chuàng)建父元素。?

在行內(nèi)塊元素中使用margin：0 auto時，應同時對其父元素使用text-aline：center才能實現(xiàn)居中?

插入圖片<img>也可也看作一個盒子，可以用margin和padding更改位置，但是背景圖片更改位置只能用background-position。

一般情況下背景圖片適合做一些小圖標使用，產(chǎn)品展示類用的就是插入圖片

清除元素默認外邊距

* {

? ? ? padding: 0;? ? ? ? ?/*清除內(nèi)邊距*/

? ? ? margin: 0;? ? ? ? ? /*清除外邊距*/

}

行內(nèi)元素只有左右外邊距，沒有上下外邊距。我們盡量不要給行內(nèi)元素指定上下外邊距。

外邊距合并?

使用margin定義塊級元素的垂直外邊距時沒可能會出現(xiàn)外邊距的合并（也稱外邊距的塌陷）。?

相鄰塊元素垂直外邊距合并

解決方法：

只設(shè)定一個margin值?

嵌套元素垂直外邊距合并

?解決方案：

①為父元素定義1像素上邊框（可以用透明邊框，transparent）

②為父元素定義1像素上內(nèi)邊距（padding）

③為父元素添加overflow：hidden

content寬度和高度

?使用寬度屬性width和高度屬性height可以對盒子大小進行控制。

width和height屬性值可以為不同單位的數(shù)值或相對于父元素的百分比，但最常用的還是像素px

/*外和尺寸計算（元素空間尺寸）*/

元素空間高度=? height? +? padding? ＋? border? +? margin

元素空間寬度=? width? +? padding? +? border? +? margin

/*內(nèi)盒尺寸計算（元素大小）*/

元素內(nèi)容高度=? height? +? padding? +? border

元素內(nèi)容寬度=??width? +? padding? +? border

注意：

1、寬度屬性width和高度屬性height僅適用于塊級元素，對于行內(nèi)元素無效（img和input標簽除外）

2、計算盒子模型總高度時，應該考慮上下兩個盒子垂直外邊距合并的情況。

盒子模型布局穩(wěn)定性

根據(jù)穩(wěn)定性區(qū)分使用優(yōu)先級

width? ?>? ?padding? ?>? ?margin

?原因：

1、margin會有外邊距合并問題，所以最后使用

2、padding會影響盒子大小，需要進行加減計算后使用，比較麻煩

3、width沒有問題，經(jīng)常使用寬度 / 高度剩余法來做。

CSS3盒模型（CSS3新增屬性）

CSS3中可以用box-sizing 來指定和模型，可指定為content-box，border-box，這樣計算盒子大小的方式會分為兩種情況

1、content-box：傳統(tǒng)盒子模型，盒子大小為：width + padding + border。content-box為默認值，維持W3C的標準Box Mode

2、border-box：CSS3新增盒子模型，盒子大小為：width，就是說padding和border是包含在width里邊的，不會撐大盒子。

十、浮動（float）

普通流

?簡單理解就是傳統(tǒng)div盒子，行內(nèi)元素啊，塊級元素啊，行內(nèi)塊元素的，就是普通流，也叫標準流

浮動

元素浮動是指設(shè)置了浮動屬性的元素會脫離標準流控制，也就是飄起來

語法

選擇器 { float：屬性值；}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認）

浮動元素首先找離自己最近的父元素對齊（左上角，或右上角對齊，取決于left和right），但是不會超過padding和border，只靠近內(nèi)測對齊?

浮動特性（重難點）?

1、浮動脫標（脫離標準流），不占位置，會影響標準流。浮動只會左右浮動

2、浮動的盒子不再保留原先的位置

3、?如果多個盒子都設(shè)置了浮動，則它們會按照屬性值一行內(nèi)顯示并且頂端對齊排列。

?注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。

4、浮動元素會具有行內(nèi)塊元素特性?

如果塊級盒子沒有設(shè)置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據(jù)內(nèi)容來決定
浮動的盒子中間是沒有縫隙的，是緊挨著一起的
行內(nèi)元素同理

浮動常常和父級標準流一起使用，即標準流父盒子內(nèi)是浮動的子盒子?

?一個元素浮動了，理論上其余的兄弟元素也要浮動。
如果不浮動會出問題
浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流.

清除浮動

清除浮動本質(zhì)：解決父級元素因為子元素浮動引起的內(nèi)部高度為0的問題。【本來子盒子是可以把父親撐開的，但是浮動相當于飄起來，沒法撐開了，父親如果不設(shè)置高度，高度就會變成0】

清除浮動之后，父級就會根據(jù)浮動的子盒子自動檢測高度。

清除浮動語法

選擇器{clear:屬性值;}

屬性值	描述
left????????	清除左側(cè)浮動的影響
right	清除右側(cè)浮動的影響
both	同時清除

?我們實際工作中，幾乎只用 clear: both;

額外標簽法?

額外標簽法也稱為隔墻法，是 W3C 推薦的做法。?

額外標簽法會在浮動元素末尾添加一個空的標簽，例如 <div style=”clear:both”></div>?

注意：要求這個新的空標簽必須是塊級元素。?

其他方法?

1、父級添加 overflow 屬性

????????給父級添加 overflow 屬性，將其屬性值設(shè)置為 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; }

總結(jié)

以上是生活随笔為你收集整理的黑马程序员pink老师_CSS学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [软技能] 现如今面对如层出不穷的类库
下一篇： CSS 基本样式

CSS

黑马程序员pink老师_CSS学习笔记

一、CSS字體樣式屬性

font-size：字號

font-family：字體樣式?

?CSS Unicode字體

font-weight：字體粗細

font-style：字體風格

?二、選擇器【重點】

標簽選擇器（元素選擇器）

類選擇器

CSS命名規(guī)范

多類名選擇器

?id選擇器

通配符選擇器【一般用不到，僅作了解】

偽類選擇器

（1）鏈接偽類選擇器

（2）結(jié)構(gòu)偽類選擇器

(3)目標偽類選擇器

三、CSS外觀屬性

顏色屬性

line-height:行間距

text-align: 水平對齊方式

text-indent：首行縮進

letter-spacing：字間距

word-spacing：單詞間距

顏色半透明（CSS3新增）

文字陰影（CSS3）

?Hbuilder快捷方式

四、引入CSS樣式表

內(nèi)部樣式表

行內(nèi)樣式（內(nèi)聯(lián)樣式）

外部樣式表

?三種樣式對比

塊級元素（block-level）

行內(nèi)元素（inline-level）

行內(nèi)塊元素（inline-block）

標簽模式轉(zhuǎn)換display

五、CSS復合選擇器?

交集選擇器

并集選擇器

后代選擇器

子元素選擇器

?屬性選擇器

偽元素選擇器（CSS3）

六、CSS書寫規(guī)范

空格規(guī)范

選擇器規(guī)范

屬性規(guī)范?

七、CSS背景（background）

背景圖片（image）

背景平鋪（repeat）

背景位置（position）

背景附著

背景簡寫

背景透明（CSS3）

背景縮放（CSS3）

多背景（CSS3）

凹凸文字

八、CSS三大特性

CSS層疊性

CSS繼承性

CSS優(yōu)先級?

九、CSS盒子模型（重點）

盒子邊框（border）

表格的細線邊框

圓角邊框（CSS3）

內(nèi)邊距（padding）

外邊距（margin）

外邊距實現(xiàn)盒子居中

清除元素默認外邊距

外邊距合并?

相鄰塊元素垂直外邊距合并

嵌套元素垂直外邊距合并

content寬度和高度

盒子模型布局穩(wěn)定性

CSS3盒模型（CSS3新增屬性）

十、浮動（float）

普通流

浮動

?CSS　Unicode字體