css 层级脱标流可见性

来源：互联网发布：索尼网络经销商编辑：程序博客网时间：2024/06/07 06:09
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*  * 脱标的盒子居中显示（重点） * 1 首先走父盒子宽度一半 * 2 使用margin-left设置往回走子元素自己宽度的一半 * position: absolute; *left: 50%; * margin-left: -250px; * Z-index(层级) * 1 元素与元素之间的层级关系 * 2 在css2中，只有定位的元素才有z-index * 3 默认情况下，定位的元素z-index的值auto (0) * Z-index可以取正数还可以取负数。  * 特点: * 1 如果两个元素都设置了定位，那么后面定位的元素会覆盖前面定位的元素（后来居上） * 2 如果想让一个盒子压另一个盒子，可以设置z-index值。 * 3 如果元素的父元素设置了z-index值，那么程序会以父元素的z-index值为准 *  * CSS标签包含规范 * 1 段落标签不能包含div * 2 段落标签不能包含标题标签 * 3 段落标签不能包含列表 * 注意： * 1 行内元素最好不要包含其他元素（行内元素包含块级元素） * 2 行内元素可以包含行内元素 *  * 规避脱标流： * 1 要实现元素的模式转换（display） * 2 如果想让一个元素在最右侧显示 * 3 margin-left: auto；让元素左侧自适应（让元素左侧自动填满） * 4 网页布局： * 优先   标准流 * 其次   浮动 * 最后定位 *  * img/img4垂直对齐 * vertical-align: baseline 只对img/img4和表格起作用 * vertical-align: middle;  垂直居中对齐 *  * css可见性 * overflow：hidden；  超出的部分隐藏   * visibility：hidden； 元素隐藏  该属性隐藏元素后，元素占位置 * display：none: ;元素隐藏 隐藏元素不占位置 * display: block;     显示元素 *  * Logo优化内容移除 * text-indent：-20em； *  * */#div{width: 500px;height: 500px;background-color: green;/*overflow: hidden;*//*visibility: hidden;*//*display:none;display: block;   *//*vertical-align: middle;*/vertical-align: middle;margin-left: auto;}P{/*visibility: hidden;*/}#div1{width: 200px;height: 200px;background-color: red;}.f{vertical-align: middle;}</style></head><body><div id="div"><img class="f" src="img/img2/1.jpg"  width="100" height="100px"/><img class="f" src="img/img2/1.jpg"  width="100" height="100px"/><img class="f" src="img/img2/1.jpg"  width="100" height="100px"/></div><!--<div id="div1"></div>--></body></html>
0 0
css 层级 脱标流 可见性

css 层级脱标流可见性
