前端学习（初识CSS 中）——盒模型、浮动、定位

最新推荐文章于 2021-08-10 19:58:22 发布
最新推荐文章于 2021-08-10 19:58:22 发布
阅读量2.8k 收藏 42
点赞数 14
分类专栏： css基础知识 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43866830/article/details/114827604
版权

前端学习之初识CSS

一、CSS盒模型

1.盒模型的概念

盒模型由四个部分组成：
内容（content）、填充（padding）、边框（border）、外边距（margin）。
盒模型示例图：
在这里插入图片描述
padding、border和margin都有四个方向，分别是上（top）、下（bottom）、左（left）、右（right）。

（1）内容（content）

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

这里设置的就是content的宽高：
在这里插入图片描述
在这里插入图片描述
内容区域称为content-box

（2）填充（padding）

填充的区域：边框到内容之间的距离。
padding可以设置四个方向的值：
上内边距：padding-top；
右内边距：padding-right；
下内边距：padding-bottom；
左内边距：padding-left。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
			padding-top: 20px; /*设置上内边距*/
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述
如果只设置padding，如：padding: 20px;则是设置四个方向都为20px，若只设置三个值，则是按照上右下的顺序设置，左内边距默认和右边一致，如设置padding: 20px 30px 10px;则上内边距为20px，下内边距为10px，左右内边距都为30px，设置两个值的话则是设置的上右内边距，下左内边距与上右内边距一致。
padding区域加上content区域称为padding-box。

（3）边框（border）

宽度：border-width；
样式：border-style；
颜色：border-color。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
			padding: 20px 30px;
			border-width: 10px;
			border-style: solid;
			/*直线的样式，也有其他的不同显示样式*/
			border-color: yellow;
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
border的三个属性都有对应的上右下左的设置，语法是border-left-width:10px;等等，border也有简写的方式，如：border: 10px solid green;
也可以设置border-top等等。
边框区域加填充区域加内容区域称为border-box。

（4）外边距（margin）

margin就是盒子和盒子的间距。
margin也有对应的四个方向的设置，分别是：
上外边距：margin-top：
右外边距：margin-right;
下外边距：margin-bottom;
左外边距：margin-left;
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
			padding: 20px 30px;
			border-width: 10px;
			border-style: solid;
			border-color: yellow;
			margin: 20px 30px 10px;
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述
margin的简写和padding是一样的，这里就不再说明了。
margin也有和padding不一样的地方，margin可以写作：
margin: 0 auto;可以让整个div进行水平居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
			padding: 20px 30px;
			border-width: 10px;
			border-style: solid;
			border-color: yellow;
			margin: 0 auto;
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

结果：
在这里插入图片描述

2.标准盒模型和IE盒模型

标准盒模型

符合W3C。
当在网页头部写了<!Doctype html> 声明后，无论是哪种内核的浏览器，盒模型都会被解释为标准盒模型。
元素总宽度 = 内容宽度 + padding（左右） + border（左右） + margin（左右）；
元素总高度 = 内容高度 + padding（上下） + border（上下） + margin（上下）；

IE盒模型

当我们没有写声明，或者是声明丢失的时候，部分IE内核的浏览器，会触发怪异的盒模型。
元素总宽度 = 内容宽度 + margin（左右）；
元素总高度 = 内容高度 + margin（上下）；
注：content部分包含了padding和border。
在CSS3中有一个属性box-sizing可以完成标准和IE盒模型的切换。
标准盒模型的box-sizing属性值是content-box，而IE盒模型的box-sizing属性是border-box。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
			padding: 20px 30px;
			border-width: 10px;
			border-style: solid;
			border-color: yellow;
			margin: 0 auto;
			box-sizing: border-box;/*设置为IE盒模型*/
		}
	</style>
	<body>
		<div>盒模型</div>
	</body>
</html>

这里的话，content的宽度是100px，从图中可以看出，这个100包括了内容和padding、border：
在这里插入图片描述
在这里插入图片描述

二、CSS列表

在html中有讲到有序列表和无序列表，他们都有各自的默认属性，但是在日常开发中都是使用CSS来控制样式。
CSS中的列表样式：
list-style-type：设置列表项标记的类型。
list-style-image：将图像设置为列表项标记。
list-style-position：设置列表中列表项标记的位置。
list-style：简写样式。

