三.CSS进阶 2021-02-17

最新推荐文章于 2024-06-18 08:02:36 发布

明玥几时有

最新推荐文章于 2024-06-18 08:02:36 发布

阅读量196

点赞数

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/weixin_50678394/article/details/113839753

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

三.CSS进阶

1.盒子模型

1.1盒子模型定义

1.什么是盒子模型

可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念

2.盒子模型的组成

盒子模型由内容，内边距，边框和外边距组成

1.2盒模型之边框 border

border:边框类型颜色;

border:widthstylecolor;复合样式

border-width

border-stylesolid实线dashed虚线dotted点线double双边框

border-color

一个值的时候：代表四个方向值一样上右下左（顺时针）

二个值的时候：上下右左

三个值的时候：上右左下

四个值的时候：上右下左

border-width边框大小

border-top-width上边框大小

border-right-width右边框大小

border-bottom-width下边框大小

border-left-width左边框大小

border-top-width:0

border-style边框样式

border-top-style顶部边框类型

border-right-style右边边框类型

border-bottom-style底部边框类型

border-left-style左边边框类型

border-color边框颜色

border-top-color顶部边框颜色

border-right-color右边边框颜色

border-bottom-color底部边框颜色

border-left-color左边边框颜色

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
	<style>
		/*
		盒子模型
		盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
		*/
		*{
			margin:0;
			padding:0;
		}
		/*
		border:边框类型颜色;
		border:widthstylecolor;复合样式
		border-width
		border-stylesolid实线dashed虚线dotted点线double双边框
		border-color
		一个值的时候：代表四个方向值一样上右下左（顺时针）
		二个值的时候：上下右左
		三个值的时候：上右左下
		四个值的时候：上右下左
		
		border-width边框大小
		border-top-width上边框大小
		border-right-width右边框大小
		border-bottom-width下边框大小
		border-left-width左边框大小
		border-top-width:0
		
		border-style边框样式
		border-top-style顶部边框类型
		border-right-style右边边框类型
		border-bottom-style底部边框类型
		border-left-style左边边框类型
		
		border-color边框颜色
		border-top-color顶部边框颜色
		border-right-color右边边框颜色
		border-bottom-color底部边框颜色
		border-left-color左边边框颜色
		*/
		div{
			width:200px;
			height:100px;
			background:skyblue;
			/*border:5pxsolidred;*/
			border-width:5px10px15px;
			border-color:redblackblueaqua;
			border-style:solid;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

运行结果：

1.3内边距 padding

padding内边距，边框与内容之间的距离
       一个值的时候：代表四个方向值一样上右下左（顺时针）
       二个值的时候：上下右左
       三个值的时候：上右左下
       四个值的时候：上右下左

例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		/*
		padding内边距，边框与内容之间的距离
		一个值的时候：代表四个方向值一样上右下左（顺时针）
		二个值的时候：上下右左
		三个值的时候：上右左下
		四个值的时候：上右下左
		*/
		div{
			width:100px;
			height:100px;
			background:skyblue;
			border:10px solid red;
			/*padding:50px;*/
			/*padding:50px20px;*/
			/*padding:00050px;*/
			padding-left:50px;
			/*leftrighttopbottom*/
		}
	</style>
</head>
<body>
	<div>lalalal</div>
</body>
</html>

代码运行结果：

1.4外边距 margin

margin外边距元素与其他元素的距离（边框以外的距离）
       一个值的时候：代表四个方向值一样上右下左（顺时针）
       二个值的时候：上下右左
       三个值的时候：上右左下
       四个值的时候：上右下左
       margin:auto;快速左右居中
       垂直方向：margin-bottom,margin-top取两者之间的较大值
       水平方向：margin-left,margin-right取两者的和
       overflow:hidden;解决内边距重叠问题（关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）_Emily-CSDN博客）
       border

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<metacharset="UTF-8">
	<title>Title</title>
		<style>
		*{
			margin:0;
			padding:0;
		}
		/*
		margin外边距元素与其他元素的距离（边框以外的距离）
		一个值的时候：代表四个方向值一样上右下左（顺时针）
		二个值的时候：上下右左
		三个值的时候：上右左下
		四个值的时候：上右下左
		margin:auto;快速左右居中
		垂直方向：margin-bottom,margin-top取两者之间的较大值
		水平方向：margin-left,margin-right取两者的和
		overflow:hidden;解决内边距重叠问题
		border
		*/
		div{
			/*width:100px;*/
			/*height:100px;*/
			/*background:blue;*/
			/*margin:50px100px;*/
			/*margin-left:100px;*/
			/*margin:50pxauto;*/
			/*margin-left:auto;*/
			/*margin-right:auto;*/
			/*margin:50px;*/
			/*display:inline-block;*/
		}
		.box{
			/*margin-top:100px;*/
		}
		
		div.wrap{
			width:300px;
			height:300px;
			background:skyblue;
			/*border:1pxsolidred;*/
			overflow:hidden;
		}
		div.wrap div{
			width:100px;
			height:100px;
			background:yellow;
			margin:50px;
		
		}
</style>
</head>
<body>
<!--<div></div>-->
<!--<divclass="box"></div>-->

<div class="wrap">
	<div></div>
</div>
</body>
</html>

运行结果：

1.4 盒子模型的大小

盒子大小=样式宽高+内边距+边框

盒子宽度=左border+右border+width+左padding+右padding

盒子高度=上border+下border+height+上padding+下padding

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:200px;
			height:50px;
			background:blue;
			border:1pxsolidred;
			padding:50px;
			margin:20px;
		}
		/*
		盒子大小=样式宽高+内边距+边框
		盒子宽度=左border+右border+width+左padding+右padding
		盒子高度=上border+下border+height+上padding+下padding
		*/
	</style>
