css系統學習

時間 2019-12-01

標籤 css 系統學習欄目 CSS 简体版

原文原文鏈接

一、css加載過程：瀏覽器對多個樣式來源進行疊加，把各個零散的整合成一個總體，讓後者覆蓋前者（！important有最高執行權）css

　　瀏覽器加載html------->dom樹（無樣式變化）html

　　瀏覽器加載css--------->渲染視圖樣式bootstrap

　　css5個來源：瀏覽器默認樣式（最低）、瀏覽器用戶自定義樣式、<link>引用樣式、<style>內部樣式、<a style="">屬性樣式（最高）；瀏覽器

二、css與html如何結合：選擇器dom

　　!important > <a style=""> > id > class > tag > * 佈局

　　標籤選擇器（*選擇器級別優先級最低）字體

　　屬性選擇器（id和class都是屬性，特殊的屬性）：編碼

　　　　1）只經過屬性名選擇：img[title]{}url

　　　　2）經過屬性名和屬性值選擇：input[type="text"]{}spa

　　僞類：

　　　　UI僞類：link、hover、active、visited、focus、target

　　　　結構化僞類：nth-child（even）、nth-child（odd）等

　　僞元素：能夠爲元素先後添加內容。這裏的「內容」還能夠寫成unicode編碼的方式

　　　　：before、：after

　　多標籤選擇器通常和html上下文有關，它有如下集中分類：

　　　　1）選擇一個祖先的全部子孫節點，例如 div p{…}

　　　　2）選擇一個父元素的全部直屬節點，例如 div > p{…}

　　　　3）選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}

　　　　4）選擇某一個元素的全部同胞節點，例如 span ~ a{…}

　　特指度：css選擇器表達式的重要程度，I-C-E公式；I(id 加100)、C(class 加10)、E(element 加1)；!important優先級最高；*最低；

　　簡版規則：包含ID的選擇器賽過包含Class的選擇器，包含Class的選擇器賽過包含元素的選擇器；不一樣選擇器的特指度比較時，不區分加載的順序；設置的樣式高於繼承的樣式，不用考慮特指度

三、頁面呈現：

　　包裹性：寬度根據內容來定（<table>和<div>在容器尺寸上最大區別是：table具備「包裹性」）；而提到「包裹性」，又不得不讓我想到float和absolute

　　文字：設置字體、字號、加粗、背景等；

　　tips：使用相對值；

　　塊：盒子模型、浮動、定位、display、背景、字體等；

　　盒子模型：content、padding、border、margin；

　　　　tips：平時設置寬度就是content寬度；包裹內容狀況下（內容的寬度按照內容計算，盒子的寬度再加上padding，border，margin），display=table；

　　　　　　盒子寬度（不包括margin），box-sizing=border-box；縱向margin是會重疊的，大的會把小的「吃掉」；

　　float：爲了「文字環繞效果」（一個圖片一段文字）；float會有破壞性（破壞了父標籤的本來結構，被設置了float的元素會脫離文檔流）;float會有「包裹性」；

　　　　　清空格（根本緣由是因爲float會致使節點脫離文檔流結構）；float佈局網頁；

　　　　　清楚float：

　　　　　　1）爲父元素添加overfloaw：hidden；

　　　　　　2）浮動父元素；

　　　　　　3）在全部浮動元素下方添加clear：both的元素；

　　　　　　4)定義clearfix類，對float元素的父元素應用這同樣式；

　　　　　　.clearfix:after{
   　　　　　　 content: "";
    　　　　　　display: table;
    　　　　　　clear: both;
　　　　　　}
　　　　　　.clearfix{
   　　　　　　 *zoom: 1;      /* 兼容IE低版本*/
　　　　　　}

　　display：

　　　　table：具備包裹性（寬度根據內容而定），也是塊；

　　　　table-cell：多列布局；與float:left或是position:absolute屬性儘可能不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性

　　　　inline：「流」，寬度和高度都是auto；

　　　　　　　　轉成「塊」元素------>對inline元素設置float/對inline元素設置position:absolute、fixed/display:block

　　　　block:盒子模型；

　　　　inline-block：外部看來是「流」，可是自身確實一個「塊」；能被父容器居中、能設置高度寬度和margin、不會佔一整行

　　position：static/relative/absolute/fixed

　　　　static：（靜態定位）是默認值，即全部的元素若是不設置其餘的position值，它的position值就是static，有它跟沒有它同樣；

　　　　relative：相對定位（相對於自身位置），會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化，relative會產生一個新的定位上下文（子元素有absolute定位）；

　　　　absolute：脫離了文檔結構，會產生破壞性；具備「包裹性」；具備「跟隨性」；會懸浮在頁面上方；設置了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位；若想要元素A緊跟在元素B的上方，可經過設置元素B爲absolute，而後調整B的margin值來肯定（會使inline元素被「塊」化，會使得元素已有的float失效）

　　　　fixed：根據瀏覽器肯定位置（有「破壞性「）；

四、佈局：

　　三列布局

　　bootstrapt柵格佈局

　　百度首頁佈局

　　微博佈局

　　人人網布局

　　瀑布流佈局

五、文字垂直水平居中：

　　<style>

　　.single_valign{
　　　　width: 100px;
　　　　height: 50px;
　　　　line-height: 50px;
　　　　overflow: hidden;
　　}
　　.more_valign1{
　　　　padding: 20px 0;
　　}
　　.more_valign2{
　　　　display: table-cell;
　　　　width: 200px;
　　　　height: 500px;
　　　　vertical-align: middle;
　　}
　　.more_valign2 span{
　　　　display: block;
　　}

　　</style>

　　<p class="single_valign">單行垂直居中</p>
　　<p class="more_valign1">
　　　　多行垂直居中，多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中
　　</p>
　　<p class="more_valign2">
　　　　<span>多行垂直居中，多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中</span>
　　</p>

圖片垂直居中：

使用background這個屬性

.pic_list li{
　　list-style: none;
　　float: left;
　　width: 200px;
　　height: 200px;
　　border: 1px solid blue;
　　margin: 20px 30px;
　　padding: 20px 10px;
}
.pic_list li img{
　　width: 100%;
　　height: 100%;
}

使用display：table-cell這個屬性，可是這個屬性不支持margin，因此若想添加margin屬性，還須要在li外面再包裹一層

.pic_list1 li{
　　list-style: none;
　　display: table-cell;
　　width: 200px;
　　height: 200px;
　　border: 1px solid blue;
　　margin: 20px 30px;
　　padding: 20px 10px;
　　vertical-align: middle;
}
.pic_list1 li img{
　　display: block;
　　width: 100%;
　　height: 100%;
}