奇舞學院學習筆記之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是relationship關係的縮寫，代表引進的東西與當前頁面的關係。- 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不換行 |prehtml中怎麼寫就怎麼展示。
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的初始值為transparentmargin-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|thickborder-style:none|solid|dashed|dotted|doubleborder-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和::aftercontent
<!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