1、定位与浮动的区别：浮动只能浮动到左面与右面
2、定位想定在页面上想定到哪里可以定到任意位置。
固定定位: fixed
绝对定位：absolute
相对定位：relative
静态定位：static
## 固定定位<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 200px;height: 200px;background-color: #ccc;/*静态定位 默认值 标准流 不会动*/ position: static;left: 1000px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>
复制代码## 相对定位 不脱离标准流 相对于自身位置偏移
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;}.top{background-color: red;}.bottom{background-color: pink;/*相对定位不脱离标准流 相对定位 是元素相对于它，在标准流中的位置 + 边偏移属性 来设置元素的位置相对定位以 自己在标准流位置的左上角为基点 + 边偏移属性，定位元素新的位置*/position: relative;left: 300px;top: 300px;}.left{background-color: orange;}</style>
</head>
<body><div class="top"></div><div class="bottom"></div><div class="left"></div>
</body>
</html>
复制代码绝对定位有两个重要的概念
1、完全脱标 ----完全不占位
2、父元素要有定位 ---- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.father{width: 800px;height: 500px;background-color: pink;margin:50px auto;/* 相对定位 如果当前父元素没有定位则寻找上一级有定位的父元素*/position: relative;}.son{width: 500px;height: 400px;background-color: orange;/*相对定位 绝对定位会寻找离他最近的父元素位置偏移*/position: relative;}/*子代选择器*/.son > div{width: 100px;height: 100px;}.grandson {background-color: green;/*绝对定位脱离标准流不占据原来的位置父元素要有定位，如果父元素都没有定位，则以浏览器为准定位*/position: absolute;right: 0;top: 0;}.grand{background-color: #ccc;}</style>
</head>
<body><div class="father"><div class="son"><div class="grandson"></div><div class="grand"></div></div></div>
</body>
</html>复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.nav{width: 800px;height: 200px;background-color: #ccc;/*子绝父绝 会脱标准流position: absolute;*//*父级要占有位置，字节要任意摆放，这就是子绝父相的由来 父元素*/position: relative;}.box{width: 100px;height: 100px;background-color: red;/*子绝父绝 会脱标准流position: absolute;*//*父级要占有位置，字节要任意摆放，这就是子绝父相的由来 子元素*/position: absolute;right: 0;top: 0;}.footer{width: 1000px;height: 200px;background-color: blue;}</style>
</head>
<body><!-- 定位口诀 ----子绝父相--><div class="nav"> //父元素<div class="box"></div> //子元素</div><div class="footer"></div>
</body>
</html>
复制代码固定定位
1、完全脱标 -- 完全不占位
2、只认浏览器的可视窗口,就是人看见的浏览器的地方
3、不随着滚动条滚动
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 100px;height: 100px;}.top{background-color: #ccc;/*固定定位*/position: fixed;right: 0;bottom: 200px;}.bot{background-color: red;}</style>
</head>
<body><div class="top"></div><div class="bot"></div>
</body>
</html>
复制代码注意 绝对定位不能通过设置margin：auto 设置水平居中
在底部居中 <!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.father{position: relative;width: 800px;height: 500px;background-color: #ccc;}.son{position: absolute;bottom: 0;/*往右走的50% 依据父元素的尺寸进行计算的*/left: 50%;/*需要在往回走自身的一半*/margin-left: -50px;width: 100px;height: 100px;background-color: red;/*只能对标准流的块元素有效 对 脱标的无效margin: 0 auto; 下面需要注释 层叠性*/}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.father{position: relative;width: 800px;height: 500px;background-color: #ccc;}.son{position: absolute;width: 100px;height: 100px;/*绝对定位的盒子居中显示*/top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;background-color: red;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
复制代码<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.father{position: relative;width: 800px;height: 500px;background-color: #ccc;}.son{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
复制代码z-index 的特性如下1、属性值：正整数，负整数或者0 默认值是0 数值越大，盒子越靠上2、如果属性值相同，则按照书写顺序，后来者居上3、数字后面不能加单位4、注意： z-index只能应用于相对定位，绝对定位和固定定位的元素，其他标准流浮动和静态定位无效
复制代码 <!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;}.top{background-color: red;position: relative;/*调用性对定位，绝对定位，固定定位的层叠顺序，默认值0值越大，元素越在上边。可以为负值*/z-index: 1;}.mid{background-color: #ccc;position: absolute;left: 0;top: 0;z-index: 2;}.bot{background-color: green;position: fixed;left: 0;top: 0;z-index: 2;}</style>
</head>
<body><div class="top"></div><div class="mid "></div><div class="bot"></div>
</body>
</html>
复制代码特性：一行可以有多个，可以设置宽高，大小受到内容的影响
可以使用inline-block 转换为行内块
可以用浮动float 默认转换为行内块
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块
所以：一个行内盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度注意给行内元素设置宽高就是脱离标准流
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.top{background-color: #ccc;display: inline-block;width: 100px;height: 100px;}p{float:left;/*脱离了标准流转换成了行内块显示*/}</style>
</head>
<body><div class="top">嘿哈</div><!-- 如果里面没有内容就是空的一行是0 --><p>浮动脱离</p>
</body>
</html>
复制代码< 左箭头
>右箭头
复制代码
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 500px;height: 500px;background-color: pink;margin: 0 auto;/*这里是第二部 使用 子绝父相 */position: relative;}.arrow-l,.arrow-r{position: absolute;width: 20px;height: 40px;/* 这里是第一步使用rgba a 代表alpha是背景透明，前面三个0 是黑色，后面的0.5是透明度 值越小越透明*/background-color: rgba(0,0,0,0.5);position: absolute;/*第三步使用地址*/top: 0;bottom:0;margin: auto;text-align:center;line-height: 40px;}/*第四步 使>右面*/.arrow-r{right: 0;}.round {position: absolute;left: 0;right: 0;margin:0 auto ;}/*创建小圆点*/.round i{/*display: inline-block;*/float: left; /*可以使用left 进行浮动*/width: 10px;height: 10px;border:1px solid #000;border-radius: 50%;}</style>
</head>
<body><div class="box"><img src=""><div class="arrow-l"><</div><div class="arrow-r">></div><div class="round"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
</body>
</html>
复制代码opacity 的透明度范围大 rgba 的作用范围小 他们俩的共性是 都是透明度，区别作用范围
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width:590px;height: 470px;/*背景颜色和背景图片撑不开盒子 所以需要给宽高*/background-image: url(images/jd.jpg);}.son{width: 200px;height: 200px;/*rgba a代表的是alpha，透明度，值越小，越透明,范围从零到1*//*background-color: rgba(0,0,0,0.4);*/background-color: red;/*这里使用到了上面学到的让盒子居中*/left: 0;right: 0;top: 0;bottom: 0;margin: auto;/*字体颜色透明*/font-size:60px;/*color: rgba(0,0,254,0.4);*//*opacity 范围也是0到1 控制元素整体的透明度*/opacity: 0.3;}</style>
</head>
<body><div class="box"><div class="son">嘿哈</div></div>
</body>
</html>
复制代码/*visible溢出可见overflow: visible;*//*超出自动显示滚动条不超出不显示滚动条overflow: auto;*//*不显示超过尺寸的内容超出部分隐藏overflow: hidden;*/ /*不管超出内容否，总是显示滚动条overflow: scroll;*/
复制代码 <!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 100px;height: 100px;background-color: #ccc;/*visible溢出可见overflow: visible;*//*超出自动显示滚动条不超出不显示滚动条overflow: auto;*//*不显示超过尺寸的内容超出部分隐藏overflow: hidden;*//*不管超出内容否，总是显示滚动条overflow: scroll;*/}</style>
</head>
<body><div class="box">这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍</div>
</body>
</html>
复制代码在css 中三个显示和隐藏的单词比较常见，我们要区分开他们分别是display visibility 和 overflow
display:none 隐藏对象与它相反的是display:block除了转换为块元素之外，同时还有显示元素的意思 特点：隐藏之后，不在保留位置
设置或检索是否显示对象
visible ：对象可视 hidden：对象隐藏
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;}.red{background-color: red;/*隐藏对象 之后不占位display: none;*//*对象隐藏 之后占位*/visibility: hidden;}.blue{background-color: blue;}</style>
</head>
<body><div class="red"></div><div class="blue"></div>
</body>
</html>
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 60px;height: 60px;background-color: pink;/*溢出隐藏overflow: hidden;*/position: relative;}.box img{/*第一步定位到这里 */position: absolute;left: 60px;/*显示元素 和 转换块的意思display: block;*//*第二位隐藏*/display:none;}/* 第三步 鼠标放上面的时候是谁显示 与隐藏*/.box:hover img{/*第四步显示*/display: block;}</style>
</head>
<body><div class="box"><!-- 这里是前景图片 --><img src="images/jd.jpg"></div>
</body>
</html>
复制代码鼠标样式cursor
cursor:default; 白色
cursor: pointer; 小手
cursor: move; 移动
cursor: text; 文本
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 200px;height: 200px;background-color: #ccc;/*鼠标样式cursorcursor:default; 白色cursor: pointer; 小手cursor: move; 移动cursor: text; 文本*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>
复制代码轮廓线 多用于input 表单，轮廓线在盒子外面
我们平时都是去掉，最直接的写法是outline：0； 或者outline:none; outline 就是光标外面的蓝色圆框。
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">input{/*清除轮廓线*/ outline: none;}</style>
</head>
<body><input type="text" name="">
</body>
</html>
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">textarea{outline: 0;/*防止文本域拖拽 */resize: none;}</style>
</head>
<body><textarea cols="30" rows="20"></textarea>
</body>
</html>
复制代码vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单/与文字的对齐
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{background-color: red;}img{/* 底部对齐vertical-align: bottom;*//* 中间对齐vertical-align: middle;*//* 顶部对齐vertical-align: top;*//* 基线对齐，默认的是文字和图片基线对齐vertical-align: baseline;*/}</style>
</head>
<body><div class="box"><img src="images/adv.jpg"> 你好</div>
</body>
</html>复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{background-color: red;}img{/*vertical-align: top;*//*display: block;*/}</style>
</head>
<body><div class="box"><img src="images/adv.jpg"></div>
</body>
</html>
复制代码white-space 设置或检索对象内文本显示方式通常我们使用于强制一行显示内容
normal：默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
text-overflow:ellipsis; 显示省略号
谨记想让文字后面实现三个小点点一定要 配合他们三个使用缺一不可
white-space: nowrap; // 强制不换行
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //显示三个小点
复制代码<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{width: 150px;height: 200px;background-color: #ccc;/*normal 正常默认值文字换行 nowrap 不换行 */white-space: nowrap;overflow: hidden;/*文字溢出 ellipsis 文本隐藏的移除显示省略号 clip 不显示省略号*/text-overflow: ellipsis;}</style>
</head>
<body><div class="box">好好学习天天向上，好好学习天天向上，好好学习天天向上</div>
</body>
</html>
复制代码网页请求原理，向服务器发送请求，当网页图像过多时，这将大大降低页面的加载速度 正值向上 负值向下
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 25px;height: 26px;border: 1px solid pink;background: url(images/sprite.png) 0 - 200px;}</style>
</head>
<body><div></div>
</body>
</html>
复制代码转载于:
本文发布于:2024-01-30 16:41:17，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170660407821404.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
