Web前端三剑客之CSS基础
生活随笔
收集整理的這篇文章主要介紹了
Web前端三剑客之CSS基础
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 常識簡介
- css概述
- CSS作用
- CSS代碼主要組成部分
- 在頁面中使用CSS
- 內(nèi)聯(lián)樣式表
- 內(nèi)部樣式表
- 注意
- 外部樣式表
- CSS選擇器
- 元素選擇器
- 注意
- 類(class)選擇器
- ID選擇器
- 后代選擇器
- 子元素選擇器
- 相鄰兄弟元素選擇器
- 兄弟元素選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素
- CSS常用屬性
- 字體屬性
- 文本屬性
- 顏色和背景屬性
- 列表屬性
- 表格屬性
- CSS盒子模型
- border
- 注意：
- padding
- margin
- CSS元素布局與定位
- 注意
- 元素的定位屬性
- relative
- 注意
- 絕對定位
- fixed
- 元素的浮動屬性
- 左浮動
- div1浮動
- div2浮動
- div3浮動
- div4浮動
- 右浮動：
- div1浮動
- div2浮動
- div3浮動
- div4浮動
- 清除浮動
- 正常情況下：
- 左浮動后：
- 抗左浮動后：
- 右浮動后：
- 抗右浮動后
- 元素的顯示屬性
- 設置display
- 塊級元素轉(zhuǎn)換為行內(nèi)元素
- 未轉(zhuǎn)換：
- 轉(zhuǎn)換后：
- 行內(nèi)元素轉(zhuǎn)換為塊級元素
- 未轉(zhuǎn)換：
- 轉(zhuǎn)換后：
- inline-block
- 設置前：
- 設置后：
- 利用浮動實現(xiàn)child3 child4，對比child1 child2
- 元素的可見性屬性
- 隱藏前：
- 隱藏后：
- 元素的溢出處理屬性
- scroll
- hidden
- auto
常識簡介
css概述
CSS（Cascading Style Sheet）層疊樣式表是一種可控制網(wǎng)頁樣式并允許樣式與內(nèi)容相分離的技術
CSS作用
CSS能夠?qū)W(wǎng)頁的布局，字體，顏色，背景等圖文實現(xiàn)更精確的控制
CSS使得網(wǎng)頁的體積更小，下載速度更快，且可以實現(xiàn)多個頁面的自動更新
……………………
CSS代碼主要組成部分
CSS代碼主要由對象，屬性，屬性值三個基本部分組成。對象很重要，它指定了對哪些網(wǎng)頁進行樣式設置，在CSS中對象通過選擇器(selector)選擇
h1{ color:blue; font-size:13px; }在頁面中使用CSS
內(nèi)聯(lián)樣式表
直接在HTML標簽內(nèi)使用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>內(nèi)部樣式表
使用<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>注意
內(nèi)聯(lián)樣式表優(yōu)先級大于內(nèi)部樣式表
外部樣式表
將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 的后代元素，并非子元素，設置的樣式也就不會展現(xiàn)出來
相鄰兄弟元素選擇器
選擇緊接在另一個元素后的元素，且二者有相同的父元素（使用+進行編輯）
<!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;} |
偽類選擇器
偽類同一個標簽，根據(jù)其不同的狀態(tài)，定義不同的樣式，常用偽類有:
: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中的元素，偽元素是新創(chuàng)建的元素，常用偽元素有：
: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或者數(shù)字值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 | 設置顯示單元，行和列的方法 |
這個是設置了表頭和行內(nèi)容屬性
#customers th{font-size: 1.1em;text-align: left;background-color: #A7C942;color:#ffffff;}這里單獨設置了表頭的屬性
CSS盒子模型
所有的頁面元素都可以看出一個盒子，它占據(jù)著一定的頁面空間
盒子模型由內(nèi)容(content),邊框(border),內(nèi)邊距(padding),外邊距(margin)4個部分
盒子的寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
總寬度=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" > 這里是盒子內(nèi)的實際內(nèi)容，邊框?qū)挾葹?span id="ozvdkddzhkzd" class="token number">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; 邊框?qū)挾葹?像素
border-style: solid;文本框為實線邊框
padding
盒子的內(nèi)邊距，即邊框和內(nèi)容之間的空白區(qū)域
padding: 10px padding:10px 5px padding:10px 5px 20px padding:5px 6px 7px 8px設置1個屬性值表示上下左右4個內(nèi)邊距的值；
設置2個屬性值表示上下內(nèi)邊距和左右內(nèi)邊距的值；
設置3個屬性值，前者表示上邊距屬性值，中間表示左右邊距屬性值，后者表示下內(nèi)邊距值
設置4個屬性值，表示上，右，下，左內(nèi)邊距的值，呈順時針方向
可以使用padding-top,padding-right,padding-bottom,padding-left單獨設置某一方向的內(nèi)邊距
#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規(guī)則時，頁面元素默認的排列規(guī)則。
頁面元素分為兩類：
塊級元素（block）：左右撐滿占據(jù)一行，和同級兄弟元素依次垂直排列，如div，li元素等
行內(nèi)元素（inline）：相鄰元素之間橫向排列，到文檔右端自動換行，如span，a元素等
行內(nèi)元素的水平間距是由這兩個元素所在的盒子的外邊距之和決定的。
span1和span2水平間距是70px
注意
兩個塊級元素之間的垂直距離不是第一個元素的margin-bottom加第二個元素的margin-top，而是兩者之中較大者
也就是說它倆的垂直間距是50px
當一個元素包含另一個元素時，就形成父子關系，其中子元素的margin將以父元素的內(nèi)容區(qū)域為參考
外層的虛線邊框是父div的內(nèi)容邊框，子元素的margin以及其它部分都是從父元素的內(nèi)容區(qū)域開始計算的
子元素的外邊距是根據(jù)父元素的內(nèi)容區(qū)來進行計算的。
當元素的margin設為負值時，會使元素所在的盒子向反方向移動，可能導致兩個元素的重疊，產(chǎn)生一個元素覆蓋在另一個元素上面的效果
<!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;"> 這是父元素的內(nèi)容區(qū)域，子元素的margin將以父元素的內(nèi)容區(qū)域作為參考 <div id="son" style="border: 1px dashed black;margin: -40px;">子元素的內(nèi)容區(qū)域 </div> </div> </body> </html>元素的定位屬性
元素通過positon屬性實現(xiàn)定位，分為靜態(tài)定位（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沒法實現(xiàn)
<!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
元素位置相對于瀏覽器窗口是固定位置，拖動滾動條時，元素位置不會發(fā)生變化
<!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，那么元素就會向其父元素的左側或右側靠緊，同時盒子的寬度不再伸展，將根據(jù)盒子中內(nèi)容寬度決定其寬度
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屬性既可以實現(xiàn)元素的隱藏，也可以實現(xiàn)塊級元素和行內(nèi)元素的 相互轉(zhuǎn)換
| none | 隱藏對象 |
| inline | 指定對象為內(nèi)聯(lián)元素 |
| block | 指定對象為塊元素 |
| list-item | 指定對象為列表項目 |
| inline-block | 指定對象為內(nèi)聯(lián)塊元素 |
加上 class="hide"后：
設置display
塊級元素轉(zhuǎn)換為行內(nèi)元素
inline可以將任意的塊級元素轉(zhuǎn)換為行內(nèi)元素，此時元素將擁有行內(nèi)元素的特性。
未轉(zhuǎn)換：
<!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>轉(zhuǎn)換后：
<!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>行內(nèi)元素轉(zhuǎn)換為塊級元素
設置display:block可以將任意的行內(nèi)元素轉(zhuǎn)換為塊級元素，元素將擁有塊級元素的特性。
未轉(zhuǎn)換：
<!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>轉(zhuǎn)換后：
<!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
在設計水平導航效果時，通常希望多個導航鏈接處于同一行，即呈現(xiàn)行內(nèi)元素的特征。同時，還希望設置各個導航鏈接項的寬度和高度，即同時兼有塊級元素的特征。此時，可以設置display屬性值為inline-block，該屬性值結合了inline與block的一些她點，使得塊級元素不再獨占一行
在元素的顯示上，inline-block與浮動效果相似，但是兩者又有著本質(zhì)的區(qū)別。
設置前：
<!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>利用浮動實現(xiàn)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>
此時父類產(chǎn)生了塌陷，然后在.box中加一行overflow:hidden;
元素的可見性屬性
visibility屬性用來指定一個元素是否可見。默認屬性值為visible，表示元素可見；當屬性值為hidden時，元素不可見，注意：元素雖然被隱藏，但仍占據(jù)原來所在位置，仍然會影響布局
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隱藏元素，元素仍會占據(jù)原來的位置，仍然會影響布局</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隱藏元素，元素仍會占據(jù)原來的位置，仍然會影響布局</p> <img src="05.jpg" width="400" height="320" class="none"> <p>采用display隱藏元素，不會影響布局</p> <p></p> </body> </html>元素的溢出處理屬性
overflow屬性規(guī)定當內(nèi)容溢出元素框時的處理
overflow:visible|hidden|scroll|auto| visible | 默認值 |
| hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的 |
| scroll | 內(nèi)容會被修建，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容 |
| inherit | 規(guī)定應該從父元素繼承overflow屬性的值 |
scroll
hidden
auto
總結
以上是生活随笔為你收集整理的Web前端三剑客之CSS基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端三剑客之HTML基础
- 下一篇： HTML+CSS实战作业