【HTML/CSS】text-align的center属性值以及float总结

最新推荐文章于 2024-08-21 16:13:13 发布

happy@tony

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量7.6k

点赞数 2

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/zerountao/article/details/37735643

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对于text-align的center属性有如下特点：

1、将text-align的center应用在一个容器上，它只是针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器不会居中

2、text-align具有向下传递性，会不断向子元素传递

如图

<style>
.div1{
	text-align:center;
	width:100%;
	height:200px;
	background:#9F0;
	
}


.div2{
	display:block;
	width:200px;
	height:50px;
	background:#00F;
}
span{
	display:inline-block;
	height:100px;
	background:#0F0;	
}

h1{
	display:inline;
	background:#F00;
}
</style>


<body>
<div class="div1">
<h1>我是中心</h1>
<div><div class="div2">第三个中心</div></div>
<span>这是中心</span>
</div>
</body>

蓝色和红色对比说明center可作用于display为inline的元素，但不能作用于display为block的元素

蓝色与绿色对比说明center可作用于display为inline-block的元素，但不能作用于display为block的元素

蓝色与蓝色里面的文字对比说明center可作用于文字，并且具有向子容器传递的特点

2、float只作用于容器本身，不作用于里面的元素，不具有传递性

<style>
.div1{
	width:100%;
	height:200px;
	background:#CF0;
	float:right;
}

.div2{
	width:100px;
	height:100px;
	float:right;
	background:#0F0;
}

.div3{
	width:100px;
	height:100px;
	background:#F00;
}

</style>


<body>
<div class="div1">
我要float
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>

文字和红色与绿色对比说明float可作用于容器本身，但不能作用于容器里面的内容，也不能传递

float

float元素不能撑大父容器以及父容器之上的各层容器的高度，但是float元素里面有高度的元素可以撑大float元素的高度，而且float元素中有高度的相邻元素也可以撑大float元素父容器的高度

即使float元素里面的元素有高度，float元素后面的元素仍然会忽略float元素以及里面元素的位置而决定自己的位置，但是如果float元素后面的元素position为static则float元素的后面元素会处于float以及里面元素之下，否则反之

如果float元素前面有相邻元素，float元素会忽略display为inline和inline-block的元素而位于他们之前且同行，但是不能位于display为block的元素之前且不同行

第一部分代码：

<style>
.div1{
	background:#000;
	width:200px;	
}


.div2{
	width:100px;
	background-color:#0F0;
	float:left;
}

.div3{
	width:200px;
	height:100px;
	background-color:#009;
}

p{
        background-color:#F00;
}

</style>


<body>
<div class="div1">
<div class="div2">
<p>我在div1里面</p>
</div>
</div>
<div class="div3"></div>
</body>

将div3的postion设置为relative或者absolute后为

简单说明：未显示出来的黑色为div1，绿色为div2，红色为p，蓝色为div3

未显示的黑色和绿色对比说明float元素不能撑大父容器的高度

绿色与红色对比说明float元素可以被float元素里面的元素撑大高度

蓝色和绿色对比说明float元素后面的元素会忽略float元素以及里面元素的位置而决定自己的位置，但是float元素后面的position为static的元素会处于float元素以及里面元素之下

第二部分代码：

<style>
.div1{
	width:200px;
	background:#F00;
}


.div2{
	width:150px;
	height:50px;
	display:inline-block;
	background:#000;
}

.div3{
	width:100px;
	background-color:#0F0;
	float:left;

}
</style>


<body>
<div class="div1">
<div class="div2"></div>
<div class="div3">
<p>我在float里面</p>
</div>
</div>

</body>

简单说明：红色为div1，黑色为div2，绿色为div3

绿色与黑色对比说明float元素不能撑大父容器高度，但是float元素中有高度的兄弟元素可以撑大父容器高度

第三部分代码：

<style>
.div1{
	width:100px;
	height:100px;
	background-color:#000;
	display:inline-block;
}

.div2{
	width:100px;
	height:100px;
	background-color:#F00;
	float:left;
}
</style>

<body>
<div class="div1"></div>
<div class="div2"></div>
</body>