web基础学习（三）CSS 盒子模型、浮动、定位

最新推荐文章于 2024-01-23 20:07:19 发布

June.1

最新推荐文章于 2024-01-23 20:07:19 发布

阅读量551

点赞数 2

分类专栏： web基础 web前端文章标签： css盒子浮动定位

本文链接：https://blog.csdn.net/qq_39043923/article/details/88889735

版权

web前端同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

web基础

15 篇文章 1 订阅

订阅专栏

盒子模型、浮动、定位是页面用处比较多的算是一个重点。

一、盒子模型：border、padding、margin

网页的盒子模型尺寸大小受各个版本的浏览器影响,在实际的开发过程中。在多个内核的浏览器下进行测试。以免项目上存在不兼容的问题。

border 、border-top 、 border-bottom 、border-left 、border-right
padding
margin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	 .two{
		/*边框宽度*/
		border-width: 5px;
		 /*边框风格 dashed:虚线 solid：实线 dotted：点状虚线 double：双实线*/
		border-style:  double;
		 /*边框颜色*/
		border-color: black;
		/*left right top bottom 方向的边框同样如下方式定义*/
		 /*上边框宽度*/
		border-top-width: 5px;
		 /*上边框风格 dashed:虚线 solid：实线 dotted：点状虚线 double：双实线*/
		border-top-style: solid;
		 /*上边框颜色*/
		border-top-color: black;

		 /* 第1个值：上下 , 第2个值：左右, 分类定义*/
		border-width: 5px 10px;
		border-style: dashed dotted;
		border-color: black blue;

		 /* 第1个值：上 ,第2个值：左右	,第3个值：下 ,分类定义*/
		border-width: 5px 10px 15px ;
		border-style: dashed dotted solid;
		border-color: black blue red;

		 /* 第1个值：上 , 第2个值：右 , 第3个值：下 , 第4个值：左 , 分类定义*/
		border-width: 5px 10px 15px 20px;
		border-style: dashed dotted solid double;
		border-color: black blue red green;

		 /*综合定义*/
		border: 1px solid black;
		 /*单方向分类定义*/
		border-top: 1px solid black;

		 /*上内边距距离*/
		padding-top: 10px;
		 /*所有方向内边距距离*/
		padding: 10px;
		 /* 第1个值：上下 , 第2个值：左右, 分类定义*/
		padding: 10px 20px;
		 /* 第1个值：上 ,第2个值：左右	,第3个值：下 ,分类定义*/
		padding: 10px 20px 30px;
		 /* 第1个值：上 , 第2个值：右 , 第3个值：下 , 第4个值：左 , 分类定义*/
		padding: 10px 20px 30px 40px;

		 /*上外边距距离*/
		margin-top: 10px;
		 /*所有方向外边距距离*/
		margin: 10px;
		 /* 第1个值：上下 , 第2个值：左右, 分类定义*/
		margin: 10px 20px;
		 /* 第1个值：上 ,第2个值：左右	,第3个值：下 ,分类定义*/
		margin: 10px 20px 30px;
		 /* 第1个值：上 , 第2个值：右 , 第3个值：下 , 第4个值：左 , 分类定义*/
		margin: 10px 20px 30px 40px;
	}

	.one{
		width: 200px;
		height: 200px;
		background-color: yellow;
		border: 10px solid black;
		padding: 10px;
		margin: 10px;

		/*box-sizing: content-box|border-box|inherit*/
		/*border-box :属性使用在内边距,当设置内边距时。
		本属性特点就是不会与元素宽度叠加以至于增大元素宽度。
		省去了计算盒子宽度的步骤*/
		box-sizing: border-box;
	}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

二、浮动:float

在页面定义三个块元素,对三个块元素做浮动处理让他们水平排列。为了避免下面的元素位置变化,需要对这几个元素做清除浮动。

<div class="one"></div>
<div class="two"></div>
<div class="three"></div
以下情况有三种方式可以清除浮动
1. .container 添加高度属性
2. 给浮动元素添加兄弟元素,然后定义css属性 clear: both;
3. 最后一种方式固定写法,在标签添加一个子标签并且包含,块标签,内容,清除浮动三个属性。跟第二种方式类似
```
.container::after{
   	display: block;
	clear: both;
	content: "";
}
```

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	.container{
		background-color: lightpink;
		/*1. 清除浮动盒子加高度*/
		/* height: 200px; */
	}
	/*3. 伪类元素清除,第三种方式清除浮动*/
	.container::after{
		display: block;
		clear: both;
		content: "";
	}
	.one,.two,.three{
		width: 200px;
		height: 200px;
	}
	.one{
		background-color: yellow;
		float: left;
		
	}
	.two{
		background-color: blue;
		float: left;
	}
	.three{
		background-color: red;
		float: left;
	}
	/*2.这里操作clear标签*/
	.clear{
		clear: both;
	}
	.nav{
		height: 100px;
		background-color: green;
	}
	</style>
</head>
<body>
<div class="container">
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<!--2.给浮动元素添加兄弟标签并且,定义class为clear。css中操作.clear{clear: both;}-->
	<!--<div class="clear"></div>-->
</div>

<div class="nav">

</div>
</body>
</html>

三、定位:position

position 属性 子绝父相 布局个人感觉最实用的方式

值	描述
absolute	相对于 `static 定位以外的第一个父元素`进行定位。`元素脱离标准文档流`,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，`相对于浏览器窗口进行定位`。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	不脱离标准文档流, `相对于其正常位置（自身）进行定位`。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one, .two, .three {
            width: 800px;
            height: 200px;
            margin: 0 auto;
        }

        .one {
            background-color: yellow;
            position: absolute;
            left: 100px;
            top: 50px;
            z-index: 1;
        }

        .box {
            width: 100%;
            height: 1500px;
            background-color: lightpink;
            /*父级相对定位*/
            position: relative;
        }

        .two {
            background-color: blue;
            /*子级绝对定位*/
            position: absolute;
            left: 200px;
            top: 500px;
            z-index: 2;
        }

        .three {
            background-color: rgba(255, 0, 0, 0.5);
            position: absolute;
            left: 300px;
            top: 150px;
            z-index: 3;
            /* opacity: 0.5;
            filter: alpha(opacity:50); */
        }

        .music {
            width: 100px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="one">

</div>
<div class="three">
    <h1>这是一个DIV标签</h1>
</div>
<div class="music">

</div>
<!--这种方式子绝父相-->
<div class="box">
    <div class="two">
    </div>
</div>
</body>
</html>

以下是示例效果

June.1

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web基础学习（三）CSS 盒子模型、浮动、定位

盒子模型、浮动、定位是页面用处比较多的算是一个重点。上一节：HTML、CSS—下一节一、盒子模型：border、padding、margin网页的盒子模型尺寸大小受各个版本的浏览器影响,在实际的开发过程中。在多个内核的浏览器下进行测试。以免项目上存在不兼容的问题。 border 、border-top 、 border-bottom 、border-left 、bord...
复制链接

扫一扫

专栏目录