首页 > 其他分享 >CSS基础(三)

CSS基础(三)

时间：2022-12-01 14:13:35浏览次数：24  
标签：color 100px 基础 height width background CSS 200px

位置层级 z-index

  • 测试环境:先搞两个div颜色块
......
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
			}
			.box1 {
				background-color: red;
			}
			.box2 {
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		
	</body>
......
  • 对box1 设置 position 偏移,box1色块会有一部分覆盖了box2
......
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
			}
			.box1 {
				background-color: red;
				position: relative; /*增加之处*/
				top: 100px;
				left: 100px;
			}
			.box2 {
				background-color: #008000;
			}
		</style>
  • 现在,我们也对box2设置位置,结果变成了 box2的色块覆盖了box1色块
......
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
			}
			.box1 {
				background-color: red;
				position: relative; 
				top: 100px;
				left: 100px;
			}
			.box2 {
				background-color: #008000;
				position: relative; /*增加之处*/
			}
		</style>
  • 所以,对于谁在谁上面,css提供了 z-index 这个属性来决定(使用前提,必须有position,否则没有意义),值越大,就越往上层
<style type="text/css">
	div {
		height: 200px;
		width: 200px;
	}
	.box1 {
		background-color: red;
		position: relative;
		top: 100px;
		left: 100px;
		z-index: 100;/*增加之处*/
	}
	.box2 {
		background-color: #008000;
		position: relative;
		z-index: 200;/*增加之处*,该色块会在最上层,即把box1部分色块覆盖/
	}
	
</style>
......
<div class="box1"></div>
<div class="box2"></div>
  • 再次强调,有position以后, z-index才有意义,否则根本没效果,把上述示例的position注释掉,色块就互相隔离开来了

定位的父子关系/兄弟关系层级探讨

  • demo环境:两个父包子的色块
<style type="text/css">
    .parent {
        height: 200px;
        width: 200px;
        background-color: red;
    }
    .child {
        height: 100px;
        width: 100px;
        background-color: green;
    }
    
</style>
......
<div class="parent">
    <div class="child"></div>
</div>
  • 对两个色块设置定位,效果是 子色块与父色块之间,有10px的边距
<style type="text/css">
    .parent {
        height: 200px;
        width: 200px;
        background-color: red;
        position: relative; /*新增*/
    }
    .child {
        height: 100px;
        width: 100px;
        background-color: green;
        position: absolute; /*新增*/
        top: 10px;
        left: 10px;
    }
    
</style>
  • 现在,想把父色块的层级提上来,加 z-index 可否实现效果(答案'否',没有效果)
