CSS浮动定位与背景样式
生活随笔
收集整理的這篇文章主要介紹了
CSS浮动定位与背景样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS浮動定位與背景樣式
1.浮動與定位
1.1 浮動的基本概念
本質功能 : 實現塊元素并排布局 使用要點 : 1.要浮動,并排的盒子都要設置浮動2.父盒子寬度足夠,否則會被迫換行3.子盒子會按順序進行貼靠,沒有足夠空間,則會尋找再前一個兄弟元素4.浮動元素一定能設置寬高5.浮動元素脫離了標準文檔流left屬性 向左浮動 right屬性 向右浮動浮動實現網頁布局注意事項:1.垂直顯示的盒子,不設置浮動,并排顯示的盒子才要設置浮動2.父盒子中,又是一個小天地,內部可以繼續使用浮動1.2 BFC規范和瀏覽器差異
BFC Box Formatting Context 塊級格式上下文 隔離的獨立容器 容器中子元素不會影響到外面的元素,反之亦然一個盒子 不設置height 當內容子元素都浮動時,無法撐起自身 -> 高度塌陷 解決方式 -> 形成BFCBFC的創建方式 : 浮動 float 值不為none 可以解決,但是不能無原因給盒子浮動 -> 可以解決問題但是解決方式很差定位 position 值不為static/relative元素轉換 display 值為inline-block/flex/inline-flex 可以解決,但是盒子本身不再是塊元素 -> 可以解決問題但是解決方式很差overflow:hidden 溢出隱藏 ,溢出盒子邊框的內容將會被隱藏非常好的讓盒子形成BFC的方式BFC的作用:解決子元素全部浮動導致父元素高度塌陷的問題解決盒子margin塌陷問題阻止元素被浮動元素覆蓋瀏覽器差異 :ie6/ie7 使用haslayout機制 和BFC略有差異:ie瀏覽器可以使用zoom:1屬性 讓盒子擁有布局1.3 清除浮動
1.讓內部有浮動的盒子形成BFC 2.給后續父盒子設置clear:both 清除左右浮動的方法 -> 有副作用,不推薦 3.給盒子添加最后一個子元素 ::after .clearfix:after{content:'';display:block;clear:both} 4.在兩個盒子之間設置一個空div,屬性給clear:both1.4 相對定位
position : relative 相對自己原來的位置進行位置調整四個描述屬性:left right top bottom性質: 本質位子不變,渲染出'影子'的位置,不脫離文檔標準流 作用:可用于微調元素位置可以作為絕對定位的參考盒子1.5 絕對定位
position : absolute 盒子在瀏覽器中以坐標進行位置精準描述 擁有自己的絕對位置描述屬性與相對定位相同性質: 脫離標準文檔流 釋放自己的位置,不會對其他元素產生干擾,但會進行壓蓋絕對定位并不一定以瀏覽器為基準點,會以自己祖先元素中,離自己最近的擁有定位屬性的盒子作為基準點 -> 父相子絕 作用:絕對定位的盒子垂直居中 : top:50% margin-top : 自己高度的一半z-index 屬性 堆疊順序###1.6 固定定位
position:fix 無論頁面如何滾動,永遠固定在那里性質:以瀏覽器為基準點脫離標準文檔流2 邊框與圓角
2.1邊框
邊框三要素border-width/border-style/border-color 線寬度/線型/線顏色線型 border-stylesolid-實線 / dashed-虛線 / dotted-點狀線合寫/簡寫 border: 1px solid #000 -- 線寬1px,顏色為黑的實線邊框 邊框 四條邊的屬性border-topborder-rightborder-bottomborder-left四條邊同樣具有三要素屬性屬性值為none時,則為去掉邊框邊框制作三角形元素寬高置0,一條邊框線為主,另外三條邊框為透明(不可為none),邊框線寬即為三角形斜邊,邊框方向與三角形直角指向方向相反border-radius屬性 圓角半徑默認單位為px 指圓角半徑單獨設置四個圓角,左上 右上 右下 左下 | 左上 右上左下 右下 | 左上右下 右上左下 | 全部單位為百分比時,指圓角半徑為邊長的百分比,正方形百分比為50%,則為正圓形,長方形為50%時就是橢圓形2.2 盒子陰影
box-shadow 屬性 box-shadow: 10px 20px 30px rgba(0,0,0,.5) | x偏移 y偏移 模糊量 顏色陰影延展 第四個像素值 陰影的延展值內陰影 添加inset屬性,則陰影向內部延展多陰影 逗號隔開多組屬性3. 背景與漸變
background 屬性 background-color 背景顏色background-image 背景圖片 屬性值為url(路徑)background-repeat 背景重復模式repeat 默認repeat-x x平鋪repeat-y y平鋪no-repeat 不平鋪background-size 背景尺寸background-size:屬性值:width height | 單位可以是像素也可以是百分比 等比例設置可以將寬/高設為autocontain:將背景圖片智能改變尺寸以容納到盒子里-圖片必定完整,但不一定撐滿盒子cover:將背景圖片智能改變尺寸以撐滿盒子-圖片不一定完整,但是一定撐滿盒子background-clip 背景裁切border-box 背景延申至邊框(默認值)padding-box 背景延伸至內邊(padding),不會繪制到邊框處(僅在dotted,dashed邊框可察覺)content-box 背景被裁剪至內容區background-origin 背景起源 相對于什么位置來定位border-box padding-box content-box background-attachment 背景固定fixed 自己滾動條不動,外部滾動條不動local 自己滾動條動,外部滾動條動scroll(默認值) 自己滾動條不動,外部滾動條動background-position 背景圖片位置屬性值x y 盒子的(x,y)坐標top/left/right/bottom/center 復合屬性:background: white url(路徑) no-repeat center center背景顏色 背景圖片 背景重復 背景位置ps:padding區域有背景顏色background-size/background-clip 兼容到ie9,其他兼容到ie6 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:200px;height:200px;border:1px solid #000;/*縱向溢出的內容用滾動條顯示*/overflow-y: scroll;background-image: url(images/秋之游人.jpg);background-attachment: scroll;}body{height:3000px;/*width:2000px;*/}</style> </head> <body><div class="box1"><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:300px;height:300px;border:10px dotted #000;padding:60px;background-image:url(images/秋之余暉.jpg);background-image:10px;margin-bottom: 20px;}.box2{width:300px;height:300px;border:10px dotted #000;padding:60px;background-image:url(images/秋之游人.jpg);/*背景裁切到padding區域，此時就不會在點狀線、虛線邊框底下渲染*/background-clip: padding-box;margin-bottom: 20px;}.box3{width:300px;height:300px;border:10px dotted #000;padding:60px;background-image:url(images/秋之游人.jpg);/*背景裁切到內容區域*/background-clip: content-box;background-size:100px auto;/*背景起源*/background-origin: content-box;}</style> </head> <body><div class="box1"></div><div class="box2"></div><div class="box3"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color:blue;}.box{padding:100px;width:200px;height:200px;background-color:orange;border:4px solid #000;}</style> </head> <body><div class="box">123</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/css.css"><style>.box1{width:900px;height:600px;border:1px solid #000;background-color: url(images/秋之余暉.jpg);}</style> </head> <body><div class="box1">你好呀伍姣姣</div><div class="box2">hhhhhhhhhhhh</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:400px;height:300px;border: 1px solid #000;margin-bottom: 10px;background-image: url(images/秋之余暉.jpg);background-repeat: no-repeat;background-size:50% auto;/*背景位置*/background-position: 10px 15px;}.box2{width:400px;height:300px;border: 1px solid #000;margin-bottom: 10px;background-image: url(images/秋之余暉.jpg);background-repeat: no-repeat;background-size:50% auto;/*背景位置*/background-position: center center;}.box3{width:400px;height:300px;border: 1px solid #000;margin-bottom: 10px;background-image: url(images/秋之余暉.jpg);background-repeat: no-repeat;background-size:50% auto;/*背景位置*/background-position: center bottom;}.box4{width:400px;height:300px;border: 1px solid #000;margin-bottom: 10px;background-image: url(images/秋之余暉.jpg);background-repeat: no-repeat;background-size:50% auto;/*背景位置*/background-position:right top;}.box5{width:200px;height:300px;border: 1px solid #000;margin-bottom: 10px;background-image: url(images/秋之余暉.jpg);background-repeat: no-repeat;background-size:contain;/*背景位置*/background-position:center center;}</style> </head> <body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div> </body> </html>3.1 CSS精靈圖/雪碧圖
通過background-position實現，準確測量定位優點:CSS精靈可以減少HTTP請求數,加快網頁顯示速度缺點:不方便測量,后期改動麻煩###3.2 線性漸變
background-image 可以用linear-gradient()創建線性漸變背景background-image: linear-gradient(to right,blue,red) 漸變方向,開始顏色,結束顏色漸變方向 可以寫成度數,deg表示度數 45deg 45度瀏覽器私有前綴：不同瀏覽器有不同的私有前綴，用來對試驗性質的CSS前綴加以標識eg:chorme->-webkit-Firefox->-moz-IE、Edge->-MS-歐朋->-o- <!DOCTYPE html><!--背景與漸變--> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: gold;}.box{padding:100px;width:200px;height:200px;background-color:rgba(0,0,0,.5);border:2px solid #000;}</style> </head> <body><div class="box">123</div> </body> </html> <!DOCTYPE html><!--線性漸變--> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:200px;height:200px;border:1px solid #000;margin-bottom: 10px;background-image: -webkit-linear-gradient(to right,red,blue);background-image: -moz-linear-gradient(to right,red,blue);background-image: -o-linear-gradient(to right,red,blue);background-image: linear-gradient(to right,red,blue);}.box2{width:200px;height:200px;border:1px solid #000;margin-bottom: 10px;background-image: linear-gradient(45deg,red,blue);}.box3{width:200px;height:200px;border:1px solid #000;margin-bottom: 10px;background-image: linear-gradient(to right,red,yellow,orange,green,blue,purple);}.box4{width:200px;height:200px;border:1px solid #000;margin-bottom: 10px;background-image: linear-gradient(to right,red,yellow 80%,blue);}.box5{width:200px;height:200px;border:1px solid #000;margin-bottom: 10px;background-image: linear-gradient(to right,red,yellow 20%,blue);}</style> </head> <body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div> </body> </html>3.3 徑向漸變
radial-gradient()background-image:radial-gradient(50%,50%,red,blue)圓心坐標(以盒子中心為坐標),開始顏色,結束顏色 <!DOCTYPE html><!--徑向徑變--> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width:500px;height:300px;border:1px solid #000;background-image:radial-gradient(50% 50%,red,yellow,blue);}</style> </head> <body><div class="box1"></div> </body> </html>3.3.1 tip
瀏覽器的私有前綴:對試驗性質的css屬性加以標識chrome -webkit-firefox -moz-IE/EDge -ms-歐鵬 -o-4 2D與3D轉換
transform 屬性屬性值:rotate(旋轉角度) 旋轉變形 旋轉角度為正,則為順時針渲染,反之則為逆時針scale(縮放倍數) 縮放變形 縮放倍數小于1表示縮小元素,大于1表示放大元素skew(x斜切角度,y斜切角度) （10deg,10deg）斜切變形 translate(向右移動,向下移動) 位移變形 | 類似于相對定位，但是兼容性不如相對定位，只兼容到IE9 | 微調元素的方式 | 兼容到ie9 transform-origin 屬性設置自己的自定義變換原點。 3d旋轉transform:rotateX()/rotateY() 繞橫軸/縱軸旋轉 橫軸上向后,下向前為正 縱軸左向前,右向后,為正perspective 屬性 透視強度 '人眼到舞臺的距離' 單位px 給父元素設置perspective屬性,給子元素transform,好比舞臺和演員空間移動3d旋轉后,繼續添加 translateX()/translateY()/translateZ()實現空間移動,以當前的旋轉面形成一個坐標軸 <!DOCTYPE html><!--3D旋轉--> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0 ;padding:0;}p{width:200px;height:200px;border:1px solid #000;background-color:orange;}.box1{width:202px;height:202px;border :1px solid #000;margin:50px auto;/*居中*/perspective: 300px;}.box1 p{transform:rotateX(30deg)}.box2{width:202px;height:202px;border :1px solid #000;margin:50px auto;/*居中*/perspective: 300px;}.box2 p{transform:rotateY(30deg);}.box3{width:202px;height:202px;border :1px solid #000;margin:50px auto;/*居中*/perspective: 300px;}.box3 p{transform:rotateX(300deg) rotateY(305deg);}</style> </head> <body><div class="box1"><!--舞臺--><p></p><!--演員--></div><div class="box2"><p></p></div><div class="box3"><p></p></div> </body> <!DOCTYPE html><!--旋轉變形--> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{border:1px solid #000;}.pic1{transform:rotate(30deg);}.pic2{transform:rotate(60deg);}.pic3{transform:rotate(90deg);}.pic4{transform:rotate(180deg);}.pic5{transform:rotate(369deg);}.pic6{/*以左上角為中心點進行旋轉*/transform-origin:0 0;transform:rotate(30deg);}</style></head> <body><p><img src="images/p1.jpg" class="pic1"></p><p><img src="images/p1.jpg" class="pic2"></p><p><img src="images/p1.jpg" class="pic3"></p><p><img src="images/p1.jpg" class="pic4"></p><p><img src="images/p1.jpg" class="pic5"></p><p><img src="images/p1.jpg" class="pic6"></p> </body> </html>總結
以上是生活随笔為你收集整理的CSS浮动定位与背景样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 情人节程序员用HTML网页表白【在一起计
- 下一篇： （笔记本）电脑WLAN 点不开，显示WL