2019-04-06 关于背景、元素分类、显示消失练习、浮动、父
2019-04-06 本文已影响0人
北街九条狗
关于背景
背景
背景图片默认是x,y轴重复平铺
位置可以写像素，也可以写固定的英文表示确切的位置
top bottom center
left right center
是否重复平铺
no-repeat不重复
repeat-x x轴平铺
repeat-y y轴平铺
background-image: 背景图片;
background-color: 颜色;
background-position: 位置;
background-repeat: 是否重复;
元素分类
/* 显示器 */
display: block;
块元素 block
内联元素 inline
内联块 inline-block /*display: inline-block;*/
display:none; 从文档流中消失
文档流
显示消失练习
<style type="text/css">
img{
display: none;
}
a:hover img{
display: block;
}
</style>
</head>
<body>
<a href="">
显示图片
<br>
<img src="../20190402/img/manor-3.jpg" >
</a>
</body>
浮动
浮动 也能让块元素并排出现
左浮动
float: left;
右浮动
float: right;
浮动元素脱离文档流，提升层级
父级塌陷问题
<style>
#box{
border:1px solid blue;
}
#div1,#div2,#div3{
width: 100px;
height: 100px;
border:1px solid red;
float:right;
}
.clear-fix{
/* clear清除浮动,能防止父级塌陷 */
clear: both;
}
</style>
</head>
<body>
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<!-- 清除浮动 -->
<div class="clear-fix"></div>
</div>
123
</body>