</head>
<body>
	<div></div>
</body>
</html>

运行结果：

2.Reset CSS

1.什么是RESETCSS

Reset 翻译过来就是重置，重置CSS

2.为什么需要RESET CSS

浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致

3. 如何使用RESETCSS

公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS

3.浮动

1.什么是浮动

浮动，其实就是让元素脱离正常的文档流

2.为什么需要浮动

当正常文档布局不能解决的时候，则需要脱离正常文档流

3.浮动带来的问题

高度塌陷

浮动示例：

浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。

文档流:是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）

脱离文档流：在页面中不占位置

清除浮动

1.给父级增加高度（不推荐使用）

2.给父级加overflow:hidden;

3.给父级加一个类

.clearfix::after{

content:"";

display:block;

clear:both;

}

浮动的特点

如果只给前面的元素浮动，后面的要占据他的位置

造成高度坍塌

子元素浮动父元素清除浮动

例：

<!DOCTYPE  html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		/*
		浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
		文档流:是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）
		脱离文档流：在页面中不占位置
		
		
		清除浮动
		1.给父级增加高度（不推荐使用）
		2.给父级加overflow:hidden;
		3.给父级加一个类
		.clearfix::after{
		content:"";
		display:block;
		clear:both;
		}
		浮动的特点
		如果只给前面的元素浮动，后面的要占据他的位置
		造成高度坍塌
		
		子元素浮动父元素清楚浮动
		*/
		div{
			width:300px;
			border:1pxsolidred;
			/*height:102px;*/
			/*overflow:hidden;*/
		}
		div div{
			width:100px;
			height:100px;
			float:left;
		}
		div.left{
			background:blue;
			/*float:left;*/
			/*float:right;*/
		}
		div.right{
			/*height:300px;*/
			/*width:200px;*/
			background:rebeccapurple;
		}
		.clearfix::after{
			content:"";
			display:block;
			clear:both;
		}
		
		li{
			list-style:none;
			width:15px;
			height:15px;
			background:skyblue;
			float:left;
			margin:5px;
			/*也有四个值代表四个角*/
			/*border-radius:2px4px6px8px;*/
			border-radius:50%;
		}
		</style>
</head>
<body>
	<div class="clearfix">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

运行结果：

1.无浮动样式（注释float:left;）	2.浮动样式

4.定位

1.什么是定位

定位就是将元素定在网页中的任意位置

2.为什么需要定位

因为有时候需要对某些元素进行定位

3.定位的好处

想定哪里，定哪里

position 定位
static 静态定位（没有定位），默认
relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置
absolute 绝对定位，没有占据位置，使元素完全脱离文档流
没有定位父级，则相对于整个文档发生偏移
参考最近非static定位的父级进行定位
fixed 固定定位，相对于浏览器窗口进行定位
方向词（方向词后面的数值，代表了距离该位置上下左右侧的距离）
left
right
top
bottom

