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

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

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


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

如图





我是中心

第三个中心
这是中心

【HTML/CSS】text-align的center属性值以及float总结_第1张图片

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

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

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


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





我要float

【HTML/CSS】text-align的center属性值以及float总结_第2张图片

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


float

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


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


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



第一部分代码:





我在div1里面


【HTML/CSS】text-align的center属性值以及float总结_第3张图片

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

【HTML/CSS】text-align的center属性值以及float总结_第4张图片

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

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

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

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



第二部分代码:





我在float里面

【HTML/CSS】text-align的center属性值以及float总结_第5张图片
简单说明:红色为div1,黑色为div2,绿色为div3

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


第三部分代码:





【HTML/CSS】text-align的center属性值以及float总结_第6张图片

简单说明:红色为div2,黑色为div1


将div1的display改为block为:


【HTML/CSS】text-align的center属性值以及float总结_第7张图片




你可能感兴趣的:(HTML/CSS)