奇舞學院學習筆記之CSS一頁通
CSS概念與簡單選擇器
版本
- CSS Level 1
- CSS Level 2(CSS2.1規範)
- CSS Level 3
- Color Module Level 3
- Selectors Level 3
- Media Queries
- Fonts Level 3
CSS規則
- CSS就是:在頁面中選中一個或多個元素,給他們定義樣式,如顏色、字型、大小等。
- 選擇器–宣告塊–宣告–屬性–值
- 程式碼風格:可以放在一行/多行。推薦多行。
- 使用CSS:外鏈/嵌入/內聯
<link rel="stylesheet" href=" test.css">
link
表示一個連結,把外部的資源引入到當前的頁面,連結進來。rel
- CSS註釋:
/* 此處是CSS註釋 */
- 選擇器
- 通配選擇器:匹配所有元素。
*{}
- 標籤選擇器:匹配所有該元素。
p{}
- id選擇器:匹配指定id的元素。
#idName{}
- 類選擇器:可以給一個元素指定多個class,也可以給不同元素指定同一個class。
.className{}
- 屬性選擇器:給具有特定屬性的元素設定樣式。
input[disabled]{}
[for~="height"]{}
表示包含有height的for屬性的元素,這些是以空格分開的幾個值,這幾個值當中其中有一項是height,而不是指字串中包含height這個串。a[href^="#"]
選中的是href以#號開頭的a標籤。<a href="#balabala">
以#號開頭的href的a標籤表示頁面內的跳轉。[class*="icon-"]
*=號表示只要包含此字串即可,不管有沒有空格,不管在什麼位置。- 可以用逗號同時將多個選擇器定義同一個CSS樣式。
[class~="icon"],[class*="icon-"]={}
- 偽類選擇器(pseudo-classes)
- 基於DOM之外的資訊去選擇元素。比如根據使用者和網頁的互動狀態。如未訪問過的連結與訪問過的連結。
元素:某種狀態{}
a:link{}
未訪問過的連結a:visited{}
a:hover{}
滑鼠移到連結上的樣式a:active{}
滑鼠在連結上按下時的樣式a:focus{}
獲得焦點時的樣式- 注意:當滑鼠按下時也是獲得焦點時的狀態。即當
active
時同時會有focus
時的樣式。 - 可以用鍵盤上
tab
鍵切換頁面上的焦點。 - 選擇器組合(選中的總是後面的元素,不是前面進行限定的元素)
- 直接組合EF。如:
p.warning{}
,E[foo="abc"]{]
,E#myId{}
,#myId.warning{}
,.warning[foo="abc"]
。在組合時標籤總是放在前面的。 - 後代選擇器。如:
article p{}
。不管是兒子、孫子還是重孫子,都可以。 - 親子選擇器。如:
article > p{}
。只會選擇親兒子。 - 同時為一組選擇器定義樣式。如:
body, h1, h2, ul, ol{}
,[type="checkbox"],[type="radio"]{}
。
- 基於DOM之外的資訊去選擇元素。比如根據使用者和網頁的互動狀態。如未訪問過的連結與訪問過的連結。
- 通配選擇器:匹配所有元素。
文字樣式
font-family
字型。
- 使用逗號分隔的字型族名稱。
- 初始值由瀏覽器設定決定,可繼承。
- 一套字型設計的時候是以字型族的形式設計的。
字型匹配演算法
- 瀏覽器現獲取一個系統字型列表
- 對於元素中的每一個字元,使用
font-family
屬性及其它屬性進行匹配,如果能匹配就暫定該字型 - 如果步驟2沒有匹配上,選擇下一個可選的
font-family
執行步驟2 - 如果匹配到一個字型,但是字型中沒有該字元,繼續對下一個可選的
font-family
執行步驟2 - 如果沒有匹配到字型,使用瀏覽器預設字型。
通用字型族
Serif
襯線體(末端粗細有裝飾)
- Goergia
- 宋體
Sans-Serif
無襯線體(線條簡單一致)
- Arial
- Helvetica
- 黑體
- 微軟雅黑
Cursive
手寫體
- Caffisch Script
- 楷體
Fantasy
夢幻字型
- Comic Sans MS
- Papyrus
- Eapfinoj
Monospace
等寬字型(展示程式碼時用這個)
- Consolas
- Courier
- 中文字型
font-family
使用注意
- 英文字型放在中文字型前面
- 最後總是新增通用字型族
font-size
字型大小
- 定義文字的大小,可使用
px
、百分數
、em
等做單位。 - 取值
- 絕對值:
xx-small
|x-small
|small
|medium
|large
|x-large
|xx-large
。 - 相對值:
larger
|smaller
。 - 長度:
em
。長度單位em
:一般是相對於元素font-size
的計算值的;用在font-size
屬性上時,是相對於父元素的font-size
計算值。 - 百分數,相對於父元素計算值。
- 絕對值:
- 初識值為
medium
(由瀏覽器設定決定,一般為16px
),可繼承。 - 注意其中的倍數關係,
em
與px
,父子。
font-style
斜體正體
- 定義文字以斜體還是正常方式顯示。
- 取值:
normal
正常 |italic
真斜體 |oblique
偽斜體用演算法實現傾斜。 - 初始值:
normal
,可繼承。
font-weight
粗細
- 定義文字的粗細程度。
- 取值:
normal
|bold
|bolder
|lighter
|100
|200
| …900
。 - 初始值:
normal
,可繼承。 - 取值含義:
- 100 - Thin
- 200 - Extra Light
- 300 - Light
- 400 - Normal
- 500 - Medium
- 600 - Semi Bold
- 700 - Bold
- 800 - Extra Bold
- 900 - Black
- normal - 400
- bold - 700
- bolder - 比繼承值粗
- lighter - 比繼承值細
line-height
行高
- 元素所屬的
line box
所佔的高度。這一行所佔的高度,包括字和間距。 - 初識值:
normal
(具體值由瀏覽器決定),可繼承。 - 取值:
<長度>|<數字>|<百分比>
。使用長度em時,可能會因為繼承出現排版錯位問題,因為使用計算值需要乘。使用數字一般不會出現錯位問題,因為使用計算值不會乘上數字。 - 行高
font-height
建議都寫數字,不加單位。 - 段落文字一般取值
1.4~1.8
- 注意其中的倍數關係,父子。
- 小技巧:當給單行文字設定高度時,一般用
line-height
來設定高度。如導航欄。
font
縮寫
font
可以同時指定字型的斜體、粗細、大小、行高、字型族。font:bold 14px/1.7 Helvetica, sans-serif;
Web Fonts
- Web Fonts就是把字型檔案放到伺服器上,通過在CSS中引用字型檔案,讓瀏覽器使用伺服器上的字型。
<h1>In the evening one may praise the day.</h1>
<style>
@font-face{
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'),
local('Lobster-Regular'),
url(//lib.baomitu.com/fonts/lobster/lobster-v18-latin-regular.woff2)
format('woff2'),
url(//lib.baomitu.com/fonts/lobster/lobster-v18-latin-regular.woff)
format('woff');
}
h1{
font-family: 'Lobster', cursive;
}
</style>
text-align
- 定義文字在容器內的對齊方式。
- 取值:
left
|right
|center
|justify
。 - 初始值由HTML的
dir
屬性(表示文字書寫的方向)決定,可繼承。
letter-spacing
字元間距
- 單個字元之間的間距
word-spacing
單詞間距
- 英文單詞之間的間距
text-indent
文字縮排
- 指定文字縮排,之影響第一行,首行縮排。
- 取值:
normal
|<length>
|<percentage>
- 初始值為0,可繼承。
text-decoration
文字線
- 定義了文字的一些裝飾效果,如下劃線、刪除線等。
- 初始值為
none
無裝飾,可繼承。 - 其他值:
underline
|line-through
|overline
。
white-space
空白符
- 指定空白符如何處理。
- 取值:
normal
|nowrap
不換行 |pre
html中怎麼寫就怎麼展示。
word-break
單詞拆分
- 指定是否允許在單詞中間換行。
- 取值:
normal
|break-all
|keep-all
。
浮動
定位模式(Positioning schemes)
- 常規流(Normal Flow)
- 浮動(Float)
- 絕對定位(Absolute Positioning)
常規流(Normal Flow)
- 除了根元素、浮動元素和絕對定位元素外,其他元素都在常規流之內(in-flow)。
- 而根元素、浮動和絕對定位的元素會脫離常規流(out of flow)。
- 常規流中的盒子,屬於塊級格式化上下文或行級格式化上下文。
塊級格式化上下文(Block Formatting Context,BFC)
- 盒子在容器(包含塊)內從上到下一個接一個的放置。
- 兩個兄弟盒子之間的豎直距離由
margin
屬性決定。 - 同一個BFC內垂直
margin
會合並。 - 盒子的左外邊緣挨著容器(包含塊)的左邊。
行級格式上下文(Inline Formatting Context)
- 盒子一個接一個水平放置。
- 盒子之間的水平
margin
,border
和padding
都有效。 - 同一行的盒子所在的矩形區域叫行盒(Line box)。
- 當一個行盒放不下上下文內所有盒子時,會被分到多個垂直堆疊的行盒裡。
- 行盒內的水平分佈由
text-align
屬性決定。 - 如果一個行級塊無法分割(單詞,
inline-block
),該元素會被作為一個整體來決定放在某一個行盒。
浮動(float)
- 浮動元素從常規流中脫離,被漂浮在容器(包含塊)左邊或右邊。
- 浮動盒會一直飄到其外邊緣捱到容器邊緣或另外的浮動盒。
- 浮動元素不會影響其後面的流內塊級盒。
- 但是浮動元素後面的行級盒子會變短以避開浮動元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
img{
width: 300px;
height: 200px;
float: left;
}
p{
font-size: 14px;
line-height: 1.8;
border: 5px solid red;
}
span{
border: 3px solid blue;
}
</style>
</head>
<body>
<section>
<img src="xd.png" alt="熊頓說">
<img src="xd.png" alt="熊頓說">
<span>浮動元素從常規流中脫離,被漂浮在容器(包含塊)左邊或右邊。
浮動盒會一直飄到其外邊緣捱到容器邊緣或另外的浮動盒。
浮動元素不會影響其後面的流內塊級盒。
但是浮動元素後面的行級盒子會變短以避開浮動元素。
</span>
<p>浮動元素從常規流中脫離,被漂浮在容器(包含塊)左邊或右邊。
浮動盒會一直飄到其外邊緣捱到容器邊緣或另外的浮動盒。
浮動元素不會影響其後面的流內塊級盒。
但是浮動元素後面的行級盒子會變短以避開浮動元素。
</p>
</section>
</body>
</html>
層疊、繼承和CSS單位
選擇器的特異度(Specificity)
- 簡單選擇器的特異度級別
- Level 0:
*
- Level 1:
標籤選擇器
、偽元素
- Level 2:
類
、偽類
、屬性
- Level 3:
id選擇器
- Level 4:
內聯
- Level 0:
- 樣式覆蓋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>層疊、繼承和CSS單位</title>
<style>
.btn{
display: inline-block;
padding: .36em .8em;
margin-right: .5em;
line-height: 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #333;
}
.btn-primary{
color: #FFFFFF;
background: #218dee;
}
</style>
</head>
<body>
<button class="btn btn-primary">提交</button>
<button class="btn">取消</button>
</body>
</html>
important
- 在屬性的值後面加上
!important
,則該屬性的樣式就不會被覆蓋。除非想覆蓋它的那個屬性也加上!important
。(謹慎使用!) - 當你在寫會嵌入到第三方網站的元件時,如微博、QQ,可以使用
!important
。其他時候使用時會導致元件無法擴充套件。
Cascading
- CSS為什麼叫CSS:樣式是層疊的。
- CSS樣式的來源:
- 頁面開發者
- 使用者設定
- 使用者樣式:瀏覽器可以指定一個本地CSS檔案,開啟所有頁面時自動載入。
- 瀏覽器預設樣式
- Mozilla Firefox 預設樣式
- Google Chrome 預設樣式
- Internet Explorer 預設樣式
- 哪條宣告起作用?
- 找出匹配到的該屬性的所有宣告
- 根據規則來源,優先順序從低到高:
- 瀏覽器預設
- 使用者設定
- 網頁樣式
- 含
!important
的網頁樣式 - 含
!important
的使用者設定樣式
- 同一來源中,按照特異度排序,越特殊優先順序越高
- 特異度一樣時,按照樣式書寫順序,後面的優先順序高
預設值策略(Defaulting)
- 繼承
- 某些屬性會自動繼承其父元素的計算值,除非顯式指定一個值。
- 顯示繼承:
box-sizing:inherit;
。因為只有一部分屬性會自動繼承,如與文字相關的大部分屬性是可以繼承的;有一些屬性是不繼承的,如box-sizing
。
- 初始值
- CSS中,每個屬性都有一個初始值
background-color
的初始值為transparent
margin-left
的初始值為0
- 可以顯式重置為初始值,如
background-color:initial
CSS求值過程
- 由 DOM樹 & 樣式規則
- 經:filtering(對應用到該頁面的規則用以下條件進行篩選:選擇器匹配、屬性有效、符合當前media等)
- 得:宣告值(Declared Values,一個元素的某屬性可能由0到多個宣告值。如:
p{font-size:16px}
和p.text{font-size:1.2em}
) - 經:cascading(按照來源、!important、選擇器特異性、書寫順序等選出優先順序最高的一個屬性值)
- 得:層疊值(Cascaded Value,在層疊過程中,贏得優先順序比賽的那個值。如 1.2em)
- 經:defaulting(當層疊值為空時,使用繼承或初始值)
- 得:指定值(Specified Value,經過cascading和defaulting之後,保證指定值一定不為空)
- 經:resolving(將一些相對值或者關鍵字轉化成絕對值。如em轉為px,相對路徑轉為絕對路徑)
- 得:計算值(Computed Value,一般來說是,瀏覽器會在不進行實際佈局的情況下,所能得到的最具體的值。如60%。繼承是繼承的計算值)
- 經:formatting(將計算值進一步轉換。如關鍵字、百分比等都轉為絕對值)
- 得:使用值(Used Value,進行實際佈局時使用的值,不會再有相對值或關鍵字。如400.2px)
- 經:constraining(將小數畫素值轉為整數)
- 得:實際值(渲染時實際生效的值。如400px)
各種型別的值
- 關鍵值:(不需要加引號)
font-size:inatial
,box-sizing:inherit
,color:red
- 字串:(需要加引號)
content:"abc"
- URL:
background-image:url(/resources/img/xiong.png)
- 長度:
font-size:2em
,height:100px
,width:100px
- 百分比:
width:50%
,font-size:150%
- 整數:
z-index:9
- 浮點數:
line-height:1.8
- 顏色:
color:#fff
,color:rgb(0,0,100)
- 時間:
transition-duration:0.3s
- 角度:
transform:rorateX(deg)
- 函式:
content:attr(title)
,height:calc(100vh-100px)
長度單位
- 絕對單位
px
:畫素,對應顯示器的一個畫素點in
:英寸cm
:釐米mm
:毫米pt
:磅(1pt=1/72英寸)pc
:1pc=12pt
- 相對單位
em
:相對於該單位的一個font-size
大小的值。(常用)rem
:相對於根元素root即html
的font-size
。(手機上用)vh
:瀏覽器視窗高度的1%。(做全屏的佈局時用)vw
:瀏覽器視窗寬度的1%(做全屏的佈局時用)vmin
:vh
和vw
中的較小者vmax
:vh
和vw
中的較大者
顏色
- 關鍵字:147種顏色的關鍵字。如
red
- Hex:十六進位制的指定方法,如
#十六進位制的數
- RGB&RGB
- RGB:
rgb(255,0,0)
,從0到255的數值範圍內。 - RGBA比RGB增加了透明度。一個元素可以是半透明的,但是其中的元素不是半透明的。
rgba(0,0,0,0.1)
,其中最後一位表示透明度,取值範圍是0-1。
- RGB:
- RGB&RGB
- HSL&HSLA
- HSL:使用Hue(色相是色彩的基本屬性,就是平常所說的顏色的名稱,如紅色、黃色等。取值範圍是0-360)、Saturation(飽和度是指色彩的純度,值越高色彩越純,越低則逐漸變灰。取值範圍是0-100%)、Lightness(亮度,越高顏色越亮。取值範圍是0-100%)三個數字來表示顏色。
盒模型
width
:- 指定的是
content box
的寬度,不包含padding
、border
、margin
的寬度,僅僅包含content
的寬度。 - 百分數是指相對於父容器(包含塊)的
content box
的寬度。
- 指定的是
height
:- 指定
content box
高度。 - 百分數是相對於父容器(包含塊)的
content box
的高度。 - 只有當包含塊的高度不依賴該元素時,百分比高度才生效。
- 指定
padding
:- 內邊距:內容距離盒子的距離
padding-top
、padding-right
、padding-bottom
、padding-left
- 縮寫:
padding:上 右 下 左
、padding:上下 左右
margin
- 外邊距:一個盒子距離另外一個盒子的距離,不能超過這個數
margin-top
、margin-right
、margin-bottom
、margin-left
- 縮寫:
margin
margin
摺疊:margin
的真正含義是:在這個盒子外多遠的距離內不能再擺放其他的盒子!margin
可以為負值嗎?可以的。負值意味著兩個盒子有重疊,即允許這個盒子和其他的盒子重疊多少
box-sizing
(CSS3新增)- 改變盒模型的計算方式
- 取值:
border-box
|content-box
- 初始值:
content-box
border
- 邊框的三個要素:
border-width
:<length>
|thin
|medium
|thick
border-style
:none
|solid
|dashed
|dotted
|double
border-color
:<color>
- 邊框的四個方向:
border-top
、border-right
、border-bottom
、border-left
- 小技巧常用:用
border
做一個三角形:先設定四個方向的border
顏色,再將border
裡面的content
置為0,最後設定其他方向的border
的透明度為0,此時就可以得到一個三角形,可以通過設定得到不同方向不同角度的三角形。
- 邊框的三個要素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用CSS製作三角形</title>
<style>
.triangle{
border-width: 50px;
border-style: solid;
border-color: #aa120c #bbb #ccc #ddd;
width: 0px;
height: 100px;
transition: all 5s ease-in;
margin: 1em auto;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
min-width
&max-width
(有用)- 可以通過設定
article
的min-width
和max-width
來做文字的佈局,特別是響應式的佈局時比較有用。
- 可以通過設定
min-height
&max-height
(有用)- 可以通過設定這兩項,再加上
overflow:hidden
就可以實現有用的效果。 - 當內容溢位時,用
overflow
來控制溢位的內容如何展示:auto
|hidden
|inherit
|initial
|overlay
|scroll
|visible
- 可以通過設定這兩項,再加上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設定文字區域</title>
<style>
article{
border: 1px solid red;
max-width: 40em;
max-height: 6em;
overflow: scroll;
}
</style>
</head>
<body>
<article>
<p>當地時間4月9日,陳堅在芝加哥登上美聯航編號為3411的航班,計劃飛往路易斯維爾。</p>
<p>但飛機起飛前,美聯航聲稱有4位工作人員需要登機,
以客機“超員”為由要求4名乘客下機。
美聯航與乘客協商無果之後,“隨機”選取陳堅等4名乘客,
要求他們下飛機。
</p>
<p> 目擊者泰勒·布里奇斯表示,陳堅拒絕下飛機並表明自己是醫生,明天上午還要看病人,
他還曾說過類似“之所以選我,就因為我是中國人”的話。</p>
<p>陳堅與機組協商無果後,多名警察登機,強行將陳堅從其靠窗的座位上拽了出來。
拉拽過程中,陳堅一度大聲呼叫,隨後躺倒在地上被拖拽出去。
</p>
</article>
</body>
</html>
overflow
- 溢位控制
- 取值:
visible
|hidden
|scroll
|auto
- (
auto
是滾動條按需出現消失)
- (
視覺格式化模版–瀏覽器是怎麼排版的?
視口(Viewport)
- 瀏覽器的可視區域
- 使用者通過視口檢視網頁內容(透過窗戶看風景)
塊級元素(Block-level Elements)
- 塊級元素與盒子是兩個不同的概念,元素是HTML中一個個的標籤;盒子是在排版的時候,瀏覽器放置東西時的方式。
- 會被格式化成塊狀的元素,一塊一塊的,另起一行。
- 例如:
p
、div
、section
等 - 將
display
設定為block
、list-item
、table
使元素變為塊狀
行級元素/內聯元素(Inline-level Elements)
- 不會為其內容生成塊級框
- 讓其內容分佈在多行中,只是讓內容分佈在幾行裡,不是方方正正的一塊,而是一行一行的
display
設定為inline
、inline-block
、inline-table
使元素變為行級元素
盒子的生成
- 每個塊級元素生成一個主塊級盒(principal block-level box)
- 每個行級元素生成一個行級盒子,行級盒分佈於多行,盒子比較逆天。
- 並不是一個元素產生一個盒子,有的元素會生成多個盒子
Box Model - revisited
margin
:行級盒的margin-top
和margin-bottom
不會產生效果。但是行級盒的margin-left
和margin-right
會有效果。padding
:行級盒的padding-top
和padding-bottom
不影響佈局,不會影響元素的擺放。
塊級盒子中的字盒子的生成
- 塊級盒子中可以包含多個子塊級盒子
- 也可以包含多個行級盒子
- 不在行級元素裡面的盒子,會生成匿名行級盒。
- 塊級盒子中不能同時包含塊級和行級盒子。遇到這種會生成匿名塊級盒子來包裹行級盒。(要留意這一點!)
<div>
<h1>塊級元素中的塊級元素</h1>
<span>塊級元素中的行級元素</span>
</div>
- 行級盒子內的字盒子的生成
- 行級盒子內可以包含行級盒子
- 行級盒子包含一個塊級盒子時,會把塊級盒子拆成兩個行級盒子,這兩個盒子又會被匿名塊級盒子包含
<span>
<em>(行級元素中的行級元素)</em>
<p>(行級元素中的塊級元素)陳堅與機組協商無果後,多名警察登機,強行將陳堅從其靠窗的座位上拽了出來。
拉拽過程中,陳堅一度大聲呼叫,隨後躺倒在地上被拖拽出去。</p>
<strong>(行級元素中的行級元素)</strong>
</span>
display
屬性block
生成塊級盒inline
生成行級盒inline-block
生成行級盒(不會換行),為其內容生成塊級盒(可以設定width、height、margin、border、padding)none
在排版時將元素忽略(不展示此元素)
visibility
(相當於是透明的)- 控制元素展示(明明在那裡,但是對你不可見)
- 取值:
visible
|hidden
|collapse
- 初始值為
visible
Generated Content
- 控制元素。這個元素在CSS中多產生一個盒子,用來存放指定的內容
::before
和::after
content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generated content</title>
<style>
a::before{
content: '\1993'
}
a:after{
content: '('attr(href)')';
}
</style>
</head>
<body>
<a href="http://www.baidu.com">點選訪問</a>
</body>
</html>
定位與堆疊
定位模式(Positioning schemeschemes)
- 常規流(Normal Flow)
- 浮動(Float)
- 絕對定位(Absolute Positioning)
position
static
:非定位,預設值relative
:相對定位(相對自己)(仍在常規流內排版)absolute
:絕對定位,相對非static
祖先元素定位fixed
:相對於視口絕對定位
position:relative
- 在常規流裡面佈局
- 相對於自己本應該在的位置進行偏移
position:relative
- 使用
top
、left
、bottom
、right
設定偏移長度 - 流內其他元素當它沒有偏移一樣佈局(自己有個坑,出去串個門兒),所以它不會對其他元素造成佈局上的影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative</title>
<style>
figure{
width: 512px;
}
figure img{
display: block;
}
figcaption{
position: relative;
top: -28px;
background: rgba(0,0,0,0.3);
color: #FFFFFF;
font-size: 14px;
line-height: 2;
/*因為font-size為12px,line-height為2,故figcaption佔的高度是28px*/
padding: 0 1em;
}
</style>
</head>
<body>
<figure>
<img src="xd.png" alt="熊頓" width="512px">
<figcaption>熊頓一直在</figcaption>
</figure>
<p>願用我的微笑,拂去你所有的憂慮</p>
</body>
</html>
position:absolute
- 脫離正常流
- 相對於最近的非
static
祖先的padding box
定位 - 不會對流內元素佈局造成影響(自己沒坑,所在處可能別人也在,發生重疊)
- 可以有
margin
,但不會摺疊 - 自動計算
- 這些值都可以不指定:
top
,left
,right
,bottom
,width
,height
(它的auto
的值就是它本該呆的地方)不設定就是auto
,它會帶在本該呆的地方。
- 這些值都可以不指定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute</title>
<style>
figure{
width: 512px;
position: relative;
}
figure img{
display: block;
}
figcaption{
position: absolute;
/*設定position:absolute時,一定要先弄清其父級是誰*/
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.3);
color: #FFFFFF;
font-size: 14px;
line-height: 2;
padding: 0 1em;
box-sizing: border-box;
right: 0;
left: 0;
}
.absP{
position: absolute;
}
</style>
</head>
<body>
<figure>
<img src="xd.png" alt="熊頓" width="512px">
<figcaption>熊頓一直在</figcaption>
</figure>
<div>願用我的微笑,拂去你所有的憂慮</div>
<div class="absP">啦啦啦</div>
<div>願用我的微笑,拂去你所有的憂慮</div>
<div>願用我的微笑,拂去你所有的憂慮</div>
</body>
</html>
position:fixed
- 相對於Viewport定位
- 不會隨頁面滾動發生位置變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed</title>
<style>
nav{
position: fixed;
line-height: 2;
background: rgba(0, 0, 0, 0.3);
}
nav a{
padding: 0 1em;
color: rgba(255, 255, 255, 0.7);
}
nav a:hover{
color: #fff;
}
.go-top{
position: fixed;
right: 1em;
相關推薦
奇舞學院學習筆記之CSS一頁通
CSS概念與簡單選擇器
版本
CSS Level 1
CSS Level 2(CSS2.1規範)
CSS Level 3
Color Module Level 3
Selectors Level 3
Media Queries
Fonts Level
《SAS編程與數據挖掘商業案例》學習筆記之十一
ror otto -c ace mov 得到 replace 讀書筆記 集中
繼續讀書筆記,本文重點側重sas觀測值的操作方面, 主要包含:輸出觀測值、更新觀測值、刪除觀測值、停止輸出觀測值等
kubernetes學習筆記之十一:kubernetes dashboard認證及分級授權
第一章、部署dashboard
作為Kubernetes的Web使用者介面,使用者可以通過Dashboard在Kubernetes叢集中部署容器化的應用,對應用進行問題處理和管理,並對叢集本身進行管理。通過Dashboard,使用者可以檢視叢集中應用的執行情況,同時也能夠基於Dashboard建立或修
滲透測試學習筆記之案例一
0x00 前言很久沒有更新部落格了,主要是因為工作很忙,寫部落格也太耗時間了。但是突然發現,許久不寫很多東西都快生疏了。因而決定從今天起開始寫一些跟滲透測試相關的文章,也可以認為是學習筆記吧,留作日後的技術積累和參考吧。0x01 案列分析實驗環境:目標靶機:10.11.1.0
機器學習筆記之十一——整合學習之Boosting及AdaBoosting
上一篇記述了Bagging的思維與應用 : https://blog.csdn.net/qq_35946969/article/details/85045432
本篇記錄Boosting的思想與應用:AdaBoosting、GDBT(
Java Web 學習筆記之十一:RestEasy統一處理異常
JBoss RestEasy框架配置異常統一處理
前提
利用JBoss restEasy框架搭建的restful java web後臺應用
希望通過統一的方式對restful介面丟擲的異常進行
設計模式C++學習筆記之十一(c/c++面試筆試題)
一、指標與引用有什麼區別?
1、指標會佔用記憶體,引用不佔用記憶體。
2、引用在定義時必須初始化。
3、沒有空的引用,但是有空的指標。
二、static關鍵的幾個作用
1、函式體內的static變數的作用範圍為該函式體,該變數記憶體只分配一次,因此其值在下次再呼叫該函式時
CloudFoundry原始碼學習筆記之warden (一)
# warden 是一個有關資源隔離 和 資源管理 的框架
由三個 Gem [ em-warden-client, warden-client, warden-protocol ] 和 一個 Ruby 專案 [ warden ] 組成## warden-protocol/
Lucene學習筆記之(一)簡介和向文件寫索引並讀取文件
什麼是lucene?
lucene就是一個全文檢索的工具包。
Lucene的能幹什麼?
1. 獲取內容(Acquire Content)
Lucene不提供爬蟲功能,如果需要獲取內容需要自己建立爬蟲應用。
Lucene只做索引和搜尋工作。
2.建立文件(Buil
CSS深入理解學習筆記之padding
style left 使用 支持 背景色 cnblogs check chrom 所有 1、padding與容器尺寸之間的關系
對於block水平元素:①padding值暴走,一定會影響尺寸;②width非auto,padding影響尺寸;③width為auto或box
CSS深入理解學習筆記之relative
需要 定位 層疊 left 避免 str 作用 屬性 存在 1、relative和absolute的相煎關系
限制作用:①限制left/top/right/bottom定位;②限制z-index層級;③限制在overflow下的囂張氣焰。
relative和fixe
JavaSE 學習筆記之Java概述(一)
environ 電子 6.0 run javase 有一點 架構 spa form 一、Java的三種技術架構:
JAVAEE:Java Platform Enterprise Edition,開發企業環境下的應用程序,主要針對web程序開發;
JAVASE:Java P
C#.Net 設計模式學習筆記之創建型 (一)
應用 種類 單件 src nag abstract 子類 指定 相關 1、抽象工廠(Abstract Factory)模式
常規的對象創建方法:
//創建一個Road對象
Road road =new Road();
new
的問題:
實現依賴,不能應對“具
python學習筆記(十一)之函數
last 函數返回 traceback keep disco show 全局變量 not 默認參數 牛刀小試:
定義一個無參函數
1 >>> def myFirstFunc():
2 ... print("Hello python
matlab學習筆記之常用命令(一)
plot 我們 all 查看 學習 ear tla clear 但是 一.清除命令。
1.clear all;%清除所有變量,通常在matlab的工作區;另外斷點也會被清除掉
2.close all;%關閉所有窗口(除了編輯器窗口、命令窗口、幫助窗口)
3.cl
CSS深入理解學習筆記之line-height
初始 -a 上下 normal 每一個 不同 單行 盒子模型 等於 1、line-height的定義
定義:兩行文字基線之間的距離。
註:不同字體之間的基線是不同的。
2、line-height與行內框盒子模型
行內框盒子模型:
①內容區域(content
Java學習筆記二十一:Java面向對象的三大特性之繼承
類構造 接下來 多重 通過 prot 圖片 等級 ++ class Java面向對象的三大特性之繼承
一:繼承的概念;
繼承是java面向對象編程技術的一塊基石,因為它允許創建分等級層次的類。
繼承就是子類繼承父類的特征和行為,使得子類對象(實例)具有父
併發程式設計學習筆記之顯示鎖(十一)
ReentrantLock(重進入鎖)並不是作為內部鎖(synchronized)機制的替代,而是當內部鎖被證明受到侷限時,提供可選擇的高階特性.
1. Lock 和 ReentrantLock
Lock介面:
public interface Lock {
void lock();
ElasticSearch學習筆記之三十一 JAVA Client 之 GET APIs
ElasticSearch學習筆記之三十一 JAVA Client 之 GET APIs
Get API
Get Request
Optional arguments(引數配置)
Synchronous Execution(同步執行)
ElasticSearch學習筆記之二十一 指標聚合
ElasticSearch學習筆記之二十一 指標聚合
指標聚合
Avg Aggregation
Script
Value Script
Missing value
Weighted Avg Agg