浮动和清除
属性 | 描述 |
float | 属性规定元素如何浮动 |
clear | 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。 |
float属性
值 | 描述 |
left | 元素浮动到其容器的左侧 |
right | 元素浮动在其容器的右侧 |
none | 元素不会浮动(将显示在文本中刚出现的位置)。默认值。 |
inherit | 元素继承其父级的 float 值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#one{
float: right;
}
#two{
float: left;
}
</style>
</head>
<body>
<img src="哆啦A梦.jpg" id="one">
<img src="pp.jpg" id="two">
</body>
</html>
效果图
clear属性
值 | 描述 |
none | 允许两侧都有浮动元素。默认值 |
left | 左侧不允许浮动元素 |
right | 右侧不允许浮动元素 |
both | 左侧或右侧均不允许浮动元素 |
inherit | 元素继承其父级的 clear 值 |
未使用clear时:
使用clear时:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
float: left;
clear: both;
}
</style>
</head>
<body>
<img src="pp.jpg" class="one"/>
<img src="pp.jpg" class="two"/>
</body>
</html>
定位布局(总结常用两种)
属性:position
值 | 描述 |
absolute | 绝对定位 |
relative | 相对定位 |
absolute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<img src="pp.jpg"/>
</body>
</html>
绝对定位以上面的粗红点相对与顶角来定位
relative:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
position: relative;
left: 30px;
}
.two{
position:relative;
left: -30px;
}
</style>
</head>
<body>
<h2>正常位置的标题</h2>
<h2 class="one">这是一个相对正常位置向右移动的标题</h2>
<h2 class="two">这是一个相对正常位置向左移动的标题</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-30px" 从元素的原始左侧位置减去 30 像素。</p>
<p>样式 "left:30px" 向元素的原始左侧位置增加 30 像素。</p>
</body>
</html>
CSS3弹性盒子:
属性 | 值 |
dispaly | flex |
属性 | 描述 |
flex-direction | 弹性盒子中子元素的排列方式 |
flex-wrap | 设置子元素超过父元素后是否自动换行 |
flex-flow | flex-direction和flex-wrap的简写 |
align-items | 设置弹性盒子在侧轴(纵轴)上的对齐方式 |
align-content | 对flex-wrap的一个修改,和align-items相似,但不是设置对齐方式 |
justify-content | 设置弹性盒子在横轴(主轴)上的对齐方式 |
flex-direction:
值 | 描述 |
row | 默认值。作为一行,水平地显示弹性项目。 |
row-reverse | 等同行,但方向相反。 |
column | 作为列,垂直地显示弹性项目。 |
column-reverse | 等同列,但方向相反。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
height: 600px;
width: 600px;
border: 1px solid black;
background: grey;
/*不加任何属性时,默认的是行排列*/
display: flex;
}
.two{
height: 100px;
width: 100px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">弹性盒子1</div>
<div class="two">弹性盒子2</div>
<div class="two">弹性盒子3</div>
<div class="two">弹性盒子4</div>
<div class="two">弹性盒子5</div>
<div class="two">弹性盒子6</div>
<div class="two">弹性盒子7</div>
<div class="two">弹性盒子8</div>
<div class="two">弹性盒子9</div>
<div class="two">弹性盒子10</div>
</div>
</body>
</html>
效果图:
加上flex-direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
height: 600px;
width: 600px;
border: 1px solid black;
background: grey;
/*不加任何属性时,默认的是行排列*/
display: flex;
/*加上flex-direction,让弹性盒子纵向排列*/
flex-direction:column;
}
.two{
height: 100px;
width: 100px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">弹性盒子1</div>
<div class="two">弹性盒子2</div>
<div class="two">弹性盒子3</div>
<div class="two">弹性盒子4</div>
<div class="two">弹性盒子5</div>
<div class="two">弹性盒子6</div>
<div class="two">弹性盒子7</div>
<div class="two">弹性盒子8</div>
<div class="two">弹性盒子9</div>
<div class="two">弹性盒子10</div>
</div>
</body>
</html>
效果图:
由代码可见,不加display的属性,会呈现下面的效果
现就可以知道弹性盒子的作用了,会自动调节盒子,使子盒子能在父盒子里面全部容纳
flex-wrap
值 | 描述 |
nowrap | 默认值。规定弹性项目不会换行。 |
wrap | 规定弹性项目会在需要时换行。 |
wrap-reverse | 规定弹性项目会在需要时换行,以反方向。 |
上一张效果图加上flex-wrap属性就会换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
height: 600px;
width: 600px;
border: 1px solid black;
background: grey;
display: flex;
/*换行属性*/
flex-wrap: wrap;
}
.two{
height: 100px;
width: 100px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">弹性盒子1</div>
<div class="two">弹性盒子2</div>
<div class="two">弹性盒子3</div>
<div class="two">弹性盒子4</div>
<div class="two">弹性盒子5</div>
<div class="two">弹性盒子6</div>
<div class="two">弹性盒子7</div>
<div class="two">弹性盒子8</div>
<div class="two">弹性盒子9</div>
<div class="two">弹性盒子10</div>
</div>
</body>
</html>
效果图:
flex-flow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
height: 600px;
width: 600px;
border: 1px solid black;
background: grey;
display: flex;
/*把flex-direction和flex-wrap属性简写*/
flex-flow: row wrap;
}
.two{
height: 100px;
width: 100px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">弹性盒子1</div>
<div class="two">弹性盒子2</div>
<div class="two">弹性盒子3</div>
<div class="two">弹性盒子4</div>
<div class="two">弹性盒子5</div>
<div class="two">弹性盒子6</div>
<div class="two">弹性盒子7</div>
<div class="two">弹性盒子8</div>
<div class="two">弹性盒子9</div>
<div class="two">弹性盒子10</div>
</div>
</body>
</html>
效果图:
align-items
值 | 描述 |
stretch | 默认。项目被拉伸以适合容器。 |
center | 项目位于容器的中央。 |
flex-start | 项目位于容器的开头。 |
flex-end | 项目位于容器的末端。 |
baseline | 项目被定位到容器的基线 |
align-content
值 | 描述 |
stretch | 默认值。行拉伸以占据剩余空间。 |
center | 朝着弹性容器的中央对行打包。 |
flex-start | 朝着弹性容器的开头对行打包。 |
flex-end | 朝着弹性容器的结尾对行打包。 |
space-between | 行均匀分布在弹性容器中。 |
space-around | 行均匀分布在弹性容器中,两端各占一半。 |
justify-content
值 | 描述 |
---|---|
flex-start | 默认值。项目位于容器的开头。 |
flex-end | 项目位于容器的结尾。 |
center | 项目位于容器中央。 |
space-between | 项目在行与行之间留有间隔。 |
space-around | 项目在行之前、行之间和行之后留有空间。 |