继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...
內容總結:
1.繼承性和層疊性繼承性: 像 一些文本的屬性: color,text-*,line-*,font-* 這些屬性是可以繼承下來的2.層疊性就是權重 ,誰的權重大就顯示誰的屬性如何看權重:就是數數,選擇器的個數 :id class 標簽 1.針對于選中的標簽(誰的權重大 就會顯示誰的屬性)2.如果權重一樣大,以 =>后設置的為準3.如果是繼承下來的屬性,它權重為0 ,跟**選中的標簽**沒有可比性4.如果權重都都為0,那么誰描述的近(就近原則),就顯示誰的屬性5.如果權重為0,描述的一樣近的時候,回顧原始狀態(數權重)3.盒模型:屬性:width :內容的寬度height: 內容的高度padding:內容到border的區域border:邊框margin:標準流的標簽 margin的使用通常是用在兄弟之間的標簽坑: margin水平方向是沒有任何問題垂直方向 會出現'塌陷問題' 以設置最大的值為基準,以后在寫網站標準流的盒子 垂直方向只設置一個方向即可如果兒子踹他爹可以踹 那么只需要給父加border,那么問題來了頁面冗余,可能會影響界面的布局記住:前提是標準流下的盒子如果是父子之間,調整位置,那么使用paddingmargin的塌陷要避免,只設置一個方向浮動元素 對行內元素和塊元素的影響:(1)如果標準流下的標簽浮動,定位(絕對定位,固定定位)了 不區分是行內還是塊級元素可以任意的設置寬高(2)浮動對塊元素的影響,像把塊元素轉化成行內元素*************浮動不做壓蓋現象*****************
07-css的繼承性和層疊性
css有兩大特性：繼承性和層疊性
繼承性
面向對象語言都會存在繼承的概念，在面向對象語言中，繼承的特點：繼承了父類的屬性和方法。那么我們現在主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。
繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。
記住：有一些屬性是可以繼承下來 ：?color?、?font-*、?text-*、line-*?。主要是文本級的標簽元素。
但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./reset.css"><style>/**{padding: 0;margin: 0;}ul{list-style: none;}a{text-decoration: none;}*/.box{/*width: 420px;*/height: 50px;background-color: purple;}.box ul{/*width: 100%;*/height: 50px;}.box ul li{/*浮動的標簽不區分塊還是行內標簽,浮動的標簽可以任意的設置寬高*//*background-color: red;*/float: left;/*width: 70px;*/height: 50px;/*像一些字體屬性是可以繼承下來: text-*,color,font-**/font-size: 14px;color: green;/*文本水平居中*/text-align: center;/*盒子水平居中*//*margin: 0 auto;*//*行高 == 盒子的高度 實現文本垂直居中*/line-height: 50px;margin: 0 10px;/*cursor: pointer;*/}.box ul li a{color: green;height: 50px;display: block;}</style> </head> <body><div class="box"><ul><li><span>秒殺啊啥的當</span></li><li><a href="#">優惠券摳腳大漢就看得見肯定會</a></li><li><a href="#">PLUS會員</a></li><li><a href="#">閃購</a></li><li><a href="#">拍賣</a></li><li><a href="#">京東服飾</a></li></ul></div><!-- <audio src="./Deadmau5 - Battle 3.mp3" controls></audio> --></body> </html> 列表浮動 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繼承性</title><style>.father{width: 100px;height: 100px;background-color: yellow;color: red;line-height: 100px;text-align: center;font-size: 20px;text-decoration: underline;}p{background-color: green;}</style> </head> <body><div class="father"><div class="child"><a href="#">alexsb</a></div></div></body> </html> 繼承層疊性
層疊性： 權重的標簽覆蓋掉了權重小的標簽，說白了 ，就是被干掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？ 非常簡單就是小學的數數。
數：id的數量 class的數量 標簽的數量，順序不能亂
是不是感覺明白了呢？好的，再給大家加深點難度。
1 <div id='box1' class="wrap1"> 2 <div id="box2" class="wrap2"> 3 <div id="box3" class="wrap3"> 4 <p>再來猜猜我是什么顏色？</p> 5 </div> 6 </div> 7 </div> View Code #box1 #box2 p{ color: yellow;}#box2 .wrap3 p{ color: red;}div div #box3 p{ color: purple;}div.wrap1 div.wrap2 div.wrap3 p{color: blue;} View Code好的。那么上面的這個案例大家是否懂了呢？那么接下來我們繼續看案例
還是上面那個html結構，如果我設置以下css，會顯示什么顏色呢。
1 #box2 .wrap3 p{ 2 color: yellow; 3 } 4 5 #box1 .wrap2 p{ 6 color: red; 7 } View Code答案是紅色的。結論：當權重一樣的時候 是以后來設置的屬性為準，前提必須權重一樣 。‘后來者居上 ’。
?
Good,我們繼續看下面的css，你來猜以下此時字什么顏色？
#box1 #box2 .wrap3{ color: red; }#box2 .wrap3 p{ color: green; } View Code答案是綠色。哈哈，是不是感覺快懵掉了。其實大家只要記住這點特性就可以。第一條css設置的屬性值，是通過繼承性設置成的紅色，那么繼承來的屬性，它的權重為0。它沒有資格跟我們下面選中的標簽對比。
那大家猜想一下如果都是被繼承來的屬性，那么字會顯示什么顏色呢？
#box1 #box2 .wrap3{color: red; } .wrap1 #box2{color: green; }小案例證明：權重都是0:那么就是"就近原則" ： 誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近。
小總結一下：
總結：
1.先看標簽元素有沒有被選中，如果選中了，就數數 （id,class,標簽的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，后來者居上
2.如果沒有被選中標簽元素，權重為0。
如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
08-層疊性權重相同處理
直接上代碼，看效果！
第一種現象：當權重相同時，以后來設置的屬性為準，前提一定要權重相同
?
#box2 .wrap3 p{ color: yellow; }#box1 .wrap2 p{ color: red; }我們會發現此時顯示的是紅色的。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*繼承性權重為0*/#box1{ color: yellow;}.wrap1 .wrap2{color: red;}</style> </head> <body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的顏色</p></div></div></div></body> </html> 權重深入1 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*繼承性權重為0*/.wrap1 #box2 div{ color: yellow;}#box1 .wrap2 div{ color: red;}</style> </head> <body><div class="wrap1" id="box1"><div class="wrap2" id='box2'><div class="wrap3" id="box3"><p>猜猜我的顏色</p></div></div></div></body> </html> 權重深入2?
第二種現象： 第一個選擇器沒有選中內層標簽，那么它是通過繼承來設置的屬性，那么它的權重為0。第二個選擇器選中了內層標簽，有權重。
所以 繼承來的元素 權重為0。跟選中的元素沒有可比性。
#box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; }我們會發現此時顯示的是綠色的。
?
第三種現象：如果都是繼承來的屬性，誰描述的近，顯示誰的屬性。'就近原則'
#box1 #box2 .wrap3{ color: red; }.wrap1 #box2{ color: green; }!important 的使用。
！important:設置權重為無限大?
!important 不影響繼承來的權重，只影響選中的元素。不要隨便使用!important,因為使用它會影響頁面的布局
09-盒模型
盒模型
在CSS中，"box model"這一術語是用來設計和布局時使用，然后在網頁中基本上都會顯示一些方方正正的盒子。我們稱為這種盒子叫盒模型。
盒模型有兩種：標準模型和IE模型。我們在這里重點講標準模型。
?
盒模型示意圖
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: red;padding: 20px;border: 5px solid green;}</style> </head> <body><div class="box"></div> </body> </html> 盒模型盒模型的屬性
width：內容的寬度
height: 內容的高度
padding：內邊距，邊框到內容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
?
如果讓你做一個寬高402*402的盒子，您如何來設計呢？
答案有上萬種，甚至上一種。
盒模型的計算
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 0;height: 0;background-color: red;padding: 150px; border: 1px solid green;}</style> </head> <body><!-- 302*302 如果想保持盒子的寬度不變,減width加padding,加width就要減padding--><!-- 標準盒子模型的計算盒子的寬度 = width+2*padding + 2*border--><div class="box"></div> </body> </html> 計算盒模型如果一個盒子設置了padding，border，width，height，margin(咱們先不要設置margin，margin有坑，后面課程會講解)
?
盒子的真實寬度=width+2*padding+2*border
盒子的真實寬度=height+2*padding+2*border
?
那么在這里要注意看了。標準盒模型，width不等于盒子真實的寬度。
另外如果要保持盒子真實的寬度，那么加padding就一定要減width，減padding就一定要加width。真實高度一樣設置。
?
10-padding(內邊距)
padding
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 80px;height: 70px;background-color: purple;/*padding-left: 20px;padding-top: 10px;*/color: green;border: 1px solid red;cursor: pointer;/**/padding: 10px;/*兩個值: 上下 左右*/padding: 10px 20px;/*三個值: 上 左右 下*/padding: 10px 20px 30px;/*上 右 下 左*/padding: 10px 20px 30px 40px;}</style> </head> <body><div class="box">李寧</div></body> </html> paddingpadding：就是內邊距的意思，它是邊框到內容之間的距離
另外padding的區域是有背景顏色的。并且背景顏色和內容的顏色一樣。也就是說background-color這個屬性將填充所有的border以內的區域
?
padding的設置
padding有四個方向，分別描述4個方向的padding。
描述的方法有兩種
1、寫小屬性,分別設置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;?
2、寫綜合屬性，用空格隔開
/*上 右 下 左*/ padding: 20px 30px 40px 50px ;/*上 左右 下*/ padding: 20px 30px 40px;/* 上下 左右*/ padding: 20px 30px;/*上下左右*/ padding: 20px;一些標簽默認有padding
?
比如ul標簽，有默認的padding-left值。
那么我們一般在做站的時候，是要清除頁面標簽中默認的padding和margin。以便于我們更好的去調整元素的位置。
我們現在初學可以使用通配符選擇器
*{padding:0;margin:0; }But，這種方法效率不高。
所以我們要使用并集選擇器來選中頁面中應有的標簽（不同背，因為有人已經給咱們寫好了這些清除默認的樣式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
11-border(邊框)
邊框
border:邊框的意思，描述盒子的邊框
邊框有三個要素： 粗細 線性樣式 顏色
border: solid <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;background-color: blue;/*border: 1px solid red;*//*一般用這個屬性干掉按鈕或者表單控件的默認邊框*//*border: none;*//*border-width: 5px 1px 5px 1px;border-style: solid dotted double dashed;border-color: red;*/border-top: 1px solid red;}</style> </head> <body><div class="box"></div></body> </html> border如果顏色不寫，默認是黑色。如果粗細不寫，不顯示邊框。如果只寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，并且黑色的邊框。
按照3要素來寫border
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */按照方向劃分
border-top-width: 10px; border-top-color: red; border-top-style: solid;border-right-width: 10px; border-right-color: red; border-right-style: solid;border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid;border-left-width: 10px; border-left-color: red; border-left-style:solid;上面12條語句，相當于 bordr: 10px solid red;
另外還可以這樣：
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;?
border:none；
border：0；
表示border沒有設置樣式。
使用border來制作小三角
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.box{width: 0px;height: 0px;/*background-color:red;*/border-left: 10px solid green;border-top: 10px solid transparent;border-bottom: 10px solid transparent; /*color: transparent;*/}</style> </head> <body><div class="box"></div> </body> </html> 制作三角?
/*小三角 箭頭指向下方*/div{width: 0;height: 0;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;}12-簡單認識下margin
margin
margin：外邊距的意思。表示邊框到最近盒子的距離。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.box{width: 300px;height: 300px;background-color: red;border: 1px solid green;/*border: 0px solid transparent;*//*padding-top: 50px;*/}.child{width: 200px;height: 200px;background-color: yellow;/*margin: 0 auto;*/margin-top: 50px;}</style> </head> <body><div class="box"><div class="child"></div></div></body> </html> 父子margin <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> </title><style>div{width: 200px;height: 200px;}div.a{background-color: yellow;margin-bottom: 100px;}div.w{background-color: green;margin-top: 50px }</style> </head> <body><div class="box"><div class="a"></div><div class="w"></div></div></body> </html> 塌陷問題 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style> .a{background-color: red;margin-right: 20px;}.w{background-color: green;margin-left: 20px;}</style> </head> <body><span class="a">alex</span><span class="w">wusir</span></body> </html> View Code /*表示四個方向的外邊距離為20px*/ margin: 20px; /*表示盒子向下移動了30px*/ margin-top: 30px; /*表示盒子向右移動了50px*/ margin-left: 50px;margin-bottom: 100px; 復制代碼13-標準文檔流
什么是標準文檔流
宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下 ，像 “織毛衣”。而設計軟件 ，想往哪里畫東西，就去哪里畫
標準文檔流下 有哪些微觀現象？
1.空白折疊現象
多個空格會被合并成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。
2.高矮不齊，底邊對齊
文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊
3.自動換行，一行寫不滿，換行寫
如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{font-size: 30px;}</style> </head> <body><span>alex</span><img src="../day45/timg.jpg" alt=""><a href="#">百度一下</a></body> </html> View Code <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{width: 100px;height: 100px;background-color: red;/*display: block;*//*在一行內顯示可以設置寬高*/display: inline-block;}</style> </head> <body><a href="#">百度一下</a><a href="#">百度一下</a><!-- 行內標簽:塊級標簽:--></body> </html> display屬性的使用 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a{float: left;background-color: red;width: 100px;height: 100px;}</style> </head> <body><a href="#">百度一下</a><a href="#">百度一下</a></body> </html> 浮動的元素不區分標準流的標簽 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{float: left;background-color: red;width: 200px;height: 200px;}</style> </head> <body><div>alex</div><div>nvshen</div><img src="./logo16366.gif" alt=""> </body> </html> 浮動元素對塊級標簽的影響14-塊級元素和行內元素
學習的初期，我們就要知道，標準文檔流等級森嚴。標簽分為兩種等級：
- 行內元素
- 塊級元素
比如h1標簽和span，同時設置寬高，來看瀏覽器效果，那么你會發現：
?
行內元素和塊級元素的區別：（非常重要）
行內元素：
- 與其他行內元素并排；
- 不能設置寬、高。默認的寬度，就是文字的寬度。
塊級元素：
- 霸占一行，不能與其他任何元素并列；
- 能接受寬、高。如果不設置寬度，那么寬度將默認變為父親的100%。
塊級元素和行內元素的分類：
在以前的HTML知識中，我們已經將標簽分過類，當時分為了：文本級、容器級。
從HTML的角度來講，標簽分為：
- 文本級標簽：p、span、a、b、i、u、em。
- 容器級標簽：div、h系列、li、dt、dd。
PS：為甚么說p是文本級標簽呢？因為p里面只能放文字&圖片&表單元素，p里面不能放h和ul，p里面也不能放p。
?
現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
-
行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。
-
塊級元素：所有的容器級標簽都是塊級元素，還有p標簽。
塊級元素和行內元素的相互轉換
我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。
塊級元素可以轉換為行內元素：
一旦，給一個塊級元素（比如div）設置：
display: inline;那么，這個標簽將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：
- 此時這個div不能設置寬度、高度；
- 此時這個div可以和別人并排了
行內元素轉換為塊級元素：
同樣的道理，一旦給一個行內元素（比如span）設置：
display: block;那么，這個標簽將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：
- 此時這個span能夠設置寬度、高度
- 此時這個span必須霸占一行了，別人無法和他并排
- 如果不設置寬度，將撐滿父親
標準流里面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要并排、并且就要設置寬高，那該怎么辦呢？辦法是：移民！脫離標準流！
css中一共有三種手段，使一個元素脫離標準文檔流：
- （1）浮動
- （2）絕對定位
- （3）固定定位
轉載于:https://www.cnblogs.com/ls13691357174/p/9448579.html
總結
以上是生活随笔為你收集整理的继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 9 README，全套代码
- 下一篇： 信足球vs.信上帝——从全球疯世界杯谈起