1.list-style-type

用来设置列表项标记的类型。
无序列表：
disc：实心圆，默认值。
circle：空心圆。
square：实心方块。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.style1{
			list-style-type: disc;
		}
		.style2{
			list-style-type: circle;
		}
		.style3{
			list-style-type: square;
		}
	</style>
	<body>
		<ul class="style1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul class="style2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul class="style3">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

结果：
在这里插入图片描述
有序列表
decimal：（阿拉伯数字，默认值）
lower-roman：（小写罗马数字，形如：i）
upper-roman：（大写罗马数字，形如：I）
lower-alpha：（小写英文，形如：a）
upper-alpha：（大写英文，形如：A）
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.style1{
			list-style-type: decimal;
		}
		.style2{
			list-style-type: lower-roman;
		}
		.style3{
			list-style-type: upper-roman;
		}
		.style4{
			list-style-type: lower-alpha;
		}
		.style5{
			list-style-type: upper-alpha;
		}
	</style>
	<body>
		<ol class="style1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<ol class="style2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<ol class="style3">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<ol class="style4">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<ol class="style5">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
	</body>
</html>

在这里插入图片描述

2.list-style-image

用来将图像设置为列表项标记。
语法：
list-style-image:url();
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.image1{
			list-style-image: url(../img/csdn.png);
		}
	</style>
	<body>
		<ul class="image1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

结果：
在这里插入图片描述
这里由于图片大小的问题，导致了显示上有些奇怪，这个属性设置的就是每一项的标识符。

3.list-style-position

用来设置列表中列表项标记的位置。
常用属性：
outside：保持标记位于文本左侧。列表项目标记放置在文本外，且环绕文本不根据标记对齐。
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul{
			list-style-type: circle;
			list-style-position: inside;
		}
		ol{
			list-style-type: lower-alpha;
			list-style-position: outside;
		}
	</style>
	<body>
		<ul>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
		</ul>
		<ol>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
		</ol>
	</body>
</html>

结果：
在这里插入图片描述
由此可以看出，inside是将标记也包含在文字内，而outside是将标记单独列出。

4.list-style

list-style可以实现上述三个属性的简写，具体语法如下：

list-style: type position image;

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul{
			list-style:circle inside url(../img/csdn.png);
		}
	</style>
	<body>
		<ul>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
			<li>这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</li>
		</ul>
	</body>
</html>

结果：
在这里插入图片描述
由此也可以看出，图片的权重比设置成circle更高。

三、CSS浮动

1.标准文档流

元素在排版布局过程中，自动自上而下分成一行一行，并在每行中按照从左到右的顺序流式排列。
块级元素和行级元素的排版方式就构成了文档流。

2.CSS浮动的用法

CSS浮动会使元素脱离文档流，并且向左或向右移动。
浮动是使用float实现的，float的值有：
none：默认不浮动；
left：左浮动；
right：右浮动。
示例：
未添加浮动时：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul{
			list-style-type: none;
		}
		ul li{
			width: 100px;
			height: 100px;
			border: 1px solid blue;
		}
	</style>
	<body>
		<ul>
			<li>浮动演示</li>
			<li>浮动演示</li>
			<li>浮动演示</li>
		</ul>
	</body>
</html>

自上而下排列：
在这里插入图片描述
添加左浮动：

ul li{
	width: 100px;
	height: 100px;
	border: 1px solid blue;
	float: left;
}

自左而右：
在这里插入图片描述
添加右浮动：

ul li{
	width: 100px;
	height: 100px;
	border: 1px solid blue;
	float: right;
}

浮动在右侧并自右向左显示：
在这里插入图片描述
一个浮动元素会尽量向左或向右移动，直到他的边缘碰到包含框或者另一个浮动框的边框为止。
浮动元素之前的元素不会受到影响，之后的元素会围绕他。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul{
			list-style-type: none;
		}
		ul li{
			width: 100px;
			height: 100px;
			border: 1px solid blue;
			float: left;
		}
	</style>
	<body>
		<ul>
			<li>浮动演示1</li>
			<li>浮动演示2</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
		</ul>
		<p>浮动演示浮动演示浮动演示浮动演示浮动演示浮动演示浮动演示浮动演示</p>
	</body>
