网站首页 编程语言 正文
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-05-08 Python与C语言分别完成排序流程_python
- 2022-07-06 C语言超细致讲解分支语句_C 语言
- 2022-09-01 前端工程Monorepo项目管理方式_其它综合
- 2022-07-02 Python使用struct库的用法小结_python
- 2022-07-16 feign调用传递请求头
- 2022-04-25 jquery实现表格行的上下移动和置顶_jquery
- 2022-04-27 使用jQuery实现图片轮播效果_jquery
- 2022-05-03 windows server 2019开启iis服务器+tp5.1的完美配置运行流程_win服务器
- 最近更新
-
- 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加速