1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML 标签包含规范 规避脱标流 图片和文字垂直居中对齐

HTML 标签包含规范 规避脱标流 图片和文字垂直居中对齐

时间:2019-03-25 15:34:45

相关推荐

HTML  标签包含规范 规避脱标流 图片和文字垂直居中对齐

1 标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p,div等标签。

◆行内元素尽量包含行内元素,行内元素不要包含块元素。

2 规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

使得绿色盒子跑到右边

<style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right;}</style></head><body><div class="father"><div class="son"></div></div></body>

<style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right; }</style></head><body><div class="father"><div class="son"></div></div></body>

.son{width:100px;height:100px;background:green;margin-left:auto;}

设置盒子左外边距为auto,将盒子往右边冲

margin:0 auto ; 盒子左右边一直冲,居中

3 图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

4 Css可见性

visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。

<style type="text/css">.red{width: 300px;height: 300px;background:red;visibility:hidden;}.green{width: 300px;height: 300px;background:green;}</style></head><body><div class="red"></div><div class="green"></div></body>

display:none; 隐藏元素 隐藏之后不占据原来的位置

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。