首页 > 其他分享> 文章详细

CSS结尾

2022-02-10 21:34:32 阅读：121 来源： 互联网

标签：定位结尾 color height width background CSS 200px

浮动

浮动主要就是用于页面布局

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

浮动带来的负面影响

会造成父标签塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin:10px  ;
            border:8px solid red
        }
        #d1 {
        width: 200px;
        height: 200px;
        float: left;
        background-color: yellow;
        }
        #d2 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

解决浮动带来的影响

1、在写一个div将父标签撑起来（不推荐使用）

<div id="d3"></div>

<style> #d3 {
            height: 200px;
        }
</style>

2、关键字clear（可以使用，但不建议）
clear:left 该标签左侧不能有浮动标签
clear:both 改标签左右不能有浮动标签

<div id="d3"></div>

<style> #d3 {
            clear:both;
        }
</style>

3、通用解决策略
只要父标签塌陷就可以使用

.clearfix:after {
	content:'';		<!--这是文本内容为空-->
	clear:both;		<!--左右两边不能有浮动元素-->
	display:block;		<!--将此标签更改为块级行内标签-->
}

<!--    class=clearfix    --><哪个标签塌陷给哪个标签赋值这个类>

4、补充
元素浮动之后可能会挡住没有浮动的标签，使用浮动时要注意
文本会优先展示

 <div id="d3" style="width: 50px;height: 50px;background-color: orange">123</div>

定位

静态定位 static
- 所有的标签默认都是静态定位及不能改变位置
相对定位 relative
- 相对标签原来的位置做定位
绝对定位 absolute
- 相对于已经定位过的父标签做定位（没有参考的标签就以body为标准）
固定定位 fixed
- 相对于浏览器窗口做定位（固定在浏览器某个位置一直不动）

如何使用CSS完成定位
定位关键字：position
位置关键字：left,regit,top,bottom
相对定位
根据原来的位置进行定位

<style>
        #d2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
            left: 50px;
            top: 50px;
        }
</style>

绝对定位
为什么会覆盖上呢？？？

<style>
        #d2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 50px;
            top: 50px;
        }
</style>

固定定位
网页内容怎么改变，固定定位都不会变

<style>
        #d2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: fixed;
            left: 20px;
            bottom: 50px;
        }
</style>

是否脱离文档流

当标签位置改变后，原来的位置是否有其他标签占用？
如果被占用就说明会脱离文档流
如果不占用说明不会脱离文档流

可以改变位置的功能
浮动
定位

测试

浮动

<style>
        #d1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        #d3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
</style>

<body >
    <div class="clearfix">
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>

左浮

右浮

绝对定位

        #d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            right: 20px;

        }

固定定位

        #d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            right: 100px;
            bottom: 20px;
        }

相对定位

        #d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            left: 300px;
        }

**总结
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位

溢出属性

当文本内容或者图片大于所在的标签会怎么样？

解决
关键字：overflow
属性：
hidden 隐藏

auto 滑动

scroll 滑动

圆形头像制作

#d1 {
            width: 200px;  <!--div标签宽-->
            height: 200px;  <!--高-->
            border: 3px solid darkgray;  <!--边框-->
            border-radius: 50%;  <!--画圆-->
            overflow: hidden;  <!--隐藏-->
        }
#d1 img {
            /*max-width: 100%;*/  <!--占最大-->
            width: 100%;  <!--占标签大小-->
        }

z—index属性

浏览器平面不是一个二维坐标系，而是一个三维坐标系
参考百度账号退出阶段

当退出时会显示原来界面、一层淡灰色界面以及退出界面

名称
模态框

关键字
z-index

属性
数字即可，越大越在前面

测试

<style>
        #d1 {
            height: 300px;
            width: 300px;
            position: fixed;
            top: 50px;
            left: 50px;
            background-color:beige;
            z-index: 99;
        }
        #d2 {
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 2000px;
            position: fixed;
            z-index: 33;
        }
</style>

<body >
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3">这是最底层的文字</div>
</body>

透明度

关键字
opacity

属性
0.1-0.9选择透明度

与rgba的区别
rgba：只影响背景色
opacity：影响背景色加字体颜色

阴影补充

选择器 {
	box-shadow:5px 5px 5px 5px rgba(颜色数值)
}

标签：定位,结尾,color,height,width,background,CSS,200px
来源： https://www.cnblogs.com/yuanyangguo/p/15881138.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS结尾

浮动

定位

是否脱离文档流

溢出属性

z—index属性

透明度

阴影补充