CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）

来源：互联网发布：智能机器人软件编辑：程序博客网时间：2024/05/29 15:53

CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>/* 标签包含规范 *◆div可以包含所有的标签。 *◆p标签不能包含div h1等标签。 *◆h1可以包含p，div等标签 。 *◆行内元素尽量包含行内元素，行内元素不要包含块元素。 *//* 规避脱标流 *◆尽量使用标准流。 *◆标准流解决不了的使用浮动。 *◆浮动解决不了的使用定位。 */.box {height: 200px;width: 800px;margin: 0 auto;background: #808080;position: relative;}.box1 {height: 30px;width: 380px;background: #AFEEEE;position: absolute;bottom: 0px;/*浮动盒子居中显示 * ★:margin:0 auto;  只能让标准流的盒子居中对齐。 * ★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。) * left: 50%; * margin-left: -190px; */left: 50%;margin-left: -190px;}img {/*图片和文字垂直居中对齐 * * vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline; * * */vertical-align: middle;}</style></head><body><div class="box"><div class="box1"></div></div><div><img src="../../img/1.png" />aaaaaaa</div></body></html>

阅读全文

0 0