margin-left
z-index 规定定位的层级（默认0）
值：number 值越大层级越高


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*
            position 定位
            static 静态定位（没有定位），默认
            relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置
            absolute 绝对定位，没有占据位置，使元素完全脱离文档流
                     没有定位父级，则相对于整个文档发生偏移
                     参考最近非static定位的父级进行定位
            fixed    固定定位，相对于浏览器窗口进行定位
            方向词
                left
                right
                top
                bottom

                margin-left
            z-index 规定定位的层级（默认0）
                值：number 值越大层级越高

         */
        .box{
            width: 200px;
            height: 200px;
            background: blue;
            /*position: relative;*/
            /*left: 60px;*/
            /*margin: auto;*/
            /*left: 100px;*/

            position: absolute;
            /*left: 100px;*/
            /*bottom: 50px;*/
            /*top: 100px;*/
            right: 50px;  /*绝对定位相当于窗口,距离窗口左侧50xp*/
            bottom: 20px; /*距离窗口下侧20xp*/
        }
        .wrap{
            width: 300px;
            height: 300px;
            background: rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>
</body>
</html>

运行结果：

4.1绝对与相对定位

相对位置不脱离文档流，占据元素位置

绝对位置脱离文档流，不占据元素位置

例：

例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		
		
		/*定位父级relative是最多的*/
		.box{
			width:200px;
			height:200px;
			background:blue;
			/*position:absolute;*/
			/*left:50px;*/
			/*margin:auto;*/
			/*left:20px;*/
			position:absolute;
			left:20px;
		}
		.wrap{
			width:300px;
			height:300px;
			background:rebeccapurple;
			margin:auto;
			position:relative;
		}
		.fix{
			width:400px;
			height:400px;
			background:red;
			margin:auto;
			position:relative;
		}
	</style>
</head>
<body>
	<div class="fix">
		<div class="wrap">
			<div class="box"></div>
		</div>
	</div>
</body>
</html>

运行结果：绝对定位按照非static定位父级定位

4.2固定与绝对定位

固定定位--脱离文档流，以窗口为参考，滑动后位置不变

绝对定位--无父级按照窗口定位，有父级按照父级定位

例：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.fix{
			width:100px;
			height:100px;
			background:blue;
			position:fixed;
			right:20px;
			bottom:50px;
		
		}
		.box{
			width:200px;
			height:200px;
			background:red;
			position:absolute;
			right:20px;
			bottom:50px;
		}
	</style>
</head>
<body style="height:2000px;width:1000px;">
	<div class="box"></div>
	<div class="fix"></div>
</body>
</html>

运行结果：

4.3补充定位z-index

例：

<!DOCTYPE  html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		
		ul li{
			list-style:none;
			width:100px;
			height:100px;
			position:absolute;
		}
		
		ul{
			position:relative;
		}
		.box1{
			background:red;
			/*z-index:1;*/
		}
		.box2{
			background:#51cfff;
			/*z-index:8;*/
		}
		.box3{
			background:#fa3bff;
		}
		.box4{
			background:rgb(2,4,8);
			/*z-index:-1;*/
		}


</style>
</head>
<body>
	<ul>
		<li class="box1"></li>
		<li class="box2"></li>
		<li class="box3"></li>
		<li class="box4"></li>
	</ul>
</body>
</html>

运行结果：

当没有开z-index时，都在同一层级，显示的为box4，黑色

我们当我们按照box4，3，1，2 依次打开层级，如下

5.例子：实现小米导航条(盒子理论与定位）

例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_922719_877rjxfl4vm.css">
    <style>

        *{   margin:0;
             padding: 0;

         }
        div.box{
            background-color: black;
            width: 1425px;
            padding:10px;
            padding-left: 100px;

        }

        a{
            text-decoration:none;
            color:lightgray;
        }
        a:hover{
            color: green;
            width: 200px;
        }
        p.box1{
            background-color: #555555;
            display: inline;
        }
       div .right{
           padding-right: 100px;
           float:right;
       }

       img{
           width: 55px;
           height: 55px;
       }

       .box2{
          background-color: white;
          width: 1415px;
          height: 60px;
          padding:20px;
           padding-left: 100px;
           float: right;

       }
       .box2 .box3{
           padding:20px;
           padding-left: 100px;
           float:right;
           padding-right: 200px;

       }

       span{
           margin-left: 10px;
           padding-top: 20px;
       }
       .box2 .box3 form{
           display: inline;
          float:right;
          padding-left: 100px;
          padding-bottom: -2px;

       }
       .box2 .box3 form input{
           width: 300px;
           height:40px;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="right">
            <a href="https://order.mi.com/site/login?redirectUrl=https://www.mi.com/index.html">登录</a> &nbsp
            <a href="https://account.xiaomi.com/pass/register">注册</a>&nbsp
            <a href="https://order.mi.com/message/list">消息通知</a>&nbsp
            <p class="box1">
                <a href="https://static.mi.com/cart/"><i class="iconfont icon-gouwuche" style="color: white"></i>&nbsp购物车(0)</a>
            </p>&nbsp
        </div>

        <div>

            <p>
                <a href="https://www.mi.com/index.html">小米商城</a> &nbsp
                <a href="https://www.miui.com/">MIUI</a>&nbsp
                <a href="https://iot.mi.com/index.html">loT</a>&nbsp
                <a href="https://i.mi.com/">云服务</a>&nbsp
                <a href="https://jr.mi.com/?from=micom">金融</a>&nbsp
                <a href="https://youpin.mi.com/">有品</a>&nbsp
                <a href="https://shuidi.mi.com/">小爱开放平台</a>&nbsp
                <a href="https://b.mi.com/?client_id=180100031058&masid=17409.0358">企业服务</a>&nbsp
                <a href="https://www.mi.com/appdownload/">下载App</a>&nbsp
                <a href="https://www.mi.com/index.html#J_modal-globalSites/">Select Region</a>&nbsp
            </p>
        </div>
    </div>

    <div class="box2">
        <a  href="https://www.mi.com/index.html"><img src="https://img-blog.csdnimg.cn/2022010614150062597.png"></a>
            <div class="box3">
                <span>小米手机</span>
                <span>红米</span>
                <span>电视</span>
                <span>笔记本</span>
                <span>空调</span>
                <span>新品</span>
                <span>路由器</span>
                <span>智能硬件</span>
                <span>服务</span>
                <span>社区</span>
                    <form action="" >
                        <input type="text" placeholder="小米8  小米MIX 2S">&nbsp<i class="iconfont icon-sousuo"style="color: #51cfff"></i>
                    </form>
            </div>

    </div>



</body>
</html>

运行结果：

6.例：实现在图片上的定位（切换图片为JS下章）

CSS文件代码



div div.relative{
    background: white;
    position:relative;
    left: 450px;
}

div div img{
    width: 600px;
    height:300px;
    background: azure;
    margin: auto;
    position: relative;
}

i.left{
    position:absolute;
    left:30px;
    font-size:50px;
    color: #51cfff;
    top: 130px;
}
i.right{
     position: absolute;
     right: -70px;
     font-size:50px;
     color:#51cfff;
     top: 130px;
}

.box :hover{
    color: darkgray;
    cursor:pointer;
}

li{
    list-style: none;
    width: 15px;
    height: 15px;
    background-color: cadetblue;
    border-radius: 50%;
    float: left;
    margin:5px;
 }
li:hover{
     background-color: darkgray;
     cursor:pointer;
}
ul{
     position:absolute;
    left:250px;
    bottom: 10px;
}

主文件代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css001.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_922719_cgm50spwdlc.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 500px ; height: 300px" >
        <div class="relative">
            <img  src="https://i1.mifile.cn/a4/xmad_15402884393036_KqnCH.jpg">
            <div class="box">
                <i class="iconfont icon-jiantouzuo  left " ></i>
                <i class="iconfont icon-jiantouyou re right " ></i>
                <ul class="box2">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

运行结果：

明玥几时有

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.CSS进阶 2021-02-17

四.CSS进阶1.盒子模型1.1盒子模型定义1.什么是盒子模型可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念2.盒子模型的组成盒子模型由内容，内边距，边框和外边距组成1.2盒模型之边框border:边框类型颜色;border:widthstylecolor;复合样式border-widthborder-stylesolid实线dashed虚线dotted点线double双边框border-color一个值的时候：代表四个方向值一样上右
复制链接

扫一扫