<!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>
css 层级 脱标流 可见性
最新推荐文章于 2024-07-10 13:25:16 发布