</html>

结果：
在这里插入图片描述
这个就是“高度塌陷”的问题，浮动的元素脱离了文档流，使得子元素的高度无法撑起父元素的高度。这里给他设置了一个border，很明显地看到，border的高度是0：
在这里插入图片描述
如何解决：
清除浮动：在浮动元素后面添加一个带clear的空元素。如：

.clearfix{
	clear: both;
}

<ul>
			<li>浮动演示1</li>
			<li>浮动演示2</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
			<li>浮动演示3</li>
			<div class="clearfix"></div>
		</ul>

结果：
在这里插入图片描述
但是像上述的这个方法并不规范，更为规范的是使用伪元素选择器。

ul::after{
	content: '';
	display: block;
	height: 0;
	clear: both;
}

结果：
在这里插入图片描述
除了通过伪元素清除浮动外，我们还可以通过父元素添加overflow属性来清除浮动。如：

ul{
	list-style-type: none;
	border: 2px solid red;
	overflow:hidden;/*超出隐藏，若文字超过区域，会进行隐藏*/
}

结果：
在这里插入图片描述

四、CSS定位

1.position

静态定位：static（默认）。
相对定位：relative。
绝对定位：absolute。
固定定位：fixed。

relative

元素相对原来的位置进行了偏移；
元素没有脱离文档流。
因为relative需要相对原来的位置进行偏移，所以需要设置偏移量，而偏移量的设置就要通过以下几个属性来：
top、right、bottom、left。
单位是px或%。百分比的计算是参照父元素的。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
			position: static;
		}
		.position1{
			background-color: red;
		}
		.position2{
			background-color: pink;
			position: relative;/*相对定位*/
			top: 50px;
			left: 50px;
		}
		.position3{
			background-color: yellow;
		}
		.position4{
			background-color: aqua;
		}
	</style>
	<body>
		<div class="position1"></div>
		<div class="position2"></div>
		<div class="position3"></div>
		<div class="position4"></div>
	</body>
</html>

结果：
在这里插入图片描述
设置成%为单位的话：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
			position: static;
		}
		.position1{
			background-color: red;
		}
		.position2{
			background-color: pink;
			position: relative;
			top: 50px;
			left: 50px;
		}
		.position3{
			background-color: yellow;
		}
		.position4{
			background-color: aqua;
		}
		.position5{
			width: 50px;
			height: 50px;
			background-color: red;
			left: 50%;
			top: 50%;
			position: relative;
		}
	</style>
	<body>
		<div class="position1"></div>
		<div class="position2">
			<div class="position5"></div>
		</div>
		<div class="position3"></div>
		<div class="position4"></div>
	</body>
</html>

结果可以看出是以父元素为基准进行偏移：
在这里插入图片描述

absolute

元素相对第一个带有定位属性的祖先元素（即有设置position属性，且不能为static）进行偏移。
如果祖先元素都不是定位元素，那么相对整个网页进行偏移。
使用绝对定位的话，元素会脱离文档流。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
			position: static;
		}
		.position1{
			background-color: red;
			position: relative;
		}
		.position2{
			background-color: pink;
			position: absolute;
			top: 50px;
			left: 50px;
		}
		.position3{
			background-color: yellow;
		}
		.position4{
			background-color: aqua;
		}
	</style>
	<body>
		<div class="position1"></div>
		<div class="position2"></div>
		<div class="position3"></div>
		<div class="position4"></div>
	</body>
</html>

相对网页进行了偏移：
在这里插入图片描述
相对于距离最近的祖先元素进行偏移：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
			position: static;
		}
		.position1{
			background-color: red;
		}
		.position2{
			background-color: pink;
			position: absolute;
			top: 50px;
			left: 50px;
		}
		.position5{
			background-color: red;
			position: absolute;
			top: 50px;
			width: 200px;
			height: 80px;
		}
		.position6{
			background-color: black;
			position: absolute;
			top: 20px;
			width: 50px;
			height: 50px;
		}
	</style>
	<body>
		<div class="position1"></div>
		<div class="position2">
			<div class="position5">
				<div class="position6"></div>
			</div>
		</div>
	</body>
</html>

这里距离position6最近的祖先元素时position5，所以相对position5发生了偏移：
在这里插入图片描述

