前端学习笔记-CSS系列(四)布局
这章主要讲一下CSS的布局方式
|display设置元素的显示方式
display:block|inline|inline-block|none
block块级元素
主要特点
- 默认宽度为父元素宽度
- 可设置宽高
- 换行显示
换行显示的display:block
默认display:block元素-div,p,h1-h6,ul,form,...
inline行级元素
主要特点
- 默认宽度为内容宽度
- 不可设置宽高
- 同行显示
默认display:inline元素-span,a,label,cite,em...
inline-block 兼容块行级特点
主要特点
- 默认宽度为内容宽度
- 可以设置宽高
- 同行显示
- 宽度不够可整块换行
默认display:inline-block元素-input,textarea,select,button,...
none
用来设置元素不显示
应用
|块级元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-布局</title>
<style type="text/css">
.content{
background-color: pink;
width: 300px;
height: 300px;
/*核心代码*/
margin: auto;
}
</style>
</head>
<body>
<div class="content">content area</div>
</body>
</html>```
##### |布局-居中导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-布局</title>
<style type="text/css">
/设置列表样式/
ul{
text-align: center;
height: 30px;
line-height: 30px;
background-color: #f00;
}
/设置每一列元素样式/
li, a{
display: inline-block;;
width: 80px;
height: 100%;
}
</style>
</head>
<body>
<ul>
<li><a href="">导航一</a></li>
<li><a href="">导航二</a></li>
<li><a href="">导航三</a></li>
<li><a href="">导航四</a></li>
</ul>
</body>
</html>
##### |布局-定位
- 设置位置(确定要先设置定位方式才会起作用)
top/bottom/left/right
这四个属性分表代表上下左右距离参照元素的距离
z-index
表示各元素在浏览器上Z轴的层级
优先级:父元素>子元素
- 设置定位方式(参照物)
positon:static|relative|absolute|fixed
- ###### static:默认值
- ###### relative:相对位置
**属性值特点:**
1.在文档流中
2.参照物为元素本身
文档流代表页面中的br等换行对元素起作用
**应用**:
1.改变层级
2.绝对定位元素的参照物
- ###### absolute
1.默认宽度为内容宽度
2.脱离文档流(后续元素会占据他当前的位置)
3.参照物为第一个定位祖先/根元素
**应用**
1.布局-轮播头图
**代码是这样的**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-轮播图</title>
<style type="text/css">
.imageContain{
position: relative;
width: 480px;
background-color: yellow;
}
.imageContain img{
display: block;
}
.imageContain .text{
background-color: #000;
position: absolute;
margin: 0;
bottom: 0;
width: 100%;
line-height: 45px;
opacity: 0.7;
}
.imageContain .text a{
margin-left: 20px;
color: #fff;
text-decoration: none;
}
.imageContain .controls{
position: absolute;
bottom: 18px;
right: 10px;
line-height: 10px;
}
.imageContain .controls span{
display: inline-block;
width: 10px;
height: 10px;
margin: auto 1px;
border-radius: 10px;
background-color: gray;
}
.imageContain .controls span.cur{
background-color: #fff;
}
</style>
</head>
<body>
<div class="imageContain" >
<img src="att.jpg">
<p class="text"><a href="#">老徐视线:北京潮女逛街不穿内衣</a></p>
<div class="controls">
<span></span><span class="cur"></span><span></span><span></span><span></span>
</div>
</div>
</body>
</html>
2.布局-三行自适应布局(固定顶栏和底栏模式)
代码是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-布局</title>
<style type="text/css">
.front{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background: red;
}
.contentBody{
position: absolute;
background-color: pink;
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
overflow: auto;
}
.content{
height: 2000px;
}
.bottom{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="front"> 我是前序元素</div>
<div class="contentBody">
<div class="content">我是内容区域</div>
</div>
<div class="bottom">我是后续元素</div>
</body>
</html>
- fiexd 固定定位
1.默认宽度为内容宽度
2.脱离文档流
3.参照物为视窗
**应用：**
固定顶栏、遮罩
**兼容性**
position:fixed 在ie6及以下不支持
有的时候我们想让两部分块级元素同行显示又不脱离文档流这时候就要用到float这个定位属性
- 浮动布局
float:left|right
**特点**
1.float的元素在同一文档流
2.默认宽度为内容宽度
3.向指定方向一直移动
4.float元素半脱离文档流
- 对元素，脱离文档流
- 对内容，在文档流
清除浮动效果
clear:both|left|right
1. 应用于后续元素
2. 应用于块级元素
