CSS基础班笔记(二)
web前端劍法之css
??web前端劍法之css
地址
??CSS基礎(chǔ)班筆記(一)
https://blog.csdn.net/Augenstern_QXL/article/details/115560532
??CSS基礎(chǔ)班筆記(二)
https://blog.csdn.net/Augenstern_QXL/article/details/115560502
??CSS基礎(chǔ)班筆記(三)
https://blog.csdn.net/Augenstern_QXL/article/details/115726577
??CSS進(jìn)階班筆記(四)
https://blog.csdn.net/Augenstern_QXL/article/details/119172527
??CSS進(jìn)階班筆記(五)
https://blog.csdn.net/Augenstern_QXL/article/details/120374974
目錄總覽
1.CSS三大特性??
1.1、層疊性??
- 相同選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋另一個(gè)沖突的樣式。
- 層疊性主要解決樣式?jīng)_突的問(wèn)題
- 層疊性原則：
- 樣式?jīng)_突，遵循的原則是就近原則
1.2、繼承性??
- CSS中的繼承：子標(biāo)簽會(huì)繼承父標(biāo)簽里面的某些樣式
- 如文本顏色和字號(hào)等
特殊： 行高的繼承
body {font:12px/1.5 Microsoft YaHei }- 1.5的意思：讓里面所有的子元素的行高是當(dāng)前文字大小的1.5倍
1.3、優(yōu)先級(jí)??
– 當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生
<head> <style> div{color:pink;}.text {color:red;} </style> </head> <body><div class="text">你笑起來(lái)真好看</div> </body>- 選擇器相同，則執(zhí)行層疊性
- 選擇器不同，則按權(quán)重
選擇器
權(quán)重
繼承或者 *
0，0，0，0
元素選擇器（標(biāo)簽選擇器）
0，0，0，1
類選擇器，偽類選擇器
0，0，1，0
ID選擇器
0，1，0，0
行內(nèi)樣式style=""
1，0，0，0
！important重要的
無(wú)窮大
-
類選擇器權(quán)重為10
-
偽類選擇器權(quán)重為10
-
ID選擇器權(quán)重為100
1.4、優(yōu)先級(jí)注意點(diǎn)??
- 等級(jí)判斷是從左到右，如果某一位數(shù)值相同，則判斷下一位數(shù)值
- 繼承的權(quán)重是0
- 權(quán)重可以疊加，但是永遠(yuǎn)不會(huì)有進(jìn)位
1.5、權(quán)重的疊加??
-
權(quán)重疊加：如果是復(fù)合選擇器，則會(huì)有權(quán)重的疊加，需要計(jì)算權(quán)重
2.盒子模型??
頁(yè)面布局要學(xué)習(xí)三大核心
- 盒子模型
- 浮動(dòng)
- 定位
盒子模型的組成：
- border(邊框)
- content(內(nèi)容)
- padding(內(nèi)邊距)
- margin(外邊距)
2.1邊框border??
-
CSS 邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色
-
邊框由三部分組成：邊框?qū)挾?#xff08;粗細(xì)） 邊框樣式 邊框顏色
border : borde-width || border-style || border-color
屬性
作用
border-width
定義邊框粗細(xì)，單位是px
border-style
邊框的樣式
border-color
邊框顏色
2.1.1、border-style??
邊框樣式 border-style可以設(shè)置如下值：
邊框簡(jiǎn)寫：沒(méi)有順序
border : 1px soilid red;邊框分開(kāi)寫法：
/*只設(shè)定上邊框，其余同理*/ border-top: 1px solid red;2.1.2、border-collapse
-
border-collapse 屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框
-
border-coppapse 表格的細(xì)線邊框
border-collapse : collapse;
-
表示相鄰邊框合并在一起
-
collapse 單詞是合并的意思
2.1.3、邊框會(huì)影響盒子實(shí)際大小??
邊框會(huì)額外增加盒子的實(shí)際大小，因此我們有兩種方案解決：
2.2內(nèi)邊距padding??
padding 屬性用于設(shè)置內(nèi)邊距,即盒子邊框與內(nèi)容之間的距離
屬性
作用
padding-left
左內(nèi)邊距
padding-right
右內(nèi)邊距
padding -top
上內(nèi)邊距
padding-bottom
下內(nèi)邊距
- padding屬性(簡(jiǎn)寫屬性)可以有一到四個(gè)值
值的個(gè)數(shù)
表達(dá)意思
padding : 5px;
1個(gè)值，代表上下左右都有5像素內(nèi)邊距
padding :5px 10px;
2個(gè)值，代表上下內(nèi)邊距是5像素，左右內(nèi)邊距是10像素
padding: 5px 10px 20px;
3個(gè)值，代表上內(nèi)邊距5像素，左右內(nèi)邊距10像素，下內(nèi)邊距20像素
padding :5px 10px 20px 30px
4個(gè)值，上是5像素，右是10像素，下20像素，左是30像素，順時(shí)針
以上四種情況，我們實(shí)際開(kāi)發(fā)都會(huì)遇到。
2.2.1、影響盒子大小??
padding會(huì)影響盒子大小的情況
當(dāng)我們給盒子指定 padding 值之后，發(fā)生了2件事情：
- 也就是說(shuō)，如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子
解決方案：
如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來(lái)的內(nèi)邊距大小即可
但是，有時(shí)候 padding 影響盒子是有好處的，比如我們要做導(dǎo)航：
因?yàn)槊總€(gè)導(dǎo)航欄里面的字?jǐn)?shù)不一樣多,我們可以不用給每個(gè)盒子寬度了,直接給 padding 最合適.
2.2.2、 不影響盒子大小??
padding不會(huì)影響盒子大小的情況
- 如果盒子本身沒(méi)有指定width/height屬性，則此時(shí)padding不會(huì)撐開(kāi)盒子大小
2.3、外邊距margin??
- margin（外邊距）屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離
屬性
作用
margin-left
左外邊距
margin-right
右外邊距
margin-top
上外邊距
margin-bottom
下外邊距
margin 簡(jiǎn)寫方式代表的意義跟 padding 完全一致
2.3.1、外邊距典型應(yīng)用??
外邊距可以讓塊級(jí)盒子水平居中，但是必須滿足兩個(gè)條件
盒子必須制定了寬度(width)
盒子左右的外邊距都設(shè)置為 auto
.header {
width: 960px;
margin: 0 auto;
}
左右的外邊距都設(shè)置為 auto 有三種寫法：
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;注意：
以上方法是讓塊級(jí)元素水平居中，行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align: center 即可。
2.3.2、外邊距合并??
使用 margin 定義塊級(jí)元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。
主要有兩種情況：
①相鄰塊元素垂直外邊距的合并??
當(dāng)上下相鄰的兩個(gè)塊元素（兄弟關(guān)系）相遇時(shí)，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。
解決方案：
盡量只給一個(gè)盒子添加 margin 值
②嵌套塊元素垂直外邊距的塌陷??
對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值
解決方案：
還有其他方法，比如浮動(dòng)、固定、絕對(duì)定位的盒子不會(huì)有塌陷問(wèn)題。后面會(huì)進(jìn)行總結(jié)。
③清除內(nèi)外邊距??
網(wǎng)頁(yè)元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同瀏覽器默認(rèn)的也不一致。因此我們?cè)诓季智?#xff0c;首先要清除下網(wǎng)頁(yè)元素的內(nèi)外邊距。
* {padding: 0;margin: 0; }注意：
行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距。但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以了
??PS基本操作??
因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop）來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。
- 文件打開(kāi) ：可以打開(kāi)我們要測(cè)量的圖片
- Ctrl+R：可以打開(kāi)標(biāo)尺，或者 視圖標(biāo)尺
- 右擊標(biāo)尺，把里面的單位改為像素
- ==Ctrl+ 加號(hào)(+)==可以放大視圖， ==Ctrl+ 減號(hào)(-)==可以縮小視圖
- 按住空格鍵，鼠標(biāo)可以變成小手，拖動(dòng) PS 視圖
- 用選區(qū)拖動(dòng) 可以測(cè)量大小
- Ctrl+ D 可以取消選區(qū)，或者在旁邊空白處點(diǎn)擊一下也可以取消選區(qū)
??新知識(shí)點(diǎn)??
去掉 li 前面的小圓點(diǎn)
li {list-style: none; }??PS切圖
PS 有很多的切圖方式：圖層切圖、切片切圖、PS 插件切圖等。
??圖層切圖
最簡(jiǎn)單的切圖方式：右擊圖層 導(dǎo)出 PNG 切片。
??切片切圖
- 利用切片工具手動(dòng)劃出
- 文件菜單存儲(chǔ)為 web 設(shè)備所用的格式選擇我們要的圖片格式存儲(chǔ)
??PS插件切圖??
Cutterman 是一款運(yùn)行在 Photoshop 中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出，以替代傳統(tǒng)的手工 “導(dǎo)出 web 所用格式” 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。
官網(wǎng)：Cutterman官網(wǎng)
注意：Cutterman 插件要求你的 PS 必須是完整版，不能是綠色版，所以大家需要安裝完整版本
3.圓角邊框??
-
在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。
-
border-radius 屬性用于設(shè)置元素的外邊框圓角。
border-radius:length;
-
radius半徑（圓的半徑） 原理:(橢）圓與邊框的交集形成圓角效果
參數(shù)值可以是數(shù)值或百分比的形式
如果是正方形，想要設(shè)置為一個(gè)圓，把數(shù)值修改為高度或者寬度的一半即可，或者直接寫為50%
如果是一個(gè)矩形，設(shè)置為高度的一半就可以
該屬性是一個(gè)簡(jiǎn)寫屬性，可以跟四個(gè)值，分別代表左上角，右上角，右下角，左下角
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
4.盒子陰影
CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。
box-shadow: h-shadow v-shadow blur spread color inset;值
描述
h-shadow
必需。水平陰影的位置，允許負(fù)值
v-shadow
必需。垂直陰影的位置，允許負(fù)值
blur
可選。模糊距離。
spread
可選，陰影的尺寸。
color
可選，陰影的顏色。
inset
可選，將外部陰影（outset）改為內(nèi)部陰影
- 模糊距離：影子的虛實(shí)
- 陰影尺寸：影子的大小
注意：
4.1??開(kāi)發(fā)中陰影常用??
原先盒子沒(méi)有影子，當(dāng)我們鼠標(biāo)經(jīng)過(guò)盒子就添加陰影效果
div:hover {box-shadow:10px 10px 10px -4px rgba(0,0,0,.3); }4.2、文字陰影
在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。
text-shadow: h-shadow v-shadow blur color值
描述
h-shadow
必需。水平陰影的位置，允許負(fù)值
v-shadow
必需。垂直陰影的位置，允許負(fù)值
blur
可選。模糊距離
color
可選，陰影的顏色。
5.傳統(tǒng)網(wǎng)頁(yè)布局的三種方式??
網(wǎng)頁(yè)布局的本質(zhì)用 CSS 來(lái)擺放盒子。 把盒子擺放到相應(yīng)位置
CSS 提供了三種傳統(tǒng)布局方式：
- 普通流（標(biāo)準(zhǔn)流）
- 浮動(dòng)
- 定位
5.1、標(biāo)準(zhǔn)流??
所謂的標(biāo)準(zhǔn)流，就是標(biāo)簽按照規(guī)定好默認(rèn)方式排列
塊級(jí)元素會(huì)獨(dú)占一行，從上向下順序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行內(nèi)元素會(huì)按照順序，從左到右順序排列，碰到父元素邊緣則自動(dòng)換行。
常用元素：span、a、i、em 等
以上都是標(biāo)準(zhǔn)流布局，我們前面學(xué)習(xí)的就是標(biāo)準(zhǔn)流，標(biāo)準(zhǔn)流是最基
本的布局方式。
這三種布局方式都是用來(lái)擺放盒子的，盒子擺放到合適位置，布局
自然就完成了。
注意：實(shí)際開(kāi)發(fā)中，一個(gè)頁(yè)面基本都包含了這三種布局方式（后面
移動(dòng)端學(xué)習(xí)新的布局方式） 。
5.2、浮動(dòng)??
比較難，雖然轉(zhuǎn)換為行內(nèi)塊元素可以實(shí)現(xiàn)一行顯示，但是他們之間會(huì)有大的空白縫隙，很難控制。
總結(jié)： 有很多的布局效果，標(biāo)準(zhǔn)流沒(méi)有辦法完成，此時(shí)就可以利用
浮動(dòng)完成布局。 因?yàn)楦?dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式.
5.2.1、浮動(dòng)的典型應(yīng)用??
-
浮動(dòng)最典型的應(yīng)用：可以讓多個(gè)塊級(jí)元素一行內(nèi)排列顯示。
-
網(wǎng)頁(yè)布局第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。
什么是浮動(dòng)？
- float屬性用于創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣
語(yǔ)法：
選擇器 {float: 屬性值; }屬性值
描述
none
元素不浮動(dòng)
left
元素向左浮動(dòng)
right
元素向右浮動(dòng)
- 網(wǎng)頁(yè)布局的第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)
- 網(wǎng)頁(yè)布局第二準(zhǔn)則：先設(shè)置盒子大小，之后設(shè)置盒子的位置。
5.2.2、浮動(dòng)的特性??
設(shè)置了浮動(dòng)（float）的元素的最重要的特性：
- 浮動(dòng)的盒子不再保留原先的位置
- 浮動(dòng)的元素是相互貼靠在一起的（不會(huì)有縫隙），如果父級(jí)寬度裝不下這些浮動(dòng)的盒子，多出的盒子會(huì)另起一行對(duì)齊。
任何元素都可以浮動(dòng)。不管原先是什么模式的元素，添加浮動(dòng)之后都具有行內(nèi)塊元素相似的特性。
- 如果塊級(jí)盒子沒(méi)有設(shè)置寬度，默認(rèn)寬度和父級(jí)一樣寬，但是添加浮動(dòng)后，它的大小根據(jù)內(nèi)容來(lái)決定
- 如果行內(nèi)元素有了浮動(dòng)，則不需要轉(zhuǎn)換塊級(jí)行內(nèi)塊元素就可以直接給高度和寬度
- 浮動(dòng)的盒子中間是沒(méi)有縫隙的，是緊挨著一起的
5.2.3、浮動(dòng)元素經(jīng)常和標(biāo)準(zhǔn)流父級(jí)搭配使用??
為了約束浮動(dòng)元素位置, 我們網(wǎng)頁(yè)布局一般采取的策略是:
先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)排列左右位置
5.2.4、浮動(dòng)的注意點(diǎn)??
- 先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)排列左右位置
- 一個(gè)元素浮動(dòng)了，理論上其余兄弟元素也要浮動(dòng)
- 一個(gè)盒子里面有多個(gè)子盒子，如果其中一個(gè)盒子浮動(dòng)了，那么其他兄弟也應(yīng)該浮動(dòng)
- 浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流
5.2.5、清除浮動(dòng)??
我們前面浮動(dòng)元素有一個(gè)標(biāo)準(zhǔn)流的父元素, 他們有一個(gè)共同的特點(diǎn),
都是有高度的.但是, 所有的父盒子都必須有高度嗎
理想中的狀態(tài), 讓子盒子撐開(kāi)父親. 有多少孩子,我父盒子就有多高.
但是不給父盒子高度會(huì)有問(wèn)題嗎……
為什么要清除浮動(dòng)
- 由于父級(jí)盒子很多情況下，不方便給高度，但是子盒子浮動(dòng)又不占有位置，最后父級(jí)盒子高度為0時(shí)，就會(huì)影響下面的標(biāo)準(zhǔn)流盒子。
- 由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響
- 理想中的狀態(tài)，讓子盒子撐開(kāi)父親，有多少孩子，我父盒子就有多高
5.2.6、清除浮動(dòng)的本質(zhì)??
- 清除浮動(dòng)的本質(zhì)是清除浮動(dòng)元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動(dòng)
- 清除浮動(dòng)之后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度，父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了。
語(yǔ)法：
選擇器 {clear: 屬性值; }屬性值
描述
left
不允許左側(cè)有浮動(dòng)元素(清除左側(cè)浮動(dòng)的影響)
right
不允許右側(cè)有浮動(dòng)元素(清除右側(cè)浮動(dòng)的影響)
both
同時(shí)清除左右兩側(cè)浮動(dòng)的影響
- 我們實(shí)際工作中，幾乎只用clear:both
- 清除浮動(dòng)的策略是：閉合浮動(dòng)
- 只讓浮動(dòng)在父盒子內(nèi)部影響，不影響父盒子外面的其他盒子。
5.2.7、清除浮動(dòng)的方法??
額外標(biāo)簽法也稱為隔墻法，是W3C推薦的做法
父級(jí)添加 overflow 屬性
父級(jí)添加 after 偽元素
父級(jí)添加雙偽元素
①額外標(biāo)簽法
-
額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽,例如：
-
例如<div style="clear:both"></div>，或者其他標(biāo)簽（如</br>等）
-
注意：要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素
-
優(yōu)點(diǎn)：通俗易懂，書寫方便
-
缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差
實(shí)際工作可能會(huì)遇到,但是不常用
②overflow
- 可以給父級(jí)添加overflow屬性，將其屬性值設(shè)置為hidden,auto或scroll
- 優(yōu)點(diǎn)：代碼簡(jiǎn)潔
- 缺點(diǎn)：無(wú)法顯示溢出的部分
③after偽元素法??
:after 方式是額外標(biāo)簽法的升級(jí)版。也是給父元素添加
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden; } .clearfix {/* IE6,7專有*/*zoom : 1; }- 優(yōu)點(diǎn)：沒(méi)有增加標(biāo)簽，結(jié)構(gòu)更簡(jiǎn)單
- 缺點(diǎn)：需要照顧低版本瀏覽器
- 代表網(wǎng)站：百度、淘寶、網(wǎng)易等
④雙偽元素??
-
也是給父元素添加
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} -
優(yōu)點(diǎn)：代碼更簡(jiǎn)潔
-
缺點(diǎn)：需要照顧低版本瀏覽器
-
代表網(wǎng)站：小米、騰訊等
5.2.8、浮動(dòng)總結(jié)??
為什么需要清除浮動(dòng)？
①：父級(jí)沒(méi)高度
②：子盒子浮動(dòng)了
③：影響下面布局了，我們就應(yīng)該清除浮動(dòng)了。
清除浮動(dòng)方式
優(yōu)點(diǎn)
缺點(diǎn)
額外標(biāo)簽法(隔墻法)
通俗易懂，書寫方便
添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差
父級(jí)overflow:hidden;
書寫簡(jiǎn)單
溢出隱藏
父級(jí)after偽元素
結(jié)構(gòu)語(yǔ)義化正確
由于IE6-7不支持：after，兼容性問(wèn)題
父級(jí)雙偽元素
結(jié)構(gòu)語(yǔ)義化正確
由于IE6-7不支持：after，兼容性問(wèn)題
5.3、定位??
提問(wèn)：以下情況使用標(biāo)準(zhǔn)流或者浮動(dòng)能實(shí)現(xiàn)嗎？
以上效果，標(biāo)準(zhǔn)流或浮動(dòng)都無(wú)法快速實(shí)現(xiàn)，此時(shí)需要定位來(lái)實(shí)現(xiàn)
- 浮動(dòng)可以讓多個(gè)塊級(jí)盒子一行沒(méi)有縫隙的排列顯示，經(jīng)常用于橫向排列盒子
- 定位則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或固定屏幕中某個(gè)位置，并且可以壓住其他盒子
- 定位：將盒子定在某一個(gè)位置，所以定位也是在擺放盒子，按照定位的方式移動(dòng)盒子
5.3.1、定位的組成??
定位 = 定位模式 +邊偏移
- 定位模式用于指定一個(gè)元素在文檔中的定位方式
- 邊偏移則決定了該元素的最終位置
定位模式
- 定位模式?jīng)Q定元素的定位方式 ，它通過(guò) CSS 的 position 屬性來(lái)設(shè)置，其值可以分為四個(gè)
值
語(yǔ)義
static
靜態(tài)定位
relative
相對(duì)定位
absolute
絕對(duì)定位
fixed
固定定位
邊偏移
邊偏移就是定位的盒子移動(dòng)到最終位置。
邊偏移屬性
示例
描述
top
top: 80px
頂端偏移量，定義元素相對(duì)于其父元素的上邊線的距離
bottom
bottom: 80px
底部偏移量，定義元素相對(duì)于其父元素的下邊線的距離
right
right: 80px
右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離
left
left: 80px
左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離
5.3.2、靜態(tài)定位static(了解)
-
靜態(tài)定位是元素的默認(rèn)定位方式，無(wú)定位的意思
-
靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置，它沒(méi)有邊偏移
選擇器 {
position: static;
}
5.3.3、相對(duì)定位relative??
- 相對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的
- 特點(diǎn)：
- 它是相對(duì)于自己原來(lái)的位置來(lái)移動(dòng)的（移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來(lái)的位置）
- 原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待。（不脫標(biāo)，繼續(xù)保留原來(lái)位置）
- 因此，相對(duì)定位并沒(méi)有脫標(biāo)，它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)摹?/li>
5.3.4、絕對(duì)定位absolute??
- 絕對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它的祖先元素來(lái)說(shuō)的
- 特點(diǎn)：
- 如果沒(méi)有祖先元素，或者祖先元素沒(méi)定位，則以瀏覽器為準(zhǔn)進(jìn)行定位(Document 文檔)
- 如果祖先元素父級(jí)有定位(相對(duì)、絕對(duì)、固定定位)，則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置
- 絕對(duì)定位不再占用原先的位置（脫標(biāo)）
所以絕對(duì)定位是脫離標(biāo)準(zhǔn)流的
①絕對(duì)定位盒子水平居中??
-
加了絕對(duì)定位的盒子不能通過(guò)margin: 0 auto水平居中
-
但是可以通過(guò)以下計(jì)算方法實(shí)現(xiàn)水平和垂直居中
- left:50% ； 讓盒子的左側(cè)移動(dòng)到父級(jí)元素的水平中心位置
- margin-left: -100px; 讓盒子向左移動(dòng)自身寬度的一半
.box {
position: absolute;
/* 1.left走50%，父容器寬度的一半 /
left: 50%;
/ 2.margin 負(fù)值往左邊走 自己盒子寬度的一半 */
margin-left: -xx;
}
5.3.5、子絕父相??
意思：子級(jí)使用絕對(duì)定位，父級(jí)則需要相對(duì)定位
①：子級(jí)絕對(duì)定位，不會(huì)占有位置，可以放到父盒子里面的任何一個(gè)地方，不會(huì)影響其他的兄弟盒子。
②：父盒子需要加定位限制子盒子在父盒子內(nèi)顯示
③：父盒子布局時(shí)，需要占有位置，因此父親只能是相對(duì)定位。
總結(jié)：因?yàn)楦讣?jí)需要占有位置，因此是相對(duì)定位，子盒子不要占有位置，則是絕對(duì)定位
5.3.6、固定定位fixed??
固定定位是元素固定于瀏覽器的可視區(qū)的位置
主要使用場(chǎng)景： 可以在瀏覽器頁(yè)面滾動(dòng)時(shí)元素的位置不會(huì)改變
- 特點(diǎn)??：
- 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素
- 跟父元素沒(méi)有任何關(guān)系
- 不隨滾動(dòng)條滾動(dòng)
- 固定定位不再占有原先的位置(脫標(biāo))
固定定位也是脫標(biāo)的，其實(shí)固定定位也可以看做是一種特殊的絕對(duì)定位。
??固定定位小技巧??
固定定位小技巧： 固定在版心右側(cè)位置
小算法：
就可以讓固定定位的盒子貼著版心右側(cè)對(duì)齊了。
.box {position: absolute;/* 1.left走50%，父容器寬度的一半 */left: 50%;/* 2.margin 負(fù)值往左邊走 自己盒子寬度的一半 */margin-left: -xx; }5.3.7、粘性定位sticky(了解)
粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合
- 特點(diǎn)：
- 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）
- 粘性定位占有原先的位置（相對(duì)定位的特點(diǎn)）
- 必須添加top，left，right，bottom其中一個(gè)才有效
跟頁(yè)面滾動(dòng)搭配使用。 兼容性較差，IE 不支持。
選擇器 {position:sticky; top: 10px; }5.3.8、定位模式總結(jié)??
定位模式
是否脫標(biāo)
移動(dòng)位置
是否常用
static靜態(tài)定位
否
不能使用邊偏移
很少
relative相對(duì)定位
否（占有位置）
相對(duì)于自身位置移動(dòng)
常用
absolute絕對(duì)定位
是（不占有位置）
帶有定位的父級(jí)
常用
fixed固定定位
是（不占有位置）
瀏覽器可視區(qū)
常用
sticky
否（占有位置）
瀏覽器可視區(qū)
當(dāng)前階段少
- 一定要記住相對(duì)定位，固定定位，絕對(duì)定位的兩個(gè)大特點(diǎn)：1.是否占有位置（脫標(biāo)否）2.以誰(shuí)為基準(zhǔn)點(diǎn)移動(dòng)
- 重點(diǎn)學(xué)會(huì)子絕父相（兒子絕對(duì)定位，父親必須相對(duì)定位）
5.3.9定位疊放次序z-index??
-
在使用定位布局時(shí)候，可能會(huì)出現(xiàn)盒子重疊的情況
-
此時(shí)，可以用 z-index 來(lái)控制盒子的前后次序(z軸)
選擇器 {
z-index: 1;
}
5.3.10、定位的擴(kuò)展??
加了絕對(duì)定位的盒子不能通過(guò) margin: 0 auto 水平居中，但是可以通過(guò)以下計(jì)算方法實(shí)現(xiàn)水平和垂直居中
①：left: 50%; 讓盒子的左側(cè)移動(dòng)到父級(jí)元素的水平中心位置
②：margin-left: -100px; 讓盒子向左移動(dòng)自身寬度的一半
絕對(duì)定位和固定定位也和浮動(dòng)類似。
①：行內(nèi)元素添加絕對(duì)或者固定定位，可以直接設(shè)置高度和寬度
②：塊級(jí)元素添加絕對(duì)或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小。
浮動(dòng)元素、絕對(duì)定位(固定定位)元素都不會(huì)觸發(fā)外邊距合并的問(wèn)題。
①：浮動(dòng)元素不同，只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）
②：但是絕對(duì)定位（固定定位） 會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。
③：浮動(dòng)之所以不會(huì)壓住文字，因?yàn)楦?dòng)產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會(huì)圍繞浮動(dòng)元素
5.4、網(wǎng)頁(yè)布局總結(jié)??
通過(guò)盒子模型，清楚知道大部分html標(biāo)簽是一個(gè)盒子
通過(guò)CSS浮動(dòng)、定位 可以讓每個(gè)盒子排列成為網(wǎng)頁(yè)
一個(gè)完整的網(wǎng)頁(yè)，是標(biāo)準(zhǔn)流、浮動(dòng)、定位一起完成布局的，每個(gè)都有自己的專門用法
可以讓盒子上下排列或者左右排列，垂直的塊級(jí)盒子顯示就用標(biāo)準(zhǔn)流布局。
可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子，多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局。
定位最大的特點(diǎn)是有層疊的概念，就是可以讓多個(gè)盒子前后疊壓來(lái)顯示。如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局。
6、元素的隱藏與顯示??
類似網(wǎng)站廣告，當(dāng)我們點(diǎn)擊關(guān)閉就不見(jiàn)了，但是我們重新刷新頁(yè)面，會(huì)重新出現(xiàn)！
本質(zhì)：讓一個(gè)元素在頁(yè)面中隱藏或者顯示出來(lái)
6.1、display顯示隱藏??
display屬性用于設(shè)置一個(gè)元素應(yīng)如何顯示
display: none; /*隱藏對(duì)象*/display: block; /*除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思*/- display隱藏元素后，不再占有原來(lái)的位置
后面應(yīng)用及其廣泛，搭配 JS 可以做很多的網(wǎng)頁(yè)特效。
6.2、visibility顯示隱藏??
visibility屬性用于指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏
visibility: visible; /*元素可視*/visibility: hidden; /*元素隱藏*/- visibility 隱藏元素后，繼續(xù)占有原來(lái)的位置。
- 如果隱藏元素想要原來(lái)位置， 就用 visibility：hidden
- 如果隱藏元素不想要原來(lái)位置， 就用 display：none (用處更多 重點(diǎn)）
6.3、overflow溢出顯示隱藏??
overflow 屬性指定了如果內(nèi)容溢出一個(gè)元素的框（超過(guò)其指定高度及寬度） 時(shí)，會(huì)發(fā)生什么。
屬性值
描述
visible
不剪切內(nèi)容也不添加滾動(dòng)條
hidden
不顯示超過(guò)對(duì)象尺寸的內(nèi)容，超出的部分隱藏掉
scroll
不管超出內(nèi)容否，總是顯示滾動(dòng)條
auto
超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條
一般情況下，我們都不想讓溢出的內(nèi)容顯示出來(lái)，因?yàn)橐绯龅牟糠謺?huì)影響布局。
但是如果有定位的盒子， 請(qǐng)慎用 overflow:hidden 因?yàn)樗鼤?huì)隱藏多余的部分。
總結(jié)
以上是生活随笔為你收集整理的CSS基础班笔记(二)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CAD Electrical 符号编译器
- 下一篇： CSS复习