fixed

元素相对浏览器的可视窗口进行偏移，不随着滚动条的滚动而滚动。
元素脱离文档流。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
			position: static;
		}
		.position1{
			background-color: red;
		}
		.position2{
			background-color: pink;
			position: absolute;
			top: 50px;
			left: 50px;
		}
		.position5{
			background-color: red;
			position: absolute;
			top: 50px;
			width: 200px;
			height: 80px;
		}
		.position6{
			background-color: black;
			position: absolute;
			top: 20px;
			width: 50px;
			height: 50px;
		}
		.position3{
			background-color: aqua;
			top: 50px;
			left: 50px;
			position: fixed;
		}
	</style>
	<body>
		<div class="position1"></div>
		<div class="position2">
			<div class="position5">
				<div class="position6"></div>
			</div>
		</div>
		<div class="position3"></div>
	</body>
</html>

结果：
在这里插入图片描述
类似于tb等的侧边导航栏就可以这样实现。
定位总结：

定位方式取值相对的元素是否在文档流中
相对定位relative元素本身的位置在文档流中
绝对定位absolute元素相对第一个带有定位属性的祖先元素进行偏移，如果没有定位属性的祖先元素，就相对整个网页进行偏移脱离文档流
固定定位fixed浏览器的可视窗口脱离文档流

这一部分到这里就结束啦，有不足的地方还望大家指正啦，蟹蟹！
在这里插入图片描述

这名没人用吧
关注
  • 14
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 20
    评论