<style type="text/css">
    .parent {
        height: 200px;
        width: 200px;
        background-color: red;
        position: relative; 
        z-index: 100; /*新增,无效果*/
    }
    .child {
        height: 100px;
        width: 100px;
        background-color: green;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    
</style>
  • 解决办法:删除父色块的层级,把子色块的层级修改为'负数'即可
<style type="text/css">
    .parent {
        height: 200px;
        width: 200px;
        background-color: red;
        position: relative;
        /* z-index: 100; 注释掉 */
    }
    .child {
        height: 100px;
        width: 100px;
        background-color: green;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: -1; /*新增*/
    }
    
</style>

兄弟关系探讨

  • demo 环境:两个兄弟色块,与浏览器拉开边距(谁在后面,谁占优势,所以绿块会覆盖红块)
<style type="text/css">
    .box1 {
        height: 200px;
        width: 200px;
        background-color: red;
        position: absolute;
        left: 100px; /*距离浏览器100px*/
        top: 100px;
        
    }
    .box2 {
        height: 200px;
        width: 200px;
        background-color: green;
        position: absolute;
        top: 0px; /*与浏览器没有距离*/
        left: 0px;
    }
    
</style>
......
<div class="box1"></div>
<div class="box2"></div>
  • 对红块运用层级优先,有效果,红块在上层
<style type="text/css">
    .box1 {
        height: 200px;
        width: 200px;
        background-color: red;
        position: absolute;
        left: 100px;
        top: 100px;
        z-index: 100; /*新增*/
    }
    .box2 {
        height: 200px;
        width: 200px;
        background-color: green;
        position: absolute;
        top: 0px;
        left: 0px;
    }
            
</style>
  • 小结
- 父子关系设置层级,把子元素的 z-index 设置成 负数即可
- 兄弟关系设置层级,正常设置即可

position的"另类用法",把'行内元素',变成'块级元素'

  • demo 环境:对 span 元素设置宽/高,肯定是没效果的,示例如下
<style type="text/css">
    span {
        width: 200px; /*无效果*/
        height: 200px;
        background-color: yellow;
        position: absolute;
    }
    
</style>
......
<span>111111111111</span>
  • 另类解决办法,添加 position:absolute,效果就出来了
<style type="text/css">
    span {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: absolute; /*新增*/
    }
    
</style>

使'行内元素'变成'块级元素'的三个方法

display:block

float:left

position:absolute

利用position实现 水平垂直居中

  • 之前,我们实现水平方向居中,使用的是: margin:0 auto;(垂直方向无法居中)

  • 利用position实现 外层容器 相对于 浏览器窗口 '水平&垂直方向'居中


<style>
    * {
        padding: 0;
        margin:0;
    }
    div {
        width:200px;
        height:200px;
        background-color:red;
        position:absolute; <!--距离上/左均50%,外边距再切掉原有的一半像素即可-->
        top:50%;
        left:50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>
......
<body>
    <div></div>
</body>
  • 父子关系容器的 '水平&垂直方向'居中(一样的套路)
<style type="text/css">
    .parent {
        width: 500px;
        height: 500px;
        background-color: red;
        margin: 0 auto;
        position: relative; <!--设置相对定位,給子元素当参考-->
    }
    .child {
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute; <!--一样的套路-->
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>
......
<div class="parent">
    <div class="child"></div>
</div>

position[absolute] 和 浮动 的区别(都会脱离文档流)

  • 实验环境: 两个色块盒子
<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
......
<div class="box1"></div>
<div class="box2"></div>
  • 使用浮动:红块浮起来,绿块趁机上来
<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left; <!--浮动,绿块会趁机挤上来-->
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
......
<div class="box1"></div>
<div class="box2"></div>
  • 使用 position:红块浮起来,绿块趁机上来(一样的效果)
<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute; <!--一样的效果-->
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
......
<div class="box1"></div>
<div class="box2"></div>

  • 区别:当加入文字的时候,区别就很明显了

    • float 文字有环绕效果,不会被覆盖(半脱离)

    • absolute 文字被覆盖了(全脱离)

<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left; <!--浮动-->
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
......
<div class="box1"></div>
<div class="box2"> <!--新增文字,环绕效果-->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit odio ...........
</div>

<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute; <!--修改之处-->
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
......
<div class="box1"></div>
<div class="box2"> <!--文字被覆盖了-->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit odio ...........
</div>

利用锚点实现单页面内部的定位跳转

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <style>
         * {
            margin: 0;
            padding: 0;
         }
         ul { <!--整个列表固定在浏览器右边,并距离上方100px-->
            list-style: none;
            position: fixed;
            top: 100px;
            right: 0;
         }
         li { <!--列表中的每一项,容器内居中,并加边框-->
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid red;
         }
         div { <!--示范内容,占比较大的高度,方便演示效果-->
            height: 800px;
         }
      </style>
   </head>
   <body>
      <ul>
         <!--利用<a>实现锚点的跳转-->
         <li>
            <a href="#part1">第一部分</a>
         </li>
         <li>
            <a href="#part2">第二部分</a>
         </li>
         <li>
            <a href="#part3">第三部分</a>
         </li>
         <li>
            <a href="#part4">第四部分</a>
         </li>
         
      </ul>
      <!--使用id来标识位置-->
      <div id="part1">我是第一部分内容</div>
      <div id="part2">我是第二部分内容</div>
      <div id="part3">我是第三部分内容</div>
      <!--最后这块,由于到底部了,所以实际效果,与浏览器顶部会有一段距离,这是正常的-->
      <div id="part4">我是第四部分内容</div>
</html>

精灵图

  • 将多张图片合成一张图,然后利用 background-position 实现图片定位的技术

  • 好处

    • 通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度

    • 通过整合图片,减少的图片的体积

  • 案例演示

<!--先搞6个色块,向左浮动起来,然后把色块替换成图片即可-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 103px;
                height: 32px;
                float: left;
                margin: 10px;
                background-color: yellow;
            }
        </style>
    </head>
    
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </body>
</html>


<!--把色块替换成图片,开始定位-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div {
                width: 103px;
                height: 32px;
                float: left;
                margin: 10px;
                background-image: url(./img/jd.png); <!--背景图片-->
            }
            .box1 {
                background-position: 105px 231px; <!--调试工具开始定位-->
            }
            .box2 {
                background-position: 105px 195px;
            }
            .box3 {
                background-position: 105px 157px;
            }
            ......
        </style>
    </head>
    
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </body>
</html>

元素的宽高自适应

  • 我们经常希望,元素的大小随着窗口或者子元素的大小,而自动调整,这就是自适应
- width:auto  /  height:auto
- 或者不指定宽高, 那么css默认就是auto


......
<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        /* width: 100px; */
        /* width: 100%; 也会占满窗口,那是因为body宽度占满了100%,如果body为500px,就不会占满*/  
        width: auto; /* 宽度会占满整个窗口 */ 
        height: 100px;
        background-color: purple;
    }
    
</style>
......
<div></div>
  • 案例演示:导航栏(小块),中间部分(大块),底部(小块)
......
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header,.footer {
        width: 100%;
        height: 50px;
        background-color: red;
    }
    .body {
        height: 500px;
        background-color: blue;
    }
    
</style>
......
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>

<!--当body里面的内容过多,超过body本身的高度时,里面的元素就会溢出,从而影响美观-->
......
.body {
    height: 500px;
    background-color: blue;
}
li {
    height: 100px;
    background-color: green;
}
......
<ul>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
</ul>

<!--解决办法:把body的高度设置为自适应即可,不再用固定的500px-->
......
.body {
    /* height: 500px; 注释掉即可*/
    background-color: blue;
}
li {
    height: 100px;
    background-color: green;
}
......
<ul>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
    <li>111111111111111111</li>
</ul>

<!--问题又来了,当内容比较少的时候,比如列表只有一项内容,此时自适应高度比较高,也不美观-->
......
.body {
    background-color: blue;
}
li {
    height: 100px;
    background-color: green;
}
......
<ul>
    <li>111111111111111111</li> <!--只有一行,自适应高度效果不美观-->
</ul>

<!--解决办法,设置最小高度 min-height即可-->
- 拓展延伸

    - min-height
    - max-height
    - min-width
    - max-width

伪元素

  • 虚伪的元素,并不是真实存在的,表现为其内容鼠标无法选中(而真实元素的内容可以)

- div::after { // 注意写成 div:after 也是可以的,但是不够标准~~~
    content:"div后面放置的文本内容"
}

- div::before {
    content:"div前面放置的文本内容"
}

- ::first-letter: 定义对象内第一个字符的样式

- ::first-line: 定义对象内第一行文本的样式
  • demo示例
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div::first-letter {
        color: red;
    }
    div::first-line {
        background-color: green;
    }
    div::before {  /*content的内容无法被鼠标选中*/
        content: "aaa";
    }
    div::after {
        content: "bbb";
    }
</style>
......
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus eum molestiae of......</div>
  • 实战案例,使用伪元素是解决浮动的最佳方案
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .left {
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .right {
                width: 100px;
                height: 100px;
                background-color: green;
                float: left;
            }
            .content {
                width: 200px;
                height: 200px;
                background-color: purple;
            }
            .box::after {
                /*在父容器box后面添加伪元素,以下写法比较固定*/
                content: '';
                clear: both;
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="content"></div>
        <script>
            
        </script>
    </body>
</html>

......
<!--如果有内容,可以这么写-->
.box::after {
    content: 'aaa';
    clear: both;
    display: block;
    width: 0;
    height: 0;
}

显示/隐藏元素的两种方法

- display: none; 

    - display元素消失以后,后面的元素会占用display元素的位置

visibility: hidden;

    - visibility元素消失以后,后面的元素不会占用visibility元素的位置

盒子随着窗口的大小而改变(宽高自适应)

html,body {
    height: 100%;
}

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100%;
            height: 100%;
            background-color: red;
        }
        
        html,body { /*不加这句,盒子是没有高度的,网页上显示不出来*/
            height: 100%;
        }
    </style>
......
<body>
    <div class="box">
    </div>
</body>

两栏布局案例演示

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .left {
            width: 200px;
            height: 100%;
            background-color: blueviolet;
            float: left; /*浮动起来,使left盒子位置靠上来*/
        }
        .right {
            height: 100%;
            background-color: burlywood;
            margin-left: 200px; /*如果不设置外边距,部分内容会被right盒子覆盖*/
            
        }
    </style>
    ......
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
  • calc()函数:动态计算长度值
div {
    width:calc(100% - 10px)
}

- 注意事项: 运算符前后都需要保留一个"空格",否则计算无效!

- 任何长度值都可以使用calc()计算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                height: 100%;
            }
            .left {
                width: 200px;
                height: 100%;
                background-color: blueviolet;
                float: left;
            }
            .right {
                height: 100%;
                width: calc(100% - 200px); /*默认是减去右边的宽度*/
                background-color: burlywood;
                float: left; /*如果不浮起来,那么窗口右边会有200px的间隔,浮起来刚好把200间隔填满*/
                
            }
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <script>
            
        </script>
    </body>
</html>

标签：color,100px,基础,height,width,background,CSS,200px
From： https://www.cnblogs.com/qinganning/p/16941226.html

相关文章

  • 腾讯基础面
    (传送门)开场白：自我介绍这里一笔带过，给对面介绍自己内在+外在+校园经历+校园项目+意向岗位面试公司：腾讯子公司云智研发一面1.有了解过C++吗？接受转语言吗？2......
  • 设计链表-LeetCode707 基础题
    LeetCode链接：https://leetcode.cn/problems/design-linked-list/题目：设计链表的实现。您可以选择使用单链表或双链表。单链表中的节点应该具有两个属性：val 和 next。val......
  • Python基础之公共操作
    ⼀、运算符1、+#1.字符串str1='aa'str2='bb'str3=str1+str2print(str3)#aabb#2.列表list1=[1,2]list2=[10,20]list3=list1+list2print(list3)#[......
  • css 设置滚动条样式
    /*设置滚动条样式*/div::-webkit-scrollbar{width:4px;}div::-webkit-scrollbar-thumb{border-radius:10px;-webkit-......
  • 机器学习之相关数学基础
    机器学习数学部分常用相关概念:高等数学1）函数2）极限3）导数4）极值和最值5）泰勒级数6）梯度7）梯度下降线性代数1）基本概念2）行列式3）矩阵4）最小二乘法5）向量的线性相关性概率论1）事件2）排列......
  • css 新技能
    让页面直接变黑白。.div{-webkit-filter:grayscale(100%);}细数那些惊艳一时的CSS属性https://mp.weixin.qq.com/s/HMLO6q99puII8fdgVqIaKw......
  • 整个页面代码置灰，css设置
    全民悲伤的日子，页面置灰的代码。 <styletype="text/css">html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-fil......
  • 用DevExpress实现基于HTML&CSS的桌面应用程序的UI（二）
    DevExpressWinForm拥有180+组件和UI库，能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForm能完美构建流畅、美观且易于使用的应用程序，无论是Office风......
  • 企业基础设施资源申请及评估规范
    1.目的规范基础设施资源评估标准和资源申请流程，明确资源申请时间节点，减少沟通成本，提升整体效率。2.适用范围1、务系统，包括自研和第三方系统所涉及的基础设施资源。2、体系内......
  • css居中对齐
    转 css居中对齐需求：练习要求：       昵称： jojo学徒园龄： 5个月粉丝： 1关注： 1+加关注搜索  常用链接我的随笔我的评论我......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99