網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
CSS浮動(dòng)定位與背景樣式
1.浮動(dòng)與定位
1.1 浮動(dòng)的基本概念
本質(zhì)功能 : 實(shí)現(xiàn)塊元素并排布局
使用要點(diǎn) :
1.要浮動(dòng),并排的盒子都要設(shè)置浮動(dòng)
2.父盒子寬度足夠,否則會(huì)被迫換行
3.子盒子會(huì)按順序進(jìn)行貼靠,沒有足夠空間,則會(huì)尋找再前一個(gè)兄弟元素
4.浮動(dòng)元素一定能設(shè)置寬高
5.浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流
left屬性 向左浮動(dòng)
right屬性 向右浮動(dòng)
浮動(dòng)實(shí)現(xiàn)網(wǎng)頁(yè)布局
注意事項(xiàng):
1.垂直顯示的盒子,不設(shè)置浮動(dòng),并排顯示的盒子才要設(shè)置浮動(dòng)
2.父盒子中,又是一個(gè)小天地,內(nèi)部可以繼續(xù)使用浮動(dòng)
1.2 BFC規(guī)范和瀏覽器差異
BFC Box Formatting Context 塊級(jí)格式上下文 隔離的獨(dú)立容器 容器中子元素不會(huì)影響到外面的元素,反之亦然
一個(gè)盒子 不設(shè)置height 當(dāng)內(nèi)容子元素都浮動(dòng)時(shí),無(wú)法撐起自身 -> 高度塌陷
解決方式 -> 形成BFC
BFC的創(chuàng)建方式 :
浮動(dòng) float 值不為none
可以解決,但是不能無(wú)原因給盒子浮動(dòng) -> 可以解決問題但是解決方式很差
定位 position 值不為static/relative
元素轉(zhuǎn)換 display 值為inline-block/flex/inline-flex
可以解決,但是盒子本身不再是塊元素 -> 可以解決問題但是解決方式很差
overflow:hidden 溢出隱藏 ,溢出盒子邊框的內(nèi)容將會(huì)被隱藏
非常好的讓盒子形成BFC的方式
BFC的作用:
解決子元素全部浮動(dòng)導(dǎo)致父元素高度塌陷的問題
解決盒子margin塌陷問題
阻止元素被浮動(dòng)元素覆蓋
瀏覽器差異 :
ie6/ie7 使用haslayout機(jī)制 和BFC略有差異:ie瀏覽器可以使用zoom:1屬性 讓盒子擁有布局
1.3 清除浮動(dòng)
1.讓內(nèi)部有浮動(dòng)的盒子形成BFC
2.給后續(xù)父盒子設(shè)置clear:both 清除左右浮動(dòng)的方法 -> 有副作用,不推薦
3.給盒子添加最后一個(gè)子元素 ::after
.clearfix:after{
content:'';
display:block;
clear:both
}
4.在兩個(gè)盒子之間設(shè)置一個(gè)空div,屬性給clear:both
1.4 相對(duì)定位
position : relative 相對(duì)自己原來(lái)的位置進(jìn)行位置調(diào)整
四個(gè)描述屬性:left right top bottom
性質(zhì): 本質(zhì)位子不變,渲染出'影子'的位置,不脫離文檔標(biāo)準(zhǔn)流
作用:
可用于微調(diào)元素位置
可以作為絕對(duì)定位的參考盒子
1.5 絕對(duì)定位
position : absolute 盒子在瀏覽器中以坐標(biāo)進(jìn)行位置精準(zhǔn)描述 擁有自己的絕對(duì)位置
描述屬性與相對(duì)定位相同
性質(zhì):
脫離標(biāo)準(zhǔn)文檔流 釋放自己的位置,不會(huì)對(duì)其他元素產(chǎn)生干擾,但會(huì)進(jìn)行壓蓋
絕對(duì)定位并不一定以瀏覽器為基準(zhǔn)點(diǎn),會(huì)以自己祖先元素中,離自己最近的擁有定位屬性的盒子作為基準(zhǔn)點(diǎn) -> 父相子絕
作用:
絕對(duì)定位的盒子垂直居中 : top:50% margin-top : 自己高度的一半
z-index 屬性 堆疊順序
###1.6 固定定位
position:fix 無(wú)論頁(yè)面如何滾動(dòng),永遠(yuǎn)固定在那里
性質(zhì):
以瀏覽器為基準(zhǔn)點(diǎn)
脫離標(biāo)準(zhǔn)文檔流
2 邊框與圓角
2.1邊框
邊框三要素
border-width/border-style/border-color 線寬度/線型/線顏色
線型 border-style
solid-實(shí)線 / dashed-虛線 / dotted-點(diǎn)狀線
合寫/簡(jiǎn)寫 border: 1px solid #000 -- 線寬1px,顏色為黑的實(shí)線邊框
邊框
四條邊的屬性
border-top
border-right
border-bottom
border-left
四條邊同樣具有三要素屬性
屬性值為none時(shí),則為去掉邊框
邊框制作三角形
元素寬高置0,一條邊框線為主,另外三條邊框?yàn)橥该?不可為none),邊框線寬即為三角形斜邊,邊框方向與三角形直角指向方向相反
border-radius屬性 圓角半徑
默認(rèn)單位為px 指圓角半徑
單獨(dú)設(shè)置四個(gè)圓角,左上 右上 右下 左下 | 左上 右上左下 右下 | 左上右下 右上左下 | 全部
單位為百分比時(shí),指圓角半徑為邊長(zhǎng)的百分比,正方形百分比為50%,則為正圓形,長(zhǎng)方形為50%時(shí)就是橢圓形
2.2 盒子陰影
box-shadow 屬性
box-shadow: 10px 20px 30px rgba(0,0,0,.5) | x偏移 y偏移 模糊量 顏色
陰影延展 第四個(gè)像素值 陰影的延展值
內(nèi)陰影 添加inset屬性,則陰影向內(nèi)部延展
多陰影 逗號(hào)隔開多組屬性
3. 背景與漸變
background 屬性
background-color 背景顏色
background-image 背景圖片
屬性值為url(路徑)
background-repeat 背景重復(fù)模式
repeat 默認(rèn)
repeat-x x平鋪
repeat-y y平鋪
no-repeat 不平鋪
background-size 背景尺寸
background-size:
屬性值:
width height | 單位可以是像素也可以是百分比
等比例設(shè)置可以將寬/高設(shè)為auto
contain:將背景圖片智能改變尺寸以容納到盒子里-圖片必定完整,但不一定撐滿盒子
cover:將背景圖片智能改變尺寸以撐滿盒子-圖片不一定完整,但是一定撐滿盒子
background-clip 背景裁切
border-box 背景延申至邊框(默認(rèn)值)
padding-box 背景延伸至內(nèi)邊(padding),不會(huì)繪制到邊框處(僅在dotted,dashed邊框可察覺)
content-box 背景被裁剪至內(nèi)容區(qū)
background-origin 背景起源 相對(duì)于什么位置來(lái)定位
border-box
padding-box
content-box
background-attachment 背景固定
fixed 自己滾動(dòng)條不動(dòng),外部滾動(dòng)條不動(dòng)
local 自己滾動(dòng)條動(dòng),外部滾動(dòng)條動(dòng)
scroll(默認(rèn)值) 自己滾動(dòng)條不動(dòng),外部滾動(dòng)條動(dòng)
background-position 背景圖片位置
屬性值
x y 盒子的(x,y)坐標(biāo)
top/left/right/bottom/center
復(fù)合屬性:
background: white url(路徑) no-repeat center center
背景顏色 背景圖片 背景重復(fù) 背景位置
ps:
padding區(qū)域有背景顏色
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;
/*縱向溢出的內(nèi)容用滾動(dòng)條顯示*/
overflow-y: scroll;
background-image: url(images/秋之游人.jpg);
background-attachment: scroll;
}
body{
height:3000px;
/*width:2000px;*/
}
</style>
</head>
<body>
<div class="box1">
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</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區(qū)域，此時(shí)就不會(huì)在點(diǎn)狀線、虛線邊框底下渲染*/
background-clip: padding-box;
margin-bottom: 20px;
}
.box3{
width:300px;
height:300px;
border:10px dotted #000;
padding:60px;
background-image:url(images/秋之游人.jpg);
/*背景裁切到內(nèi)容區(qū)域*/
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 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實(shí)現(xiàn)，準(zhǔn)確測(cè)量定位
優(yōu)點(diǎn):CSS精靈可以減少HTTP請(qǐng)求數(shù),加快網(wǎng)頁(yè)顯示速度
缺點(diǎn):不方便測(cè)量,后期改動(dòng)麻煩
###3.2 線性漸變
background-image 可以用linear-gradient()創(chuàng)建線性漸變背景
background-image: linear-gradient(to right,blue,red)
漸變方向,開始顏色,結(jié)束顏色
漸變方向 可以寫成度數(shù),deg表示度數(shù) 45deg 45度
瀏覽器私有前綴：
不同瀏覽器有不同的私有前綴，用來(lái)對(duì)試驗(yàn)性質(zhì)的CSS前綴加以標(biāo)識(shí)
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)
圓心坐標(biāo)(以盒子中心為坐標(biāo)),開始顏色,結(jié)束顏色
<!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
瀏覽器的私有前綴:
對(duì)試驗(yàn)性質(zhì)的css屬性加以標(biāo)識(shí)
chrome -webkit-
firefox -moz-
IE/EDge -ms-
歐鵬 -o-
4 2D與3D轉(zhuǎn)換
transform 屬性
屬性值:
rotate(旋轉(zhuǎn)角度) 旋轉(zhuǎn)變形 旋轉(zhuǎn)角度為正,則為順時(shí)針渲染,反之則為逆時(shí)針
scale(縮放倍數(shù)) 縮放變形 縮放倍數(shù)小于1表示縮小元素,大于1表示放大元素
skew(x斜切角度,y斜切角度) （10deg,10deg）斜切變形
translate(向右移動(dòng),向下移動(dòng)) 位移變形 | 類似于相對(duì)定位，但是兼容性不如相對(duì)定位，只兼容到IE9 | 微調(diào)元素的方式 | 兼容到ie9
transform-origin 屬性
設(shè)置自己的自定義變換原點(diǎn)。
3d旋轉(zhuǎn)
transform:rotateX()/rotateY() 繞橫軸/縱軸旋轉(zhuǎn) 橫軸上向后,下向前為正 縱軸左向前,右向后,為正
perspective 屬性 透視強(qiáng)度 '人眼到舞臺(tái)的距離' 單位px 給父元素設(shè)置perspective屬性,給子元素transform,好比舞臺(tái)和演員
空間移動(dòng)
3d旋轉(zhuǎn)后,繼續(xù)添加 translateX()/translateY()/translateZ()實(shí)現(xiàn)空間移動(dòng),以當(dāng)前的旋轉(zhuǎn)面形成一個(gè)坐標(biāo)軸
<!DOCTYPE html><!--3D旋轉(zhuǎn)-->
<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"><!--舞臺(tái)-->
<p></p><!--演員-->
</div>
<div class="box2">
<p></p>
</div>
<div class="box3">
<p></p>
</div>
</body>
<!DOCTYPE html><!--旋轉(zhuǎn)變形-->
<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{
/*以左上角為中心點(diǎn)進(jìn)行旋轉(zhuǎn)*/
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>
原文鏈接：https://blog.csdn.net/qq_53300975/article/details/125835773
相關(guān)推薦
- 2022-04-25 C++的靜態(tài)類型檢查詳解_C 語(yǔ)言
- 2022-05-04 詳解Python使用apscheduler定時(shí)執(zhí)行任務(wù)_python
- 2024-03-28 SpringBoot項(xiàng)目中的500錯(cuò)誤
- 2022-08-03 C++實(shí)現(xiàn)圖像目標(biāo)區(qū)裁剪ImageCropping_C 語(yǔ)言
- 2022-03-14 如何在Git hub上快速查找合適的項(xiàng)目（如何在github上找到自己想要的代碼）
- 2022-09-16 淺析python中5個(gè)帶key的內(nèi)置函數(shù)_python
- 2022-05-26 Redis?操作多個(gè)數(shù)據(jù)庫(kù)的配置的方法實(shí)現(xiàn)_Redis
- 2022-06-28 python神經(jīng)網(wǎng)絡(luò)tf.name_scope和tf.variable_scope函數(shù)區(qū)別_pyth
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速