HTML5（四）

最新推荐文章于 2023-07-18 17:57:55 发布

疯狂小王子

最新推荐文章于 2023-07-18 17:57:55 发布

阅读量782

点赞数

分类专栏： java 文章标签： java html5 前端开发淘宝网 html

本文链接：https://blog.csdn.net/yelang0111/article/details/76037419

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接着昨天的讲，这两天比较忙没有每天都写，但是我会一点不漏的都补上的

因为我的博客不是每次只写一个功能模块可能也会把写代码中的一些注意的问题写出来，

1.今天要讲的内容是容器，还有容器需要注意的问题，做前端开发或是自己写一些页面的时候用div应该说是比较多的，div的定位，浮动自然也很重要，当你做一个购物网站，比如淘宝京东就很多的用到浮动定位，

2，容器就以div来说，容器分为：行级容器和列级容器，这个容器就是div接下我就之间说div了。

3，想让两个div放在一行，我们就用到了div的属性下面看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline-block;
			}
			
			#didv2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="div1">怎么能在一行上</div>
		<div id="didv2">这个两个盒子</div>
	</body>
</html>

上面这个段代码是用了把两个div变成行内快元素，下面我们用浮动float也能实现同样的效果，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*display: inline-block;*/
				float: left;
			}
			
			#didv2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*display: inline-block;*/
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div1">怎么能在一行上</div>
		<div id="didv2">这个两个盒子</div>
	</body>
</html>

仔细看就是把display该成了float，float有好几个取值，还有一个right顾名思义是右浮动，其他的自己感兴趣可以自己查，样式里用到一个属性display这个属性也很重要具体用法：

常用的display属性值：

none此元素不会被显示并且不占用空间；

block此元素显示为块级元素，此元素前后会带有换行符；

inline默认，此元素会被显示为内联元素，元素前后没有换行符；

inline-block行内块元素，前后无换行符；
inherit规定应该从父类元素继承display属性的

4.容器：

容器的属性有margin(容器与容器的之间的距离)，padding(内容与容器的距离)

容器也可以成为盒子，还有border(盒子边的宽度)内容也也有自己宽度和高度width和height.

盒子的宽：margin+border+padding+width(注意border加一个还是两个要看自己怎么设置的，因为有的时候就设置了左右的一条边)

盒子的高度：margin+horder+padding+height(border的值和上面一样要看自己上边和下边怎么设置的)

*注意：两个盒子的之间的距离是相邻的2个margin的值

两个盒子上下距离是相邻的2个margin的最大值，例如：margin-top：10px；margin-bottom：20px结果就是两个盒子上下距离是20px取最大的一个距离。

5.盒子定位positon这个很重要。接下来就重点讲这个属性对盒子也就是容器也是div的影响.

首先position能取到四个值：staic 和relative,absolute,fixed.

static是默认值，如果值是static它会忽略top bottom，left，right的影响

relative 设置成这个值可以正常移动位置，对其用left等控制

absolute这个就不一样了，这个属性可定位于相对包含它的元素的指定坐标进行定位，可以通过top bottom，left，right定位，

6，现在单独讲float这个属性，这个属性同样很重，虽然它不是标签，在html里有好多属性是很重要的它甚至有时候比标签都重要的，例如：

white-span 不换行，overflow超出隐藏，text-overflow超出就用省略号代替，

letter-spacing这个属性是字之间的间距，

text-indent：2em，是首行缩进两个字的大小，单位一般就em

（em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多）

（px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的国内推荐；）

pt也是单位名称位点，现在一般不用就不说了，

说了好多了现在开始float，float是浮动，讲一下什么是浮动，比如你排队去买饭，在你前面的人走了你会不会自动顶上去，所以说如果两个div同时浮动他们就能在一行上，还是像你买饭，同时两个窗口可以打饭，一次上前两个人那你们是不是并排站一起了。

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

不知道你看新闻的时候有没有注意一个图片周围有文字围着，这个效果就是浮动做出来的，下面模拟一下：

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它围着它
</p>
</body>