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