1.html超文本標記語言,圖片,鏈接,文字組成.
2.常用的瀏覽器:IE,火狐,谷歌瀏覽器.
瀏覽器內核:
IE Trident
firefox Gecko
chrome Blink
3.web標準w3c
4.基本語法:
1.html是由尖括號包裹的標簽
2.html標簽是成對出現的.
3.有些特殊的是單標簽.
3.包含關系,兄弟關系.
5.html結構標簽:
1.html 根標簽
2.head 頭部
3.title 標題
3.body 身體
6.編輯器采用vscode
1.vscode安裝插件:(安裝完需要重啟)
[
chinese(中文漢化)
Open in Browser打開瀏覽器
JS-CSS-HTML Formatter 自動保存格式化
Auto Rename Tag 自動重命名配對的HTML和XML標簽
CSS Peek 追蹤至樣式.
]
7.DOCTYPE以及字符集的作用:
1.DOCTYPE 檔案型別宣告標簽,在html前面.
2.zh-CN語言是中文,<html lang="en"> lang當前檔案的顯示語言.
3.charset="UTF-8" 字符集<meta charset="UTF-8"/>
8.html常用的標簽:
標簽的語意:在合理的情況放置一個合適的標簽,可以讓頁面的結構更加的清晰.
9.標題標簽
h1~h6 語意:作為標題來使用,并且根據重要性遞減.
10.段落
<p>段落</p>
1.文本會根據瀏覽器大小自動換行.
2.段落中間有空隙.
<br/> 強制換行
1.單標簽
11.案例撰寫:
12.文本格式化標簽:
文字需要粗體,斜體,下劃線.
加粗:<strong></strong>,<b></b>
傾斜:<em></em>,<i></i>
洗掉線:<del></del>,<s></s>
下劃線:<ins></ins>,<u></u>
13.div和span標簽:
沒有語意是一個盒子標簽.
1.div 單行,大盒子
2.span 不換行,小盒子
14.img圖片標簽:
<img src="https://www.cnblogs.com/historylyt/p/影像路徑"/>
src是影像的必須屬性.
alt是影像不顯示時候的文本.
width設定一下寬
height設定一下高
title提示文本.
border邊框
1.標簽名后面寫屬性
2.屬性中間以空格分開.
3.屬性key=value
15.目錄檔案夾和根目錄
1.目錄檔案夾
2.打開目錄檔案夾第一層就是根目錄
16.相對路徑和絕對路徑
1.相對路徑.(圖片相對于html的位置)
同路徑
上一級../
下一級/
2.絕對路徑:
直接從盤符開始:C://xcxx
17.超鏈接
<a href="https://www.cnblogs.com/historylyt/p/跳轉目標" target="目標視窗彈出的地方"></a>
跳轉頁面,target="_self"默認值,_blank為在新視窗打開的方式.
1.可以訪問外部頁面.
2.可以訪問內部的網頁也可以.
3.空連接#
4.可以在href放路徑.xxx.zip檔案,就可以下載.
18.錨點連接:
a標簽連接#id屬性就可以跑到這個地方.
<a href="https://www.cnblogs.com/historylyt/p/#id屬性"></a>
<h2 id="id屬性"></h2>
19.注釋和特殊字符:
1.<!-- 注釋 --> ctrl+/
2.  空格
< 小于號
> 大于號
20.表格
1.table定義表格
2.tr列
3.td單元格內容
4.th表頭,加粗居中.
21.表格屬性(并不常用)
1.align,對其方式
2.border,邊框
3.cellpadding,像素值
4.cellspacing,像素值
5.width像素或百分比.
22.表格結構thred,tbody
23.合并單元格
1.rowspan:合并幾行
2.colspan:合并單元格個數.
24.串列(無序有序,自定義)
1.無序:ul,li
2.有序:ol,li
3.自定義dl,dt,dd
25.表單
1.表單域可以收集表單元素提交給服務器form
常用的屬性:
action url地址 表單資料送到哪里，
method get/post 表單提交方式
name 名稱 指定表單名稱
2.表單元素:
1.<input type="" />
type=button 按鈕
type=checkbox 復選框
type=file 瀏覽檔案上傳
type=hidden 隱藏欄位
type=image 定義影像的方式提交資料
type=password 密碼
type=radio 單選
type=reset 重置標簽
type=submit 提交按鈕
type=text 文本
還有其他的元素:
name 用戶自定義,設定input的名稱
value 用戶自定義,設定input的值.
checked 規定input元素首次加載應當被選中.
maxlength 整數,輸入字符最大長度.
2.label標簽
3.select下拉框,option
option中定義selected=selected的話,當前為默認選中項.
4.textarea文本域
cols 用來指定每行顯示的字符數，
rows 用來指定正常情況下（沒有滾動條）顯示的文本行數
**************************************************************************
*****************************css樣式表************************************
**************************************************************************
1.css美化網頁
2.選擇器:{屬性:值}
1.給誰的樣式,
2.選擇器就是指定css樣式的標簽
3.屬性之間,用逗號分隔.
3.代碼風格:小寫,空格規范:冒號后面打個空格,選擇器后面加個空格.
4.選擇器的作用:選擇標簽
4.1.標簽選擇器:標簽名當做選擇器
4.2.型別選擇器:類名class(開發較為常用)
語法:.類名 {
屬性:值
}
補充:多個類名必須空格分開.
4.3.id選擇器:#id名稱:{
屬性:值
}
唯一的.
4.4.通配符選擇器
* {
屬性: 值
}
* 代表所有元素,特殊情況下使用.
5.CSS字體屬性:
5.1.font-family 字體,各個字體之間用逗號分隔,盡量用系統自帶的字體，
5.2.font-size 字體大小,px像素
5.3.font-weight 字體粗細
normal 默認值
bold 粗體
100~900 400=normal,700=bold 不帶單位
5.4.font-style 字體風格
italic 斜體
normal 默認
5.5.字體屬性簡寫的順序:font: font-style font-weight font-size/line-height font-family
(不可以顛倒順序,必須嚴格按照這個撰寫,空格隔開
font-size和font-family是不可忽略的，每個引數僅允許有一個值，忽略的將使用其引數對應的獨立屬性的默認值，
)
5.6.文本顏色:color (十六進制,RGB,還有顏色單詞)
5.7.文本對齊:text-align 讓盒子里的文字水平居中對齊.
5.8.文本裝飾:text-decoration 下劃線,上劃線,洗掉線.
underline下劃線,none文本無裝飾.
5.9.文本縮進:text-indent 1em 1個文字的距離,2em 2個文字的距離
5.10.行間距:line-height
6.css引入方式3種:
6.1.內部樣式表(hred標簽里寫<style>寫css樣式</style>)
6.2.行內樣式表(標簽里寫屬性style,比如<h1 style="寫css樣式"></h1>)
6.3.外部樣式表(創建css后綴的檔案,用link引入)
<link rel="stylesheet" href="https://www.cnblogs.com/historylyt/p/index1.css" />
6.4.行內樣式表>內部樣式表>外部樣式表
7.Emmet語法:
7.1.emmet語法生成html
1.生成標簽,標簽名加tab div + tab 就可以生成<div></div>
2.生成多個相同的標簽,加上*就可以了,div*3 就可以生成3個div
3.如果有父子關系的標簽,可以用>比如ui>li就可以
4.如果生成兄弟標簽,用+就可以了,比如div+p
5.如果生成類名或者id名字的,直接寫.demo或者#two 即可，
6.如果生成div類名有順序,可以用$
.demo$*5
7.在標簽里生成文字 div{dasdfasdfasdf}
7.2.emmet語法快速生成css樣式:
1.比如w200 按tab 可以生成 width: 200px;
2.比如lh26 按tab 可以生成 line-height: 26px;
8.快速格式化代碼: shift+alf+f
9.復合選擇器(準確,高效)
9.1.后代選擇器,子選擇器,并集選擇器,偽類選擇器
9.2.后代選擇器:包含選擇器,可以選擇父元素里面的子元素，
語法:元素1 元素2 {樣式宣告}
元素1 包含元素2標簽(后代元素)
元素1和元素2空格隔開
無論是兒子,孫子只要是元素1的后代即可
元素1和元素2可以是任意的標簽選擇器.
9.3.子選擇器:只能選擇某元素的最近一級的元素,簡單理解就是親兒子選擇器
語法:元素1>元素2{樣式宣告}
元素1和元素2用大于號隔開.
元素1父和元素2子
9.4.并集選擇器:可以選擇多組標簽,同時為他們定義相同的樣式，
并集標簽選擇器通過英文(,)連接而成,任何形式的選擇器,都可以當做并集選擇器的一部分.
最后一個選擇器不需要加逗號
10.偽類選擇器:用于向某些選擇器添加特殊的效果,比如鏈接添加特殊效果,或者選擇第1個元素,第n個元素.
偽類標簽選擇器最大的特點就是(:)表示,比如:hover,:first-child.
a:link /* 選擇所有未被訪問的鏈接 */
a:visited /* 選擇所有已被訪問的鏈接 */
a:hover /* 選擇滑鼠指標位于其上的鏈接 */
a:active /* 選擇活動連接(滑鼠按下未彈起的鏈接) */
為了確保能生效,按照LVHA的順序宣告
補充偽類選擇器:focus用于獲取焦點的表單元素.
11.css的元素的顯示模式:
1.元素的顯示模式:元素以什么方式顯示,div自己占一行,一行可以放多個span.
塊元素和行內元素
塊元素會換行(h1~h6,p,div,ul,ol,li)
行內元素不會換行(span,a,em,b,s,ins,u,strong)
1.1.塊級元素的特點:
1.換行
2.高度,寬度,外邊距和內邊距可以控制，
3.寬度是默認容器(父容器)100%
4.使一個容器以及盒子,里面可以放行內或者塊級元素.
文字類元素內不能使用塊級別元素
1.2.行內元素
1.相鄰行內元素在一行上,一行可以顯示多個
2.高,寬設定是無效的
3.默認寬度就是他本身內容的寬度
4.行內元素只能容納文本或其他行內元素.
注意:
1.鏈接里面不能放鏈接，
2.特殊情況鏈接a下面放塊級標簽,a標簽轉換一下模式最安全.
1.3.行內塊元素
img,input,td 他們同時具有塊級元素和行內元素的特點.行內塊元素
1.和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白的縫隙,一行可以顯示多個.(行內元素特點)
2.默認的寬度就是他本身的寬度(行內元素特點)
3.高度,行高,外邊距,內邊距可以控制(塊級元素特點)
2.顯示模式轉換
display:block; 轉塊
display:inline 轉行內
display:inline-block; 行內塊
12.小工具:snipaste截圖工具
13.文字單行垂直居中:
讓文字的行高等于盒子的高度
盒子高:height: 50px;
行 高 :line-height:50px;
原理:
行高=上空隙+文字本身高度+下空隙.
盒子本身也有高度.
文字的本身加上上空隙加上下空隙加起來等于盒子的高度就成，
15.背景顏色:
1.背景顏色,背景圖片,背景平鋪,背景影像固定等等.
背景顏色background-color 默認transparent透明
2.背景圖片background-image none | url('')
3.背景平鋪 background-repeat
repeat-x： 背景影像在橫向上平鋪
repeat-y： 背景影像在縱向上平鋪
repeat： 背景影像在橫向和縱向平鋪
no-repeat： 背景影像不平鋪
round： 當背景影像不能以整數次平鋪時，會根據情況縮放影像，（CSS3）
space： 當背景影像不能以整數次平鋪時，會用空白間隙填充在影像周圍，（CSS3)
默認是平鋪的
4.背景圖片位置:background-position:x y;
方位名詞:center top,left,right,
比如超大背景圖片:background-position:center top;
1.精確定位: 第一個是x坐標,第二個是y坐標.
background-position: 5px 10px;
如果寫一個值一定是x,另外一個是垂直居中center.
2.混合單位:
數值和方位名詞混搭,第一個是x,第二個是y.
3.背景固定:
background-attachment 背景影像是否固定或者滾動
background-attachment可以做視差滾動效果.
background-attachment: scroll | fixed
scroll 隨著內容的滾動而滾動的.
fixed 不隨著頁面滾動是固定的.
4.背景屬性復合寫法:(實際開發中使用這個寫法多,空格隔開屬性)
background:背景顏色 背景圖片 背景平鋪 背景影像滾動 背景圖片位置;
5.背景半透明:
background: rgba(0,0,0,0.3)
最后一個引數是alpha透明度,取值范圍在0~1之間，
注意:背景半透明是指盒子背景半透明,盒子的內容不受影響，
背景圖片的應用:實際開發中的logo或者裝飾性的小圖片或者是超大的背景圖片,有點是非常容易控制位置，
16.css的三大特性:(層疊性,繼承性,優先級)
1.層疊性:相同的選擇器給設定相同的樣式,此時一個樣式就會覆寫(層疊)另一個沖突的樣式,層疊主要解決沖突問題.
層疊的原則:
1.樣式沖突,遵循的原則就是就近原則,那個樣式離結構進,就用那個.
2.樣式不沖突,不會層疊.
2.繼承性:子標簽會集成父標簽的某些樣式,比如文本顏色和字號，簡單的理解就是子承父業，
(恰當的使用可以減少css代碼)
div {
color: pink;
font-weight: 700;
}
<div>
<p>長江后狼</p>
</div>
子元素可以繼承父元素的樣式(text,font,line-這些元素開頭的可以繼承,以及color)
2.1.行高的繼承性:
body{
font: 12px/1.5 'Microsoft YeHei';
}
1.行高可以跟單位也可以不跟單位
2.如果子元素沒有設定行高,則會繼承父元素的行高為1.5
3.此時子元素的行高是:當前子元素的文字大小*1.5
body行高1.5 這樣寫法最大的優勢是里面的子元素可以根據文字大小自動調節行高.
3.優先級:
1.選擇器相同,則執行層疊屬性，
2.選擇器不同,則根據選擇器權重執行，
選擇器 選擇器權重(最下面的最大)
繼承或者* 0,0,0,0
元素選擇器 0,0,0,1
類選擇器,偽類選擇器 0,0,1,0
ID選擇器 0,1,0,0
行內樣式style="" 1,0,0,0
!important重要的 無窮大
優先級注意點:
1.權重有4組數字組成,但不會有進位，
2.可以理解為類選擇器永遠大于元素選擇器,id選擇器永遠大于類選擇器,以此類推，
3.等級從左到右判定,如果某一個值相等,就判斷下一位.
4.簡單的記憶法,通配符和繼承權重為0,標簽選擇器為1,類(偽類)選擇器為10,id選擇器100,行內樣式為1000,!important無窮大.
5.繼承的權重是0,如果該元素沒有直接選中,不管父元素的權重多高,子元素得到的權重都是0
(a標簽瀏覽器默認給了一個樣式)
4.權重疊加:如果是復合選擇器,則會有權重疊加,需要計算權重，
(權重雖然會疊加不會進位的問題)
div ul li ----> 0,0,0,3
.nav ul li ----> 0.0.1,2
a:hover ----> 0.0.1,1
.nav a ----> 0.0.1,1
17.盒子模型:
17.1.看透網頁布局的本質:
1.先準備好相關的網頁元素,網頁元素基本都是盒子box
2.利用css設定好盒子樣式,然后擺放到相對應的位置.
3.往盒子里添加內容.
17.2.盒子模型的組成部分:
盒子模型,布局元素可以當做一個矩形的盒子，
CSS盒子模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊框,外邊距,內邊距,和實際內容.
border邊框
content內容
padding內邊距,控制盒子邊框和內容
margin外邊距,盒子與盒子的距離，
1.邊框:border分為3部分邊框的寬度(粗細)邊框的樣式,邊框的顏色，
語法:border:border-width || border-style || border-color
1.邊框的簡寫方式
border:1px solid red;//沒有順序
邊框分開的寫法:
border-top:1px solid red;//只設定上邊框,其他同理
表格細線邊框:
border-collapse separate： 邊框獨立 collapse： 相鄰邊被合并
2.測驗盒子大小,不量邊框，
3.如果測驗的是對的,width/height減去邊框寬度.
2.內邊距(padding)
padding屬性用于設定內邊距,即邊框和內容之間的距離，
屬性 作用
padding-left 左邊距
padding-right 右邊距
padding-top 上內邊距
padding-bottom 下內邊距
padding的簡寫:
值的個數 表達的意思:
padding:5px; 1個值,上下左右都有5像素的內邊距.
padding:5px 10px; 2個值,上下5像素的內邊距,左右都有10像素的內邊距.
padding:5px 10px 20px; 3個值,上5像素的內邊距,左右10像素的內邊距,下都有20像素的內邊距.
padding:5px 10px 20px 30px; 4個值,上5像素的內邊距,右10像素的內邊距,下有20像素的內邊距.左有30像素 的內邊距(順時針)
2.1.padding會影響盒子實際大小
1.內容和邊距都有了距離,添加了內邊距
2.padding影響了盒子的實際大小
也就是說,如果盒子已經有了寬度和高度,此時再指定內邊距,會撐大盒子.
解決方案:
如何保證盒子跟效果圖大小一致,則讓width/height減去多出來的內邊距大小即可.
如果盒子本身沒有指定width/height屬性,則此時padding不會撐開盒子大小.
3.外邊距(margin):用于處理外邊距,控制盒子和盒子之間的距離，
屬性 作用
margin-left 左外邊距
margin-right 右外邊距
margin-top 上外邊距
margin-bottom 下外邊距
margin簡寫方式代表的意義跟padding完全一致.
3.1.外邊距典型應用塊級元素盒子水平居中.
1.盒子必須制定寬度(width)
2.盒子左右外邊距都設定為auto
.header{width:900px;margin:0 auto;}
常見的寫法,以下三種都可以:
2.1.margin-left:auto;margin-right:auto;
2.2.margin:auto;
2.3.margin:0 auto;
注意:以上方法是讓塊級元素水平居中,行內元素行內塊元素水平居中給其父親元素添加text-align:center即可;
4.外邊距合并-嵌套塊元素塌陷
1.相鄰塊元素垂直外邊距合并
當上下相鄰的兩個塊元素(兄弟關系)相遇的時候,如果上面的元素有下邊距margin-bottom,下面的元素有上邊距margin-top，則他們的垂直距不是margin-bottom和margin-top之和，取兩個值中較大者這種現象稱為相鄰塊元素垂直外邊距合并，
解決辦法:只給一個盒子添加margin值.
2.嵌套塊元素垂直外邊距的塌陷
對于兩個嵌套關系(父子關系)的塊元素,父元素有上外邊距同時子元素也有上外邊距,此時父元素會塌陷較大的外邊距值，
解決方案:
1.可以為父元素定義上邊框
border: 1px solid transparent;
2.可以為父元素定義上內邊距
padding:1px;
3.可以為父元素添加overflow:hidden;
5.清除內外邊距:
* {
margin:0;/*清除外邊距*/
padding:0;/*清除內邊距*/
}
注意:行內元素為了照顧兼容性,盡量的設定左右內外邊距,不要設定上下的內外邊距,但是轉換為塊級和行內塊元素就可以了，
18.去掉li身上的小圓點:list-style: none;
19.(圓角邊框,盒子陰影,文字陰影)
圓角邊框:border-radius:length;
數值越大,弧度越大.
設定高度的一半就是圓 border-radius:50%;
該屬性是簡寫屬性:后面可以跟左上角,右上角,右下角,左下角
盒子陰影:box-shadow添加陰影
h-shadow 必需的，水平陰影的位置，允許負值
v-shadow 必需的，垂直陰影的位置，允許負值
blur 可選，模糊距離
spread 可選，陰影的大小
color 可選，陰影的顏色，在CSS顏色值尋找顏色值的完整串列
inset 可選，從外層的陰影（開始時）改變陰影內側陰影
注意
1.默認是外形陰影(outset)但是不可以寫這個單詞,否則導致陰影無效，
2.盒子陰影不占空間,不會影響其他的盒子排列，
文字陰影:text-shadow
h-shadow 必需，水平陰影的位置，允許負值，
v-shadow 必需，垂直陰影的位置，允許負值，
blur 可選，模糊的距離，
color 可選，陰影的顏色，參閱 CSS 顏色值，
20.傳統布局的三種方式:
1.普通流(標準流)
1.塊級元素會單獨占一行,從上到下排列.
常用的元素:div,hr,p,h1~h6,ol,dl,form,table
2.行內元素會按照順序,從左往右排列,碰倒父元素則自動換行.
常用的元素:span,a,i,em等
2.浮動
3.定位
(注意實際開發中,一個頁面基本都包含了三種布局方式,后面是移動端的布局方式)
21.浮動可以改變元素默認的排列方式.
浮動的經典應用:可以讓多個塊級元素一行內排列顯示
網頁布局的第一準則:多個塊級元素縱向排列找標準流,多個塊級元素橫向排列找浮動.
22.浮動:float屬性用于創建浮動框,將其移動到一邊,直到左邊緣或右邊緣及包含塊或另一個浮動框的邊緣，
語法:選擇器{float:屬性值;}
none： 設定元素不浮動 left： 設定元素浮在左邊 right： 設定元素浮在右邊
23.浮動的特性:
1.浮動的特性會脫離標準流(脫標)
1.脫離了標準普通流的控制(浮)移動到指定的位置(動),俗稱脫標
2.浮動的盒子不需要保留之前的位置.
2.浮動里的元素會一行里顯示并且元素頂部對齊.
3.浮動的元素會具有行塊元素的特性.
(如果行內元素有了浮動,則不需要轉換塊級\行內塊元素就可以直接給高度和寬度.)
如果塊級盒子沒有設定寬度,默認寬度和父級一樣寬,但是添加浮動后,他的大小由內容來決定.
浮動的盒子中間是沒有縫隙的,是緊挨著一起的，
行內元素同理
24.浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置,我們網頁布局一般采取的策略，
先用標準流的父元素排到上下位置,之后內部子元素采取浮動排列左右,符合網頁布局第一準則，
網頁布局第二準則:先設定盒子大小,之后設定盒子位置.
25.常見的網頁布局:
1.自上而下:
top,banner,main,footer
2.top,banner,left,right,footer
3.top,banner,中間拆分更多的模塊,footer
26.浮動的注意點:
1.浮動和標準流的父盒子搭配:
先用標準流的父元素排列上下位置,之后內部子元素采取浮動排列左右位置.
2.一個元素浮動了,理論上其他兄弟元素也要浮動.
一個盒子里面有個多個子盒子,如果其中一個盒子浮動了,其他的兄弟也要跟著浮動,以防止引起問題.
(浮動的盒子只會影響盒子后面的標準流,不會影響前面的標準流.)
理想狀態,讓盒子撐開父親,有多少孩子,我父盒子就有多高
27.為什么需要清除浮動:
由于父級盒子很多情況下,不方便給高度,但是盒子浮動又不占有位置,最后父級盒子高度為0,就會影響下面的標準盒子.
由于浮動元素不再占用原檔案流的位置,所以它會對后面的元素排版產生影響.
28.清除浮動
1.清楚浮動元素造成的影響.
2.如果盒子本身有高度,則不需要清除浮動.
3.清除浮動之后,父級就會根據浮動的子盒子自動檢索高度,父級有了高度,就不會影響下面的標準流了
語法:選擇器{clear:屬性值;}
left 在左側不允許浮動元素，
right 在右側不允許浮動元素，
both 在左右兩側均不允許浮動元素，(實際開發中最常用的)
none 默認值，允許浮動元素出現在兩側，
inherit 規定應該從父元素繼承 clear 屬性的值，
清除浮動的策略是閉合浮動.
4.清理浮動方法
1.額外標簽也被稱為隔離法,是W3C推薦的做法.
額外標簽法,是w3c推薦的做法，
額外標簽法會在浮動元素的末尾添加一個空的標簽,例如<div style="clear:both"></div>或者其他標簽比如<br/>
要求這個空元素必須是塊級元素
清除浮動的本質:是清除浮動元素脫離標準流的影響.
清除浮動的策略:閉合浮動,只讓浮動在父盒子內部影響,不影響外部的其他盒子.
2.父級添加overflow屬性
可以給父級添加overflow屬性,將其屬性值設定為hidden,auto或scroll
注意是給父元素添加的，
缺點:無法顯示溢位的部分.
3.父級添加:after偽元素
:after方式是額外標簽法的升級版,也是給父元素添加.
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 專有 */
*zoom: 1;
}
優點:沒有增加標簽,結構更加簡單
缺點:照顧低版本瀏覽器
代表網站:百度,淘寶網,網易等等.
4.父級添加雙偽元素
也是給父元素添加
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
優點:代碼更加簡潔
缺點:照顧低版本瀏覽器
代表網站:小米,騰訊等等
5.為什么需要清除浮動:
1.父級別沒高度
2.子盒子浮動了，
3.影響下面布局了,那我們就應該浮動了.
29.CSS屬性的書寫順序:
1.布局定位屬性:
display/position/float/clear/visibility/overflow(建議display第一個寫,畢竟關系到模式)
2.自身屬性:
width/height/margin/padding/border/background
3.文本屬性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他屬性(CSS3):content/cursor/border-radius/bos-shadow/text-shadow/background:linear-gradlient....
30.頁面布局整體思路:
1.必須確定頁面版型(可視區域),我們測量可得知.
2.分析頁面中的行模塊,以及每個行模塊中的列模塊,其實頁面布局是第一準則.
3.一行中的列模塊經常浮動布局,先確定每個列的大小,之后確定位置,頁面布局的第二準則
4.制作HTML結構,我們還是遵循,先有結構,后有樣式的原則,結構永遠最重要.
5.所以,先理清楚布局結構,再撰寫代碼尤其重要,這個需要我們多多積累.
31.導航欄注意點:
實際開發中,我們不會直接用鏈接a而是用li包含(li+a)的寫法
1.li + a 更加的清晰,一看這個就是有條理的表型內容，
2.如果直接用a,搜索引擎容易辨別為有堆砌關鍵字的嫌疑(故意堆砌關鍵字容易被搜索引擎降權的風險,從而影響網路),從而影響網站排名.
3.這個nav導航欄可以不給寬度,將來可以繼續添加其余文字.
4.因為導航欄里面的文字不一樣多,所以最好給鏈接a,左右padding撐開盒子,而不是指定寬度.
(行內塊之間有空隙,可以加浮動消除這個縫隙)
(注意行內元素給左右內外邊距)
32.定位
1.某個元素可以自由的在一個盒子內移動位置,并且壓住其他的盒子，
2.當我們在滾動視窗的時候,盒子是固定在某些位置的.
以上效果,標準流和浮動無法實作的,此時需要定位來實作.
所以:
1.浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,經常用于橫向排列盒子
2.定位則是可以讓盒子自由在某個盒子移動位置或者固定螢屏中某個位置,并且可以壓住其他盒子.
32.1.定位的組成
1.定位:將盒子定在某一個位置,所以定位也是在擺放盒子,按照定位的方式移動盒子.
定位=定位模式 + 邊偏移
定位模式用于指定一個元素在檔案中的定位方式,邊偏移則決定了該元素的最終位置，
position
static： 靜態定位
(物件遵循常規流，此時4個定位偏移屬性不會被應用， )
relative： 相對定位
( 物件遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素， )
absolute： 絕對定位
( 物件脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素，盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊， )
fixed： 固定定位:
( 與absolute一致，但偏移定位是以視窗為參考，當出現滾動條時，物件不會隨著滾動， )
sticky： 物件在常態時遵循常規流，它就像是relative和fixed的合體，當在螢屏中時按常規流排版，當卷動到螢屏外時則表現如fixed，該屬性的表現是現實中你見到的吸附效果，（CSS3）
1.1.邊位移
top 頂部偏移量,定義元素相對于父元素上邊線的位置.
bottom 底部偏移量,定義元素相對于父元素下邊線的位置.
left 左側偏移量,定義元素相對于父元素左邊線的位置.
right 右側偏移量,定義元素相對于父元素右邊線的位置.
32.2.靜態定位(了解)
靜態定位就是無定位的意思.
語法是:
選擇器 {position: static;}
靜態定位按照標準流的特性擺放位置,他沒有偏移.
靜態定位在平時很少會用到.
32.3.相對定位 relative(重要)
相對定位是元素在移動位置的時候,是相對它原來的位置來說的(自戀型)
語法是:
選擇器 {position: relative;}
相對定位的特點:(務必記住)
1.它相對于自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)
2.原來在標準流的位置繼續占有,后面的盒子仍然以標準流的方式對待它，(不脫標,繼續保留原來的位置.)
因此,相對定位并沒有脫標,他是最典型的給絕對定位當爹的...
32.4.絕對定位absolute(重要)
絕對定位是元素在移動位置的時候,是相對于他的祖先元素來說的(拼爹型)
語法:
選擇器 {position:absolute;}
絕對定位的特點(務必記住)
1.如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為準定位(Document檔案)
2.如果祖先元素有定位(相對,絕對,固定定位),則以最近的一段有定位的元素為參考點移動位置.
3.絕對定位不再占有原先的位置，(脫標)
32.5.子絕父相的由來:
弄清楚這個口訣,就明白了絕對定位和相對定位的使用場景.
意思:子級使用絕對定位,父級則需要相對定位
1.子級絕對定位,不會占有位置,可以放到父盒子里面任何一個地方,不會影響其他兄弟盒子，
2.父盒子需要加定位限制子盒子在父盒子內顯示，
3.父盒子布局時,需要占有位置,因此父親只能是相對定位，
這個就是子絕父相的由來,所以相對定位經常用來作為絕對定位的父級，
總結:因為父級需要占有位置,因此是相對定位,子盒子不需要占有位置,則是絕對定位，
當然子絕父相不是一成不變的,如果父元素不需要占有位置,子絕父絕也會遇到，
32.6.固定定位(重要)
固定定位是元素固定于瀏覽器可視區域，主要使用場景:可以在瀏覽器滾動的時元素的位置不會改變，
語法:
選擇器 {position: fixed;}
固定定位的特性:
1.以瀏覽器的可視視窗為參考點移動元素.
1.1.跟父元素沒有任何的關系
1.2.不隨著滾動太的滾動而滾動
2.固定定位不在占有的原先位置上.
(小技巧:不要直接控制圖片,給圖片一個父盒子是最好的情況)
固定定位也是脫標的,其實固定定位就可以看做是一種特殊的絕對定位.
(小技巧:固定在版心右側位置
小演算法:
1.讓固定定位的盒子left:50%;走到瀏覽器可視區域(也可以看做版心)的一半位置，
2.讓固定定位的盒子margin-left:版心寬度的一半距離，多走版心寬度的一半位置，
就可以讓固定定位的盒子貼著版心右側對齊了，
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/*1.走瀏覽器寬度的一半*/
left: 50%;
/*2.版心是800,走400px*/
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
)
32.7.粘性定位sticky(了解)
粘性定位可以被人為是相對定位和固定定位的混合sticky
語法規范:
選擇器 {position:sticky;top: 10px;}
粘性定位的特點:
1.以瀏覽器的可試視窗為參照點移動元素(固定定位的特點)
2.粘性定位是占有原先的位置(相對定位的特點)
3.必須添加top,left,right,buttom其中一個才有效.
32.8 定位的總結:
定位模式 是否脫標 移動位置 是否常用
static 否 不能使用偏移 很少
relative 否(占位置) 相對于自身位置移動 常用
absolute 是(不占位置) 帶有定位的父級 常用
fixed 是(不占位置) 瀏覽器可視區域 常用
sticky 否(占位置) 瀏覽器可視區域 當前階段很少.
32.9.定位的疊放順序:z-index
在使用定位布局時,可能會出現盒子重疊的情況,此時,可以使用z-index來控制盒子的前后順序，(z軸)
語法:
選擇器 {z-index:1;}
數值可以是正數,負數或0,默認是auto,數值越往大,盒子越靠上，
如果屬性值相同,則按照書寫順序,后來居上
數字后面不能加單位.
z-index只有定位才有的屬性.
32.10 絕對定位居中演算法
1.加了絕對定位的盒子不能通過margin:0 auto;水平居中,但是可以通過以下的計算方法實作水平居中和垂直居中，
水平居中:
/* 1.left 50% 父容器寬度的一半 */
left: 50%;
/* 2.margin-left 負值一半寬度,比如寬度是200,就拿100 */
margin-left: -100px;
垂直居中:
top: 50%;
/* 2.margin-top 負值一半寬度,比如寬度是200,就拿100 */
margin-top: -100px;
32.11 定位的特殊性:
1.行內元素添加絕對或者固定定位,可以直接設定高度和寬度，
2.塊級元素添加絕對定位或者固定定位,如果不給寬度或者高度,默認是內容大小，
3.脫標的盒子不會觸發外邊距坍塌的
(浮動元素,絕對定位(固定定位)元素都不會觸發外邊距合并的問題，)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262863.html
標籤：Html/Css
下一篇：JavaScriptBOM操作