網站首頁 編程語言 正文
CSS浮動定位與背景樣式
1.浮動與定位
1.1 浮動的基本概念
本質功能 : 實現塊元素并排布局
使用要點 :
1.要浮動,并排的盒子都要設置浮動
2.父盒子寬度足夠,否則會被迫換行
3.子盒子會按順序進行貼靠,沒有足夠空間,則會尋找再前一個兄弟元素
4.浮動元素一定能設置寬高
5.浮動元素脫離了標準文檔流
left屬性 向左浮動
right屬性 向右浮動
浮動實現網頁布局
注意事項:
1.垂直顯示的盒子,不設置浮動,并排顯示的盒子才要設置浮動
2.父盒子中,又是一個小天地,內部可以繼續使用浮動
1.2 BFC規范和瀏覽器差異
BFC Box Formatting Context 塊級格式上下文 隔離的獨立容器 容器中子元素不會影響到外面的元素,反之亦然
一個盒子 不設置height 當內容子元素都浮動時,無法撐起自身 -> 高度塌陷
解決方式 -> 形成BFC
BFC的創建方式 :
浮動 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:both
1.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-style
solid-實線 / dashed-虛線 / dotted-點狀線
合寫/簡寫 border: 1px solid #000 -- 線寬1px,顏色為黑的實線邊框
邊框
四條邊的屬性
border-top
border-right
border-bottom
border-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 | 單位可以是像素也可以是百分比
等比例設置可以將寬/高設為auto
contain:將背景圖片智能改變尺寸以容納到盒子里-圖片必定完整,但不一定撐滿盒子
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 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>
原文鏈接：https://blog.csdn.net/qq_53300975/article/details/125835773
相關推薦
- 2022-02-22 Uncaught TypeError: Cannot read properties of unde
- 2022-09-09 使用PyTorch實現隨機搜索策略_python
- 2022-03-28 深入理解numpy中argmax的具體使用_python
- 2022-11-12 PostgreSQL邏輯復制解密原理解析_PostgreSQL
- 2022-08-20 在python中讀取和寫入CSV文件詳情_python
- 2022-05-21 python實現會員管理系統_python
- 2022-11-06 YOLOv5改進系列之增加小目標檢測層_python
- 2022-12-01 Rust實現AES加解密詳解_Rust語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速