文章目录
浮动
1. 浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float
属性来设置于元素的浮动
none
默认值,元素不浮动left
元素向左浮动right
元素向右浮动
注意
- 元素设置浮动以后,水平布局的等式便不需要强制成立
- 元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动
2. 浮动的特点
- 浮动元素会完全脱离文档流,不再占据文档流中的位置
- 设置浮动以后,元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
<style>
.box1 {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
style>
<div class="box1">div>
<div class="box2">div>
4. 浮动元素向左或向右移动时,不会超过前边的浮动元素(先来后到的顺序)
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
style>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
5. 浮动元素不会超过上边的浮动的兄弟元素,最多就是和它一样高
<style>
.box1 {
width: 300px;
height: 300px;
background-color: orange;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: red;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: yellow;
float: right;
}
style>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
6. 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
style>
<div class="box1">div>
<div class="box2">div>
7. 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
简单总结:
- 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列,通过浮动可以制作一些水平方向的布局
- 元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生变化
3. 脱离文档流的特点
块元素:
- 块元素不再独占页面的一行
- 脱离文档流以后,块元素的宽度和高度默认都被内容撑开
<style>
.box1 {
background-color: orange;
}
style>
<div class="box1">hellodiv>
行内元素:
- 行内元素脱离文档流以后会,特点和块元素一样
<style>
span {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
style>
<span>I am a Spanspan>
脱离文档流之后的特点很像行内块元素,不过存在一些差异
<style>
span {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
style>
<span>I am a Spanspan>
<span>I am a Spanspan>
4. 简单布局
整体样式
目的
- 熟悉布局(块元素、浮动)
- 公共css部分复用
- 复习语义标签
代码
html代码
<header>header>
<main>
<nav>nav>
<article>
<div class="top">div>
<div class="bottom">
<div class="left">div>
<div class="middle">div>
<div class="right">div>
div>
article>
<aside>aside>
main>
<footer>footer>
css代码
header,
main,
footer {
width: 1000px;
margin: 10px auto;
}
main nav,
main article,
main aside {
float: left;
height: 100%;
}
.bottom .left,
.bottom .middle,
.bottom .right {
float: left;
width: 220px;
height: 100%;
}
header {
height: 100px;
background-color: silver;
}
main {
height: 400px;
background-color: #bfa;
}
main nav {
width: 150px;
background-color: red;
}
main article {
width: 680px;
background-color: green;
margin: 0 10px;
}
article .top {
height: 190px;
background-color: yellow;
margin-bottom: 10px;
}
article .bottom {
height: 200px;
background-color: orange;
}
.bottom .left {
background-color: lightblue;
}
.bottom .middle {
background-color: gray;
margin: 0 10px;
}
.bottom .right {
background-color: wheat;
}
main aside {
width: 150px;
background-color: blue;
}
footer {
height: 100px;
background-color: tomato;
}
效果
5. 练习:w3school导航条
去除默认样式,引入reset.css
<link rel="stylesheet" href="css/reset.css">
css样式
a {
text-decoration: none;
}
.menu {
width: 1211px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
}
.nav {
float: left;
width: 173px;
line-height: 48px;
}
.nav a {
display: block;
text-align: center;
font-size: 14px;
color: #777777;
font-family: Verdana, Arial, '微软雅黑', '宋体';
}
.nav a:hover {
background-color: #3F3F3F;
color: #E8E7E3;
}
html代码
<ul class="menu">
<li class="nav"><a href="#">HTML/CSSa>li>
<li class="nav"><a href="#">Browser Sidea>li>
<li class="nav"><a href="#">Server Sidea>li>
<li class="nav"><a href="#">Programminga>li>
<li class="nav"><a href="#">XMLa>li>
<li class="nav"><a href="#">Web Buildinga>li>
<li class="nav"><a href="#">Referencea>li>
ul>
效果