CSS-2
day 39css
學習連接：https://www.cnblogs.com/yuanchenqi/articles/5977825.htmlhtml
4 文本屬性
font-size: 10px; text-align: center; 橫向排列 line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比 vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效 text-indent: 150px; 首行縮進 letter-spacing: 10px; word-spacing: 20px; text-transform: capitalize; 全部單詞的首字母大寫
5 邊框屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: turquoise;
height: 100px;
/*text-align: center;*/
line-height:100px;
/*這裏height 設置值和line-height 相同值的話。咱們可讓文本內容居中*/
}
.div1{
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div class="div1">介紹文本</div>
</body>
</html>
border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
5 列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> 這個比較重要
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
7 dispaly屬性
none 隱藏標籤（位置也消失） block inline inline-block
內聯標籤不能設置長和寬，塊級元素能夠python
可是咱們能夠再內聯標籤的屬性值加上一個屬性 display：blockapi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p,span,a{
width: 100px;
height: 100px;
}
div{
background-color: red;
}
p{
background-color: blue;
}
span{
background-color: greenyellow;
display: inline-block;
/*display: block;*/
}
a{
background-color: blueviolet;
display: inline-block;
}
</style>
</head>
<body>
<div>介紹文本</div>
<p>heloo world</p>
<span>xxx</span>
<a href="xx">click</a>
</body>
</html>
display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2,p,span,a{
width: 100px;
height: 100px;
}
.div2{
background-color: red;
}
p{
background-color: blue;
}
span{
background-color: greenyellow;
display: inline-block;
/*display: block;*/
}
a{
background-color: blueviolet;
display: inline-block;
}
.outer{
word-spacing: -5px;
}
</style>
</head>
<body>
<div class="div2">介紹文本</div>
<p>heloo world</p>
<!--咱們想讓span 和 a 標籤以前的空隙去掉，因此咱們在他兩的上方添加一個父級標籤，設置屬性-->
<div class="outer">
<span>xxx</span>
<a href="xx">click</a>
</div>
</body>
</html>
8 外邊距和內邊
- margin（外邊距）: 用於控制元素與元素之間的距離（標籤與標籤之間的距離）；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框) 圍繞在內邊距和內容外的邊框。
- Content(內容) 盒子的內容，顯示文本和圖像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test1{
width: 200px;
height: 200px;
background-color: turquoise;
border: 30px solid red;
padding: 40px;
margin: 20px;
}
.test2{
width: 200px;
height: 200px;
background-color: yellow;
border: 30px solid darkslategray;
padding: 40px;
}
body{
border: 2px solid darkslateblue;
/*margin: 0px;*/
}
</style>
</head>
<body>
<!-- body 標籤和 html 標籤默認有一個距離，若是要是想修改的話，咱們加一個margin:0px-->
<div class="test1">
hello world
</div>
<div class="test2">
hello bigbao
</div>
</body>
</html>
代碼效果以下圖所示佈局
思考2：學習
margin collapse（邊界塌陷或者說邊界重疊）字體
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當咱們上下排列一系列規則的塊級元素（如段 落P）時，那麼塊元素之間由於外邊距重疊的存在，段落之間就不會產生雙倍的距離。又好比停車場網站
1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值spa
2父子div
if 父級div中沒有 border，padding，inline content其中的任意一個，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content 中的其中一個，而後按此div 進行margin（這個若是是兄弟的話，那麼兄弟之間不須要知足這個條件，也就是說兄弟之間即便 border，padding，inline content其中的任意一個，也能夠實現margin） ，就好比下面咱們想實現test1 和 outer 以前實現margin top : 50px,這裏咱們要是不在outer 的content 裏寫內容或者不在.outer 設置border的話，他會和往上找也就是找到了body ,從而實現和body50px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test1{
width: 200px;
height: 200px;
background-color: turquoise;
border: 30px solid red;
padding: 40px;
margin-top: 50px;
}
.test2{
width: 200px;
height: 200px;
background-color: yellow;
border: 30px solid darkslategray;
padding: 40px;
}
.outer{
border: 5px solid hotpink;
background-color: darkcyan;
}
body{
border: 10px solid darkslateblue;
margin: 0px;
}
</style>
</head>
<body>
<!-- if 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，
直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div 進行margin -->
<div class="outer">
<!--inline content 文本-->
<div class="test1">
hello world
</div>
<div class="test2">
hello bigbao
</div>
</div>
</body>
</html>
9 float屬性××××××
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float纔會脫離文檔流。
---部分無視和徹底無視的區別？須要注意的是，使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍(能夠說是部分無視)。而對於使用absolute position脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。(能夠說是徹底無視)
浮動的表現
定義：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的浮動框以後的塊框表現得就像浮動框不存在同樣。（注意這裏是塊框而不是內聯元素；浮動框只對它後面的元素形成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，因此文本不會被擋住，這是float的特性，即float是一種不完全的脫離文檔流方式。不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。
現象1:
假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。此外，浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。 浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。
現象2:
(1)左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會照成覆蓋現象，只有DIV造成覆蓋現象。
解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設置margin樣式。
(2)上下結構div盒子重疊現象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
.container{
border:1px solid red;width:500px;
}
#box1{
background-color:green;float:left;width:100px;height:100px;
}
#box2{
background-color:deeppink; float:right;width:100px;height:100px;
}
#box3{
background-color:pink;height:40px;
}
</style>
</head>
<body>
<div class="container">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
</div>
<div id="box3">box3</div>
</body>
</html>
這裏咱們看到"box1 塊"左浮動 「box2塊」 右浮動
這樣咱們的box3 就頂上去了跑到container下面了（container 飄在box3 上方）。如今想辦法去把box3 落到下面來，清除浮動
清除浮動：
在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法： clear : none | left | right | both 取值： none : 默認值。容許兩邊均可以有浮動對象 left : 不容許左邊有浮動對象 right : 不容許右邊有浮動對象 both : 不容許有浮動對象 可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
.clearfix:after { <----在類名爲「clearfix」的元素內最後面加入內容；
content: "."; <----內容爲「.」就是一個英文的句號而已。也能夠不寫。
display: block; <----加入的這個元素轉換爲塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設爲隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已；
line-height: 0; <----行高爲0；
height: 0; <----高度爲0；
font-size:0; <----字體大小爲0；
}
.clearfix { *zoom:1;} <----這是針對於IE6的，由於IE6不支持:after僞類，這個神奇的zoom:1讓IE6的元素能夠清除浮動來包裹內部元素。
整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。
之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
.container{
border:1px solid red;width:500px;
}
#box1{
background-color:green;float:left;width:100px;height:100px;
}
#box2{
background-color:deeppink; float:right;width:100px;height:100px;
}
#box3{
background-color:pink;height:40px;
border:5px solid red;
}
.clearfix:after{ content: ""; display: block; clear: both; }
</style>
</head>
<body>
<div class="container clearfix">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
</div>
<div id="box3">box3</div>
</body>
</html>
話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。
只要寫一個.clearfix就好了，而後在須要清浮動的元素中 添加clearfix類名就行了。
如：
<div class="head clearfix"></div>
方式2：（不推薦）
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
10 position(定位)
1 static
static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。
2 position: relative／absolute
relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
relative 相對偏移（相對定位是相對於該元素在文檔流中的原始位置，這裏要是改爲absolute的話，相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素））
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
.div1{
width: 200px;
height: 200px;
background-color: yellow;
}
.div2{
width: 200px;
height: 200px;
background-color: chartreuse;
position: relative;
left: 100px;
top:100px;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
.outer{
position: ;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
absolute 絕對定位。
定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，而且保證相對定位參照物不會偏移便可。
3 position:fixed(固定死位置)
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
}
.div1{
width: 200px;
height: 200px;
background-color: yellow;
}
.div2{
width: 200px;
height: 200px;
background-color: chartreuse;
position: absolute;
left: 100px;
top:100px;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
/*.outer{*/
/*width: 2000px;*/
/*height: 2000px;*/
/*background-color: darkslateblue;*/
/*}*/
.returnTop{
width: 80px;
height: 50px;
background-color: darkgray;
text-align: center;
line-height: 50px;
color: azure;
position: fixed;
bottom: 20px;
right: 8px;
}
</style>
</head>
<body>
<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div style="height: 2000px;background-color: rosybrown"></div>
<div class="returnTop"> 返回頂部 </div>
</body>
</html>
text-align: center;
line-height: 50px;
這一步是文檔居中
4 僅使用margin屬性佈局絕對定位元素
此狀況，margin-top 和margin-left 的值再也不對文檔流中的元素產生影響，由於該元素已經脫離了文檔流。另外，無論它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性佈局相對定位元素。
層級關係爲：
<div ——————————— position:relative;
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;（這裏設置的不是top,left,而是找的margin）
<div box3
效果圖：
- 1. css2
- 2. CSS2
- 3. css2--collapse
- 4. CSS2 TABLE
- 5. 前端之CSS2
- 6. 初識HTML和CSS2
- 7. css css2 css3_CSS很好
- 8. CSS2理解-float篇
- 9. CSS2中的定位屬性
- 10. CSS2：盒模型/背景
- 更多相關文章...
- • W3C CSS 活動 - W3C 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css2
- 2. CSS2
- 3. css2--collapse
- 4. CSS2 TABLE
- 5. 前端之CSS2
- 6. 初識HTML和CSS2
- 7. css css2 css3_CSS很好
- 8. CSS2理解-float篇
- 9. CSS2中的定位屬性
- 10. CSS2：盒模型/背景