老雷html/css开发视频教程之布局属性
一、display
none 隐藏对象
inline 指定对象为内联元素。 span a
block 指定对象为块元素 div
inline-block 指定对象为内联块元素
flex 将对象作为弹性伸缩盒显示。
div{display:block;}
span{display:inline;}
二、float 浮动
none 设置元素不浮动
left 设置元素浮在左边
right 设置元素浮在右边
.float{
float:left;
}
三、clear 清除浮动
none 允许两边都可以有浮动对象
both 不允许有浮动对象
left 不允许左边有浮动对象
right 不允许右边有浮动对象
.clear{clear:both;}
<div class="float"></div>
<div class="clear"></div>
四、visibility 可见性
visible： 设置对象可视
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
.div{visibility:visible;}
五、overflow 内容溢出处理
可以分拆：overflow-x,overflow-y
元素定义宽高之后生效
visible 对溢出内容不做处理，内容可能会超出容器。
hidden 隐藏溢出容器的内容且不出现滚动条。
scroll 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。
.over{overflow:auto;}
课后练习
实现横排
<div>
<div>A</div>
<div>A</div>
<div>A</div>
</div>
实现
左边固定 右边变换
左边变换 右边固定
左边固定 中边变换 左边固定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style>
.box1{
display: block;
border:1px solid #eee;
margin: 10px;
padding: 10px;
min-width: 200px;
min-height: 60px;
}
.fl,.fr{
width: 100px;
border:1px solid #eee;
margin-right: 10px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.over{
padding: 10px;
overflow: hidden;
width: 200px;
height: 60px;
border:1px solid #eee;
}
</style>
</head>
<body>
<div class="box1">
<span>左边</span>
<span>左边</span>
<div class="fr">右边</div>
</div>
<div class="box1">
<div class="fl">左边</div>
<div class="fl">左边</div>
<div class="fr">右边</div>
<div class="clear"></div>
</div>
<div style="visibility: visible;" class="box1">清除浮动</div>
<div class="over" >
超出隐藏内容超出隐藏内容超出隐藏内容超出隐藏内容超出隐藏内容超出隐藏内容
</div>
<style>
.nav,.flex{
height: 50px;
border: 1px solid #eee;
line-height: 50px;
margin-bottom: 10px;
}
.nav .item{
margin-left: 20px;
display: inline-block;
cursor: pointer;
}
.flex{
display: flex;
flex-direction: row;
}
.flex .item{
display: block;
margin-left: 20px;
cursor: pointer;
}
</style>
<div class="nav">
<a class="item">首页</a>
<a class="item">热门</a>
<div class="item">推荐</div>
</div>
<div class="flex">
<div class="item">首页</div>
<div class="item">热门</div>
<div class="item">推荐</div>
</div>
</body>
</html>