元素定位
标准流(normal flow)
静态定位-用于微调
相对定位
调位置后,top/right/left/bottom是原图
如果难记,直接写移动的方向数值加上负号即可
原位置在现位置的右下
相对定位适合做微调,比如hot标签,比如右上角的平方立方
固定定位-画布滚动固定不动
fixed的四个top/right/left/bottom是距离top/.....为
如right: 30px为右侧间距为30px
为了让图片永远在视口中间,可以使用center,不需要使用min/max-width
注意这里顶部反馈有两个类名
绝对定位-希望相对于父元素定位
给box加上相对定位,产生了定位父元素
在最外侧的container设置相对定位,删除内侧盒子的定位
实现:小盒子在大盒子的右下,且strong标签在小盒子的左下
使用两次绝对定位
把position设置为fixed/absolute的带来的特点
可以随意设置宽高,脱离行内级元素无法设置宽高的规则
绝对定位元素居中
auto是什么
绝对定位的案例练习
粘性定位
但是兼容性很差,对于ie低级的不兼容
案例有:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
background-color: #f00;
color: #fff;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<div class="nav">
<span>电脑</span>
<span>手机</span>
<span>衣服</span>
<span>鞋子</span>
</div>
<ul>
<li>电脑列表1</li>
<li>电脑列表2</li>
<li>电脑列表3</li>
<li>电脑列表4</li>
<li>电脑列表5</li>
<li>电脑列表6</li>
<li>电脑列表7</li>
<li>电脑列表8</li>
<li>电脑列表9</li>
<li>电脑列表10</li>
<li>电脑列表11</li>
<li>电脑列表12</li>
<li>电脑列表13</li>
<li>电脑列表14</li>
<li>电脑列表15</li>
<li>电脑列表16</li>
<li>电脑列表17</li>
<li>电脑列表18</li>
<li>电脑列表19</li>
<li>电脑列表20</li>
<li>电脑列表21</li>
<li>电脑列表22</li>
<li>电脑列表23</li>
<li>电脑列表24</li>
<li>电脑列表25</li>
<li>电脑列表26</li>
<li>电脑列表27</li>
<li>电脑列表28</li>
<li>电脑列表29</li>
<li>电脑列表30</li>
<li>电脑列表31</li>
<li>电脑列表32</li>
<li>电脑列表33</li>
<li>电脑列表34</li>
<li>电脑列表35</li>
<li>电脑列表36</li>
<li>电脑列表37</li>
<li>电脑列表38</li>
<li>电脑列表39</li>
<li>电脑列表40</li>
<li>电脑列表41</li>
<li>电脑列表42</li>
<li>电脑列表43</li>
<li>电脑列表44</li>
<li>电脑列表45</li>
<li>电脑列表46</li>
<li>电脑列表47</li>
<li>电脑列表48</li>
<li>电脑列表49</li>
<li>电脑列表50</li>
<li>电脑列表51</li>
<li>电脑列表52</li>
<li>电脑列表53</li>
<li>电脑列表54</li>
<li>电脑列表55</li>
<li>电脑列表56</li>
<li>电脑列表57</li>
<li>电脑列表58</li>
<li>电脑列表59</li>
<li>电脑列表60</li>
<li>电脑列表61</li>
<li>电脑列表62</li>
<li>电脑列表63</li>
<li>电脑列表64</li>
<li>电脑列表65</li>
<li>电脑列表66</li>
<li>电脑列表67</li>
<li>电脑列表68</li>
<li>电脑列表69</li>
<li>电脑列表70</li>
<li>电脑列表71</li>
<li>电脑列表72</li>
<li>电脑列表73</li>
<li>电脑列表74</li>
<li>电脑列表75</li>
<li>电脑列表76</li>
<li>电脑列表77</li>
<li>电脑列表78</li>
<li>电脑列表79</li>
<li>电脑列表80</li>
<li>电脑列表81</li>
<li>电脑列表82</li>
<li>电脑列表83</li>
<li>电脑列表84</li>
<li>电脑列表85</li>
<li>电脑列表86</li>
<li>电脑列表87</li>
<li>电脑列表88</li>
<li>电脑列表89</li>
<li>电脑列表90</li>
<li>电脑列表91</li>
<li>电脑列表92</li>
<li>电脑列表93</li>
<li>电脑列表94</li>
<li>电脑列表95</li>
<li>电脑列表96</li>
<li>电脑列表97</li>
<li>电脑列表98</li>
<li>电脑列表99</li>
<li>电脑列表100</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto 0;
overflow: scroll;
background-color: #ccc;
}
.nav {
background-color: #f00;
color: #fff;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<h1>我是标题</h1>
<div class="nav">
<span>电脑</span>
<span>手机</span>
<span>衣服</span>
<span>鞋子</span>
</div>
<ul>
<li>电脑列表1</li>
<li>电脑列表2</li>
<li>电脑列表3</li>
<li>电脑列表4</li>
<li>电脑列表5</li>
<li>电脑列表6</li>
<li>电脑列表7</li>
<li>电脑列表8</li>
<li>电脑列表9</li>
<li>电脑列表10</li>
<li>电脑列表11</li>
<li>电脑列表12</li>
<li>电脑列表13</li>
<li>电脑列表14</li>
<li>电脑列表15</li>
<li>电脑列表16</li>
<li>电脑列表17</li>
<li>电脑列表18</li>
<li>电脑列表19</li>
<li>电脑列表20</li>
<li>电脑列表21</li>
<li>电脑列表22</li>
<li>电脑列表23</li>
<li>电脑列表24</li>
<li>电脑列表25</li>
<li>电脑列表26</li>
<li>电脑列表27</li>
<li>电脑列表28</li>
<li>电脑列表29</li>
<li>电脑列表30</li>
<li>电脑列表31</li>
<li>电脑列表32</li>
<li>电脑列表33</li>
<li>电脑列表34</li>
<li>电脑列表35</li>
<li>电脑列表36</li>
<li>电脑列表37</li>
<li>电脑列表38</li>
<li>电脑列表39</li>
<li>电脑列表40</li>
<li>电脑列表41</li>
<li>电脑列表42</li>
<li>电脑列表43</li>
<li>电脑列表44</li>
<li>电脑列表45</li>
<li>电脑列表46</li>
<li>电脑列表47</li>
<li>电脑列表48</li>
<li>电脑列表49</li>
<li>电脑列表50</li>
<li>电脑列表51</li>
<li>电脑列表52</li>
<li>电脑列表53</li>
<li>电脑列表54</li>
<li>电脑列表55</li>
<li>电脑列表56</li>
<li>电脑列表57</li>
<li>电脑列表58</li>
<li>电脑列表59</li>
<li>电脑列表60</li>
<li>电脑列表61</li>
<li>电脑列表62</li>
<li>电脑列表63</li>
<li>电脑列表64</li>
<li>电脑列表65</li>
<li>电脑列表66</li>
<li>电脑列表67</li>
<li>电脑列表68</li>
<li>电脑列表69</li>
<li>电脑列表70</li>
<li>电脑列表71</li>
<li>电脑列表72</li>
<li>电脑列表73</li>
<li>电脑列表74</li>
<li>电脑列表75</li>
<li>电脑列表76</li>
<li>电脑列表77</li>
<li>电脑列表78</li>
<li>电脑列表79</li>
<li>电脑列表80</li>
<li>电脑列表81</li>
<li>电脑列表82</li>
<li>电脑列表83</li>
<li>电脑列表84</li>
<li>电脑列表85</li>
<li>电脑列表86</li>
<li>电脑列表87</li>
<li>电脑列表88</li>
<li>电脑列表89</li>
<li>电脑列表90</li>
<li>电脑列表91</li>
<li>电脑列表92</li>
<li>电脑列表93</li>
<li>电脑列表94</li>
<li>电脑列表95</li>
<li>电脑列表96</li>
<li>电脑列表97</li>
<li>电脑列表98</li>
<li>电脑列表99</li>
<li>电脑列表100</li>
</ul>
</div>
</body>
</html>相对于滚动视口的
CSS属性-z-index
如果没有注明z-index值,按照html文档中书写顺序叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
position: fixed;
width: 100px;
height: 100px;
left: 0;
top: 0;
background-color: #f00;
}
.box2 {
left: 20px;
top: 20px;
background-color: #0f0;
z-index: -1;
}
.box3 {
left: 40px;
top: 40px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
</body>
</html>
如果非兄弟元素中间,设置z-index比较需要看具体情况使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
position: fixed;
width: 100px;
height: 100px;
left: 0;
top: 0;
background-color: #f00;
}
.box2 {
left: 20px;
top: 20px;
background-color: #0f0;
z-index: -1;
}
.box3 {
left: 40px;
top: 40px;
background-color: #00f;
}
.info {
position: absolute;
z-index: 999;
}
</style>
</head>
<body>
<div class="item box1">1</div>
<div class="container">
<div class="item box2">
<div class="info">哈哈哈</div>
<div>呵呵呵</div>
</div>
</div>
<div class="item box3">3</div>
</body>
</html>浮动-float
float主要用于实现左右分布
贴在padding内侧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
background-color: orange;
}
.item {
background-color: #f00;
width: 100px;
height: 100px;
/* 三个全部向左浮动: 都会脱离标准流 */
/* float: left; */
}
.box1 {
float: left;
background-color: #0f0;
margin-left: 20px;
}
.box2 {
float: left;
}
.box3 {
float: left;
}
.box4 {
width: 200px;
height: 100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<!-- 浮动元素之间不能层叠 -->
<div class="container">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
<div class="item box4">4</div>
</div>
</body>
</html>
当给box1增加margin-left: 20px;
规则1-3大意相同,规则4-5了解即可
图片不设置浮动:
图片设置浮动:
flex解决水平间隙问题
对span设置 float: left;后
将多个行内级元素中间的空格(间隙)去除的方法
1. 删除换行符(不推荐)
<div class="box">
<span>aaa</span><span>bbb</span><span>ccc</span>
</div>2. 将父级元素的font-size设置为0, 但是需要子元素设置回来
.box {
font-size: 0;
}
span {
background-color: orange;
font-size: 16px;
}
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>3. 通过子元素(span)统一向一个方向浮动即可
4. flex布局(还没有学习)
.box {
display: flex;
}
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>浮动练习1-百度页码练习
对ul,li标签进行样式重置
/* 样式的重置 */
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式的重置 */
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
/* 全局设置 */
body {
background-color: #f2f2f2;
}
/* 内容样式 */
ul > li {
float: left;
margin-left: 12px;
}
ul > li > a {
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius: 6px;
background-color: #fff;
color: #3951b3;
font-size: 14px;
}
ul > li > a:hover, ul > li.active > a {
background-color: blue;
color: #fff;
}
ul > li.next > a {
width: 80px;
}
</style>
</head>
<body>
<!-- 结构: HTML -->
<ul>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3</a></li>
<li class="item"><a href="#">4</a></li>
<li class="item active"><a href="#">5</a></li>
<li class="item"><a href="#">6</a></li>
<li class="item"><a href="#">7</a></li>
<li class="item"><a href="#">8</a></li>
<li class="item"><a href="#">9</a></li>
<li class="item"><a href="#">10</a></li>
<li class="item next"><a href="#">下一页 ></a></li>
</ul>
</body>
</html>
浮动练习2-京东多列布局(设置magrin为负数)
设置了width后margin0auto才能自动居中
关键点在于如果设置间距,大盒子1190px,每个小盒子230px,剩余40px,如果直接设置margin-right=40/5=8px,会分两层展示
如五个盒子只设置四个间距,每个为10px,此时会分两层展示
为了解决此问题,需要在大盒子那里手动添加margin-right=-10
数值为:间距总数/几个间距
即:小盒子的margin-right=剩余间距/(盒子数-1)
大盒子的margin-right=-(小盒子的margin-right)
即:剩余间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container
{
width: 1190px;
height: 800px;
margin: 0 auto;
background-color: orange;
}
.box
{
width: 230px;
height: 322px;
background-color: purple;
color: #fff;
float: left;
margin-right: 10px;
}
.box_all
{
margin-right: -10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box_all">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
</body>
</html>如果添加更多盒子,仍然按照这种规范书写
浮动练习3 考拉的多列布局(边框很少见)
为每个盒子加上边框,边框会重叠
因为1100-221*5=-5
每个盒子左移1px
把盒子设置为border-box,设置第一个盒子为220px宽,其他为221px宽,每个盒子 margin-left/right: -1px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container
{
width: 1100px;
height: 800px;
margin: 0 auto;
background-color: #ccc;
}
.box
{
width: 221px;
height: 168px;
background-color:orange;
color: #fff;
float: left;
border: 1px solid #000;
/* margin-right: -1px; */
margin-left: -1px;
box-sizing: border-box;
}
.box1
{
width: 220px;
}
</style>
</head>
<body>
<div class="container">
<div class="box_all">
<div class="box box1">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
</body>
</html>浮动练习4(设置magrin为负数)
把方块分为left与right两种,抽出来,设置高度,所有盒子都有类item
其余就按照之前的margin负数写法写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content
{
width: 1190px;
margin: 0 auto;
background-color: #f00;
height: 1000px;
}
.wrapper
{
margin-right: -10px;
}
.item
{
background-color: purple;
width: 290px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.left
{
height: 370px;
}
.right
{
height: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
</body>
</html>杂
margin-left设置负值+float会覆盖
浮动的问题-高度塌陷
对紫色部分设置浮动,绿色部分不设置,不设置紫色部分高度
设置紫色部分整体高度为100px
因为浮动后脱标了,不汇报高度,每个子元素不向父元素汇报具体的高度,所以导致了这种结果
如果不写具体高度,会认为为0
clear清除浮动
.other {
clear: both;
}绿色部分成功到了紫色部分下方,绝大多数情况,clear数值为both
空块级元素+clear清除浮动
.line {
clear: both;
}
<div class="line"></div>伪元素清除浮动
固定写法
/* 最终的解决方案 */
.clear_fix::after {
content: "";
clear: both;
display: block;
/* 浏览器兼容 */
visibility: hidden;
height: 0;
}
.clear_fix {
/* IE6/7 */
*zoom: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1190px;
margin: 0 auto;
background: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background: #0f0;
}
/* 最终的解决方案 */
.clear_fix::after {
content: "";
clear: both;
display: block;
/* 浏览器兼容 */
visibility: hidden;
height: 0;
}
.clear_fix {
/* IE6/7 */
*zoom: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper clear_fix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
扫一扫
1263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
