Web前端三剑客之CSS基础
生活随笔
收集整理的這篇文章主要介紹了
Web前端三剑客之CSS基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 常識簡介
- css概述
- CSS作用
- CSS代碼主要組成部分
- 在頁面中使用CSS
- 內聯樣式表
- 內部樣式表
- 注意
- 外部樣式表
- CSS選擇器
- 元素選擇器
- 注意
- 類(class)選擇器
- ID選擇器
- 后代選擇器
- 子元素選擇器
- 相鄰兄弟元素選擇器
- 兄弟元素選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素
- CSS常用屬性
- 字體屬性
- 文本屬性
- 顏色和背景屬性
- 列表屬性
- 表格屬性
- CSS盒子模型
- border
- 注意：
- padding
- margin
- CSS元素布局與定位
- 注意
- 元素的定位屬性
- relative
- 注意
- 絕對定位
- fixed
- 元素的浮動屬性
- 左浮動
- div1浮動
- div2浮動
- div3浮動
- div4浮動
- 右浮動：
- div1浮動
- div2浮動
- div3浮動
- div4浮動
- 清除浮動
- 正常情況下：
- 左浮動后：
- 抗左浮動后：
- 右浮動后：
- 抗右浮動后
- 元素的顯示屬性
- 設置display
- 塊級元素轉換為行內元素
- 未轉換：
- 轉換后：
- 行內元素轉換為塊級元素
- 未轉換：
- 轉換后：
- inline-block
- 設置前：
- 設置后：
- 利用浮動實現child3 child4，對比child1 child2
- 元素的可見性屬性
- 隱藏前：
- 隱藏后：
- 元素的溢出處理屬性
- scroll
- hidden
- auto
常識簡介
css概述
CSS（Cascading Style Sheet）層疊樣式表是一種可控制網頁樣式并允許樣式與內容相分離的技術
CSS作用
CSS能夠對網頁的布局，字體，顏色，背景等圖文實現更精確的控制
CSS使得網頁的體積更小，下載速度更快，且可以實現多個頁面的自動更新
……………………
CSS代碼主要組成部分
CSS代碼主要由對象，屬性，屬性值三個基本部分組成。對象很重要，它指定了對哪些網頁進行樣式設置，在CSS中對象通過選擇器(selector)選擇
h1{ color:blue; font-size:13px; }在頁面中使用CSS
內聯樣式表
直接在HTML標簽內使用style屬性
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body> <p style="color:blue;font-size:20px">CSS樣式1</p> <p style="coloe:red;font-size:32px">CSS樣式2</p></body> </html>內部樣式表
使用<style>標簽在HTML文檔頭部定義
<!DOCTYPE html> <html><head><meta charset="utf-8"><style >p{color:red;font-size: 20px;}</style></head><body> <p >CSS樣式1</p> <p >CSS樣式2</p></body> </html>注意
內聯樣式表優先級大于內部樣式表
外部樣式表
將CSS代碼寫入一個或多個文件后綴名為.css的文件中
CSS選擇器
元素選擇器
選擇HTML元素（標簽），給選擇的元素設置樣式
<!DOCTYPE html> <html><head><style type="text/css">div{background-color: gray;}p{background-color: #444;color:#fff;}*{color:red;}</style></head><body> <div>元素選擇器設置div樣式</div> <p>元素選擇器設置p樣式<p></body> </html>注意
*是通配符選擇器，可以與任何元素匹配
<h1>元素選擇器設置p樣式</h1>類(class)選擇器
選擇并設置一組元素的樣式（以.開頭，然后后面跟上類名）
<!DOCTYPE html> <html><head><style type="text/css">.center{text-align: center;}</style></head><body><p>段落居中<p> <h1>標題居中</h1></body> </html>ID選擇器
為標有特定的id的HTML元素設置樣式
<!DOCTYPE html> <html><head><style type="text/css">#para1 {text-align: center;color: red;}</style></head><body><p id="para1">段落居中<p> <h1>標題居中</h1></body> </html>后代選擇器
選擇并設置一個元素后代的元素
<style>div p{background-color:yellow;}</style> <body> <div> <p>段落1，在div中</p> </div> <p>段落2，不在div中</p> </body>子元素選擇器
只選擇元素的子元素，不會擴大到任意的后代元素（用大于號進行子元素的選擇）
<style>div>p{background-color:yellow;}</style> <body> <div><p>段落1，div的子元素</p></div> <div><span><p>段落2，div的后代元素</p></span></div> </body>
div的子元素span,span的子元素是p,所以呢，p就是div 的后代元素，并非子元素，設置的樣式也就不會展現出來
相鄰兄弟元素選擇器
選擇緊接在另一個元素后的元素，且二者有相同的父元素（使用+進行編輯）
<!DOCTYPE html> <html><head><style>h2+strong{background-color:yellow;}</style></head><h2>div的子元素</h2><strong>要相鄰哦</strong> <strong>這里是不相鄰的哦</strong></body> </html>兄弟元素選擇器
選擇一個元素后的元素，且二者有相同的父元素
<style>div~p{background-color:red;}</style> <body> <p>之前段落，不會添加背景顏色</p> <div><p>段落1，在div中</p></div> <p>段落3，不在div中</p><p>段落4，不在div中</p> </body>
<div>后面的兄弟元素就會被進行相應的操作。
看完下面這個，會更清楚：
屬性選擇器
可以為擁有指定屬性的HTML元素設置樣式
| [attribute] | 用于選取帶有指定屬性的元素 | [title]{color:red;} |
| [attribute=value] | 用于選取帶有指定的屬性和值的元素 | [title=test]{color:red;} |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素 | [title~=hello]{color:red;} |
| [attribute | =value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素 | [title^=hello]{color:red;} |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素 | [title$=hello]{color:red;} |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素 | [title*=hello]{color:red;} |
偽類選擇器
偽類同一個標簽，根據其不同的狀態，定義不同的樣式，常用偽類有:
:link，:visited，:hover，:active，:focusa:link{color:red;}超鏈接點擊之前是紅色
a:visted{color:green;}超鏈接點擊之后是綠色
a:hover{color:green;}鼠標懸停，放到標簽上的時候
a:active{color:black;}鼠標點擊鏈接，未松手的時候
input:focus{color:white;background-color:#6a6a6a;}輸入元素獲取焦點時
偽類還可以與CSS類配合使用：
a.red:visited{color:red;} <a class="red" href="#">CSS語法</a>偽元素
原本不在DOM中的元素，偽元素是新創建的元素，常用偽元素有：
:before ,:after ，:first-line，:first-letter <style> h1:before{ content:url(smile.png) } h1.after{ content:url(smile.png) } </style> <body> <h1>利用偽元素在標題前后插入圖片</h1> </body>
emmmmmmmm…只能說圖片太大，不怪我。。。
CSS常用屬性
字體屬性
用來定義文本所使用的字體系列，大小，粗細，樣式等
| font-family | Times,Courier,宋體 | 設置文本的字體系列 |
| font-size | n(單位px)，如16px | 設文本的字體大小 |
| font-style | normal|italic|oblique | 設置文本的字體樣式 |
| font-weight | normal|bold|bolder|lighter或者數字值100~900 | 設置字體文本的粗細 |
文本屬性
文本屬性可定義文本的外觀，進行段落排版。通過文本屬性，可以改變文本的字符間距，對齊方式，修飾方式，文本縮進
| letter-spacing | normal|length|inherit | 設置字符間距 |
| word-spacing | normal|length|inherit | 設置單詞間距 |
| line-height | normal|number|length|%|inherit | 設置行間的距離（行高） |
| text-indent | length|%|inherit | 設置文本的首行縮進 |
| text-align | left|right|center|justify|inherit | 設置文本的對齊方式 |
| text-decoration | underline|overline|line-through|none|inherit | 設置文字修飾 |
justify（兩端對齊）
underline下劃線 overline上劃線 line-through刪除線 none沒有任何修飾
顏色和背景屬性
| color | red|#ff0000|rgb(255,0,0) | 設置顏色 |
| background-color | red|#ff0000|rgb(255,0,0) | 設置背景顏色 |
| background-image | url('URL')|none|inherit | 設置背景圖像 |
| background-repeat | repeat-x|repeat-y|repeat|no-repeat | 設置背景圖像重復方式 |
| background-position | xpos ypos|x% y%|x y | 設置背景圖像位置 |
| background-attachment | scroll|fixed|local | 設置背景圖片是否固定 |
background-repeat屬性用來設置是否及如何重復背景圖像，默認設置屬性值為repeat
background-attachment:設置背景圖像是否固定或隨頁面的其余部分滾動
| scroll | 背景圖片隨頁面的其余部分滾動，這是默認 |
| fixed | 背景圖像是固定的 |
background-positon要想有意義的話，那么background-attachment必須設置為fixed
background-positon屬性設置背景圖像的起始位置，取值有三種形式：
background-positon:xpos ypos | x% y%| x y
xpos ypos,表示使用預定義關鍵字定位，其中水平方向可取值left|center|right，垂直方向可選top|center|bottom
x% y%，表示水平位置和垂直位置的百分比，其中左上角是0% 0%，右下角是100% 100%
x y ，分別表示水平位置和垂直位置的像素值，其中左上角是0 0
列表屬性
在CSS中，使用list-style設置列表樣式，可以設置的屬性包括：
| list-style-type | none|disc|circle|decimal|lower-alpha|upper-alpha|lower-roman|upper-roman | 設置列表項目的符號類型 |
| list-style-position | outside|inside | 設置列表項標記的位置 |
| list-style-image | URL|none | 設置圖像作為列表項的標記 |
具體情況可以各自拷貝代碼更換屬性，然后觀察即可
表格屬性
可以設置的屬性包括：
| border-collapse | 設置是否把表格邊框合并為單一的邊框 |
| border-spacing | 設置分隔單元格邊框的距離 |
| caption-side | 設置表格標題的位置 |
| empty-cells | 設置是否顯示表格中的空單元格 |
| table-layout | 設置顯示單元，行和列的方法 |
這個是設置了表頭和行內容屬性
#customers th{font-size: 1.1em;text-align: left;background-color: #A7C942;color:#ffffff;}這里單獨設置了表頭的屬性
CSS盒子模型
所有的頁面元素都可以看出一個盒子，它占據著一定的頁面空間
盒子模型由內容(content),邊框(border),內邊距(padding),外邊距(margin)4個部分
盒子的寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界
總寬度=20px+10px+40px+200px+40px+10px+20px
border
盒子邊框，形成盒子的邊界，一般用于分離元素
border的屬性主要有三個：顏色(color)，寬度（width）,樣式(style)
<style> #div1{ border-color:#990000; border-width:5px; border-style:solid; } </style> <body> <div id="div1" > 設置border屬性的盒子邊框 </div> </body> <style> #div1{ border-color:lightgrey; border-width:300px; border-style:5px solid green; } </style> <body> <div id="div1" > 這里是盒子內的實際內容，邊框寬度為5個像素 </div> </body>注意：
border-style:5px solid green;這里是合并寫法，注意順序
給不同邊框設置不同的屬性值
#div2{ border-top:2px dotted #990000; border-right:10px solid #3399ff; border-bottom:2px dotted #00ff33; border-left:10px solid #cc33ff; } #div3{ border-color:red blue; border-width:2px 4px 2px; border-style:dotted solid double dashed; } #div4{ border-top-color:blue; } <!DOCTYPE html> <html><head><style type="text/css">.textBorder{border-width: 1px;border-style: solid;}</style></head><body> <form name="form1" method="post" action=""><p>名字：<input name="frame" type="text" class="textBoreder"></p><p>密碼：<input name="pass" type="password" class="textBoreder" size="21"></p></form> </body> </html>
border-width: 1px; 邊框寬度為1像素
border-style: solid;文本框為實線邊框
padding
盒子的內邊距，即邊框和內容之間的空白區域
padding: 10px padding:10px 5px padding:10px 5px 20px padding:5px 6px 7px 8px設置1個屬性值表示上下左右4個內邊距的值；
設置2個屬性值表示上下內邊距和左右內邊距的值；
設置3個屬性值，前者表示上邊距屬性值，中間表示左右邊距屬性值，后者表示下內邊距值
設置4個屬性值，表示上，右，下，左內邊距的值，呈順時針方向
可以使用padding-top,padding-right,padding-bottom,padding-left單獨設置某一方向的內邊距
#div5 { width:150px; height:150px; padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:20px; border-width:3px; border-style:solid; } <div id="div5"> <img src="05.jpg" width="150px" height="150px"> </div>margin
盒子的外邊距，即頁面上元素和元素之間的距離：
#div6 { width:200px; padding-top:50px; padding-right:30px; padding-left:50px; border-width:3px; border-style:solid; } <div id="div6">div</div> <div id="div6">div</div> <!DOCTYPE html> <html><head><style type="text/css">#div6 { width:200px; margin-top:50px; margin-right:30px; margin-left:50px; border-width:3px; border-style:solid; }</style></head><body> <div id="div6">div</div> <div id="div6">div</div> </div> </form> </body> </html>CSS元素布局與定位
標準文檔流是指不使用與布局和定位相關CSS規則時，頁面元素默認的排列規則。
頁面元素分為兩類：
塊級元素（block）：左右撐滿占據一行，和同級兄弟元素依次垂直排列，如div，li元素等
行內元素（inline）：相鄰元素之間橫向排列，到文檔右端自動換行，如span，a元素等
行內元素的水平間距是由這兩個元素所在的盒子的外邊距之和決定的。
span1和span2水平間距是70px
注意
兩個塊級元素之間的垂直距離不是第一個元素的margin-bottom加第二個元素的margin-top，而是兩者之中較大者
也就是說它倆的垂直間距是50px
當一個元素包含另一個元素時，就形成父子關系，其中子元素的margin將以父元素的內容區域為參考
外層的虛線邊框是父div的內容邊框，子元素的margin以及其它部分都是從父元素的內容區域開始計算的
子元素的外邊距是根據父元素的內容區來進行計算的。
當元素的margin設為負值時，會使元素所在的盒子向反方向移動，可能導致兩個元素的重疊，產生一個元素覆蓋在另一個元素上面的效果
<!DOCTYPE html> <html><head><style type="text/css">div.bottom{margin-bottom: 50px;background-color: #a9d6ff;}div.top{margin-top: 30px;background-color: #eeb0b0;}</style></head><body> <div id="father" style="border: 1px solid black;padding: 20px;"> 這是父元素的內容區域，子元素的margin將以父元素的內容區域作為參考 <div id="son" style="border: 1px dashed black;margin: -40px;">子元素的內容區域 </div> </div> </body> </html>元素的定位屬性
元素通過positon屬性實現定位，分為靜態定位（static），相對定位（relative），絕對定位（absolute）和固定定位（fixed）四種定位方式
relative
元素的位置將相對其原本的標準位置偏移指定的距離
<!DOCTYPE html> <html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative ;left:20px}</style></head><body> <h2>這是位于正常位置的標題</h2> <h2 class="pos_left">這個標題相對于其正常位置向左移動</h2> <h2 class="pos_right">這個標題相對于其正常位置向左移動</h2> </body> </html> <!DOCTYPE html> <html><head><style type="text/css">img.pos_right{position:relative ;left:300px}</style></head><body><img src="05.jpg" width="300" height="240"> <img src="05.jpg" width="300" height="240" class="pos_right"> </body> </html>注意
img.pos_right這里pos_right前面得記得改成img,否則relative沒法實現
<!DOCTYPE html> <html><head><style type="text/css">img.pos_right{position:relative ;left:-50px}</style></head><body><img src="05.jpg" width="300" height="240"><br> <img src="05.jpg" width="300" height="240" class="pos_right"> </body> </html>絕對定位
absolute：元素可以放在頁面上的任意位置，位置相對于最近已定位的父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>
<!DOCTYPE html> <html><head><style type="text/css">#box3{width: 800px; height: 600px;position: relative;}#box4{width: 99%;position: absolute;top: 30px; left: 300px;}</style></head><body> <div id="box3"> <img src="05.jpg" width="800px" height="600"> <div id="box4">二次元頭像 </div> </div> </body> </html>
這個文字的父元素也就是這個box3 子元素是absolute定位，父元素
fixed
元素位置相對于瀏覽器窗口是固定位置，拖動滾動條時，元素位置不會發生變化
<!DOCTYPE html> <html><head><style type="text/css">p.pos_fixed{width: 200px;height: 200px;border: 1px solid black;position: fixed;bottom: 1px;right: 1px;}</style></head><body> <p class="pos_fixed">Some more text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> </body> </html>元素的浮動屬性
在標準流中，一個塊級元素在水平方向會有自動伸展，知道包含它的父級元素的邊界；在垂直方向與兄弟元素依次排列，不能并排
#div1{ background-color:red; width:100px; height:50px; } #div2{ background-color:green; width:200px; height:25px; } #div3{ background-color:yellow; width:50px; height:50px; } #div4{ background-color:blue; width:150px; height:75px; } <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div>
上圖為標準流（div1 div2 div3 div4都在標準流中）
左浮動
如果將float屬性設置為left或right，那么元素就會向其父元素的左側或右側靠緊，同時盒子的寬度不再伸展，將根據盒子中內容寬度決定其寬度
div1浮動
#div1{ background-color:red; float: left; width:100px; height:50px; }
div1不再標準流中，標準流中有div2，div3，div4，div2的部分長度被div1覆蓋（覆蓋為什么不直接進行紅色+綠色呢。。。hhhhh）
div2浮動
#div2{ background-color:green; float: left; width:200px; height:25px; }
div1 div3 div4在標準流中，div2浮動出來了，div3的部分被div2覆蓋了。。。。
div3浮動
#div3{ background-color:yellow; float: left; width:50px; height:50px; }
div1 div2 div4是標準的文檔流，div3浮動出來，div4部分被div3遮擋
div4浮動
#div4{ background-color:blue; float:left; width:150px; height:75px; }右浮動：
div1浮動
#div1{ background-color:red; float:right; width:100px; height:50px; }div2浮動
#div2{ background-color:green; float:right; width:200px; height:25px; }div3浮動
#div3{ background-color:yellow; float:right; width:50px; height:50px; }div4浮動
#div4{ background-color:blue; float:right; width:150px; height:75px; }清除浮動
clear:left|right|both|none一個元素設置浮動屬性后，會影響其相鄰元素的布局，如果希望不影響相鄰的元素，可以在相鄰元素上設置相應的清除浮動效果
left:左側抗浮動 right：右側抗浮動 both：兩側抗浮動
正常情況下：
<!DOCTYPE html> <html><head><style type="text/css">.box1{padding: 5px;background-color: deepskyblue;}</style></head><body> <div class="box1"><img src="05.jpg" width="200" height="160" ><div>設置clear:both表示元素左右抗浮動，布局不收浮動元素影響</div> </div> </body> </html>左浮動后：
<!DOCTYPE html> <html><head><style type="text/css">.box1{padding: 5px;background-color: deepskyblue;}.left{float:left;}</style></head><body> <div class="box1"><img src="05.jpg" width="200" height="160" class="left" ><div>設置clear:both表示元素左右抗浮動，布局不收浮動元素影響</div> </div> </body> </html>抗左浮動后：
<!DOCTYPE html> <html><head><style type="text/css">.box1{padding: 5px;background-color: deepskyblue;}.left{float:left;}.clear-left{clear:left;}.right{float:right;}</style></head><body> <div class="box1"><img src="05.jpg" width="200" height="160" class="left" ><div class="clear-left">設置clear:both表示元素左右抗浮動，布局不收浮動元素影響</div> </div> </body> </html>右浮動后：
<!DOCTYPE html> <html><head><style type="text/css">.box1{padding: 5px;background-color: deepskyblue;}.left{float:left;}.right{float:right;}</style></head><body> <div class="box1"><img src="05.jpg" width="200" height="160" class="right" ><div>設置clear:both表示元素左右抗浮動，布局不收浮動元素影響</div> </div> </body> </html>抗右浮動后
<!DOCTYPE html> <html><head><style type="text/css">.box1{padding: 5px;background-color: deepskyblue;}.left{float:left;}.clear-left{clear:left;}.right{float:right;}.clear-right{clear:right;}</style></head><body> <div class="box1"><img src="05.jpg" width="200" height="160" class="right" ><div class="clear-right">設置clear:both表示元素左右抗浮動，布局不收浮動元素影響</div> </div> </body> </html>
注意：很多時候抗浮動都直接設置both
元素的顯示屬性
利用display屬性既可以實現元素的隱藏，也可以實現塊級元素和行內元素的 相互轉換
| none | 隱藏對象 |
| inline | 指定對象為內聯元素 |
| block | 指定對象為塊元素 |
| list-item | 指定對象為列表項目 |
| inline-block | 指定對象為內聯塊元素 |
加上 class="hide"后：
設置display
塊級元素轉換為行內元素
inline可以將任意的塊級元素轉換為行內元素，此時元素將擁有行內元素的特性。
未轉換：
<!DOCTYPE html> <html><head><style type="text/css">#div1{background-color: gray;}#div2{background-color: red;}#div3{background-color: green;}</style></head><body> <div class="box1"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div> </div> </body> </html>轉換后：
<!DOCTYPE html> <html><head><style type="text/css">#div1{background-color: gray;display: inline;}#div2{background-color: red;display: inline;}#div3{background-color: green;display: inline;}</style></head><body> <div class="box1"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div> </div> </body> </html>行內元素轉換為塊級元素
設置display:block可以將任意的行內元素轉換為塊級元素，元素將擁有塊級元素的特性。
未轉換：
<!DOCTYPE html> <html><head><style type="text/css">#span1{background-color: gray;}#span2{background-color: red;}#span3{background-color: green;}</style></head><body> <div class="box1"><span id="span1">span1</span><span id="span2">span2</span><span id="span3">span3</span> </div> </body> </html>轉換后：
<!DOCTYPE html> <html><head><style type="text/css">#span1{background-color: gray;display: block;}#span2{background-color: red;display: block;}#span3{background-color: green;display: block;}</style></head><body> <div class="box1"><span id="span1">span1</span><span id="span2">span2</span><span id="span3">span3</span> </div> </body> </html>inline-block
在設計水平導航效果時，通常希望多個導航鏈接處于同一行，即呈現行內元素的特征。同時，還希望設置各個導航鏈接項的寬度和高度，即同時兼有塊級元素的特征。此時，可以設置display屬性值為inline-block，該屬性值結合了inline與block的一些她點，使得塊級元素不再獨占一行
在元素的顯示上，inline-block與浮動效果相似，但是兩者又有著本質的區別。
設置前：
<!DOCTYPE html> <html><head><style type="text/css">.box{border: 1px solid black;width: 500px;}.child1,.child2{background-color: gray;color: white;width: 100px;}</style></head><body> <div class="box"><div class="child1">child1</div><div class="child2">child2</div></div> </body> </html>設置后：
<!DOCTYPE html> <html><head><style type="text/css">.box{border: 1px solid black;width: 500px;}.child1,.child2{display: inline-block;background-color: gray;color: white;width: 100px;}</style></head><body> <div class="box"><div class="child1">child1</div><div class="child2">child2</div></div> </body> </html>利用浮動實現child3 child4，對比child1 child2
<!DOCTYPE html> <html><head><style type="text/css">.box{border: 1px solid black;width: 500px;}.child1,.child2{display: inline-block;background-color: gray;color: white;width: 100px;}.child3,.child4{float: left;background-color: gray;color: white;width: 100px;}</style></head><body> <div class="box"><div class="child1">child1</div><div class="child2">child2</div> </div><br> <div class="box"><div class="child3">child3</div><div class="child4">child4</div> </div> </body> </html>
此時父類產生了塌陷，然后在.box中加一行overflow:hidden;
元素的可見性屬性
visibility屬性用來指定一個元素是否可見。默認屬性值為visible，表示元素可見；當屬性值為hidden時，元素不可見，注意：元素雖然被隱藏，但仍占據原來所在位置，仍然會影響布局
display：none；設置元素不可見，元素隱藏后，不會影響布局
隱藏前：
<!DOCTYPE html> <html><head><style type="text/css">.hidden{visibility: hidden;}.none{display: none;}</style></head><body> <img src="05.jpg" width="400" height="320" > <p>采用visibility隱藏元素，元素仍會占據原來的位置，仍然會影響布局</p> <img src="05.jpg" width="400" height="320" > <p>采用display隱藏元素，不會影響布局</p> <p></p> </body> </html>隱藏后：
<!DOCTYPE html> <html><head><style type="text/css">.hidden{visibility: hidden;}.none{display: none;}</style></head><body> <img src="05.jpg" width="400" height="320" class="hidden" > <p>采用visibility隱藏元素，元素仍會占據原來的位置，仍然會影響布局</p> <img src="05.jpg" width="400" height="320" class="none"> <p>采用display隱藏元素，不會影響布局</p> <p></p> </body> </html>元素的溢出處理屬性
overflow屬性規定當內容溢出元素框時的處理
overflow:visible|hidden|scroll|auto| visible | 默認值 |
| hidden | 內容會被修剪，并且其余內容是不可見的 |
| scroll | 內容會被修建，但是瀏覽器會顯示滾動條以便查看其余的內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容 |
| inherit | 規定應該從父元素繼承overflow屬性的值 |
scroll
hidden
auto
總結
以上是生活随笔為你收集整理的Web前端三剑客之CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端三剑客之HTML基础
- 下一篇： HTML+CSS实战作业