专栏目录
初识前端，学习html+css.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
html div怎么向右偏移,div向右偏移设置 css让div靠右移一定距离
weixin_39822993的博客
06-11 8410
转自：https://www.thinkcss.com/shili/1372.shtmldiv对象盒子向右偏移设置，使用css让div靠右一定距离-div向右移教程实例篇div向右偏移一定距离，可采用margin外边距实现、也可以使用padding来实现，这就要看不同情况下如何灵活选择了。这里thinkcss为大家介绍各种css布局div向右移方法。 两个盒子前者是蓝色的div，后者是红色的div...
CSS定位六：绝对定位和浮动的区别
小枯林的博客
12-26 2008
疑问：前面发现，绝对定位可以使div脱离标准文档流，产生浮动的效果；而以前接触的浮动（float）也可以让div脱离标准文档流，产生浮动的效果； 这二者都可以让div脱离文档流，产生浮动效果，那么这二者的区别是？实际中到底用哪个？ 绝对定位和浮动的区别 相同点：都会破坏文档流，都会产生浮动； 不同点：浮动时：文档流的其他内容不会忽略浮动的位置，其他内容会绕开； 绝对定位时：文档...
day05 css 浮动与定位
java_yangXL的博客
08-09 553
盒子模型 、盒子模型 其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 首先，我们来看一张图，来体会下什么是盒子模型。 所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（
解析什么是绝对定位，相对定位与浮动
weixin_34174422的博客
10-13 248
在理解定位之前，先说一个概念，文档普通流，就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。 绝对定位 绝对定位：absolute，元素相对于离它最近的已定位祖先元素进行移动，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（一般是HTML元素，也可能是画布，这是由用户的代理决定的）。注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素...
关于css文件中padding属性各参数的顺序设置规则
小行星住户的博客
03-03 2万+
这里是一个前端学习新手的学习记录，希望能帮到各位小伙伴们 css中的padding属性在建设一个网站的页面时是非常重要的，它会直接和你整个页面的效果挂钩。padding主要用来设置对象的*四个边的边距*是多少，很多初学者在这里会有疑惑，有时候padding里面有两个参数，有时有三个参数，会疑惑到底代表什么意思。这里给出解答： padding有两种设置方式： 1.单独设置各边框边距: padding-top 上内边距的宽度 padding-left ..
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
机器学习之初识KNN算法——针对泰坦尼克号生存记录建模的两种方法
01-20
本篇博客基于《机器学习实战》实现 算法原理简要概括，重在代码实现 k-近邻算法(kNN)的工作原理是：存在一个样本数据集合，称训练样本集，并且样本集中每个数据都存在标签，即样本集中每一数据与所属分类的对应关系...
初识Spring——Spring核心容器
02-24
而控制反转就是把传统程序中需要实现对象的创建、代码的依赖，反转给一个专门的"第三方"即容器来实现，即将创建和查找依赖对象的控制权交给容器，由容器将对象进行组合注入，实现对象与对象的松耦合，便于功能的复用...
如何让div靠右_div向右偏移设置 css让div靠右移一定距离
weixin_39531378的博客
12-20 7780
转自：https://www.thinkcss.com/shili/1372.shtmldiv对象盒子向右偏移设置，使用css让div靠右一定距离-div向右移教程实例篇div向右偏移一定距离，可采用margin外边距实现、也可以使用padding来实现，这就要看不同情况下如何灵活选择了。这里thinkcss为大家介绍各种css布局div向右移方法。两个盒子前者是蓝色的div，后者是红色的div,...
CSS总结(二)：盒模型、浮动与定位
Lee hua
05-29 961
一：盒模型二：浮动三：定位
div向右偏移设置 css让div靠右移一定距离
热门推荐
weixin_34258838的博客
03-29 2万+
转自：https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置，使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离，可采用margin外边距实现、也可以使用padding来实现，这就要看不同情况下如何灵活选择了。这里thinkcss为大家介绍各种css布局div向右移方法。 两个盒子前者是蓝色的div，后者是红色的...
HTML5盒模型、浮动和定位
qq_44240254的博客
03-03 1640
在此之前我们先了解一下块级元素和行内元素的区别 一、块级元素 1、总是从新的一行开始 2、高度、宽度都是可控的 3、宽度没有设置时，默认为100% 4、块级元素中可以包含块级元素和行内元素 二、行内元素 1、和其他元素都在一行 2、高度、宽度以及内边距都是不可控的 3、宽高就是内容的高度，不可以改变 4、行内元素只能行内元素，不能包含块级元素 三、盒模型 1、盒模型简单示意图 边框border： ...
CSS盒子模型、浮动、定位
qq_42227428的博客
06-01 3709
一、盒子模型1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背...
自主学习Html+CSS第五天_CSS浮动
08-16 282
文章目录CSS浮动一.盒子模型1.外边距（margin）2.外边距实现盒子居中3.文字盒子居中图片和背景区别4.清除元素的默认内外边距5.外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并6.content宽度和高度7.盒子模型布局稳定性8.盒子阴影二.浮动(float)1.普通流(normal flow)2.浮动(float)3.什么是浮动？4.浮动详细内幕特性三.版心和布局流程1.布局流程2.一列固定宽度且居中3.两列左窄右宽型4.通栏平均分布型 CSS浮动 一.盒子模型 1.外边距（mar
CSS:3大重点知识点盒子模型、浮动、定位
阿甘正传
09-09 626
前言 作为一名初级的前端开发人员，怎么确定是否真正掌握了Css的技术呢？ CSS的3大知识点： 盒子模型、浮动、定位。 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 CSS盒模型和IE盒模型的区别： 在 标准盒子模型中，wid...
css中的盒子模型与一些改知
m0_59345279的博客
08-10 135
w3c盒子（默认盒子）： 盒子中的重点了解： margin（外边距）：表示盒子的border距外部边的距离同是元素之间的间隔距离 水平方向上此间隔距离会相累加，垂直方向上会使间隔相叠（减距）。 margin：0 auto 水平方向上居中 padding（内边距）：表示盒子内层与border的距离具有四个方向（上右下左） border（边框）：是盒子的边框可用css修饰 IE盒子：其与w3c盒子的区别为其内容区的值不同，w3c盒子的内容区与盒子大小相同， 但IE盒子的内容区为盒子大小减去边框.
CSS布局：浮动与绝对定位的异同点
cherry_vicent的专栏
12-14 4443
浮动 ( float ) 和绝对定位 ( position:absolute ) 相同点：（1）都是漂起来( 离开原来的位置 ) （2）并且都不占着原来的位置 不同点：float后，它后面的对象，
spark学习之路——1.初识spark
最新发布
06-28
Spark是一种大数据处理的框架，它可以处理...在学习Spark的过程中，需要掌握Spark的核心组件和API，例如Spark Core、Spark SQL、Spark Streaming等。此外，还需要学习Spark的部署和调优，以及与其他大数据技术的集成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这名没人用吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值