文章目录
css选择器
1.盒子模型
1.1边框（border）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css进阶</title>
<style>
.box{
/*border: 1px solid red;*/
height: 200px;
width: 200px;
border-top: 2px solid red;
border-bottom: 20px double green;
border-left: 10px dotted blue;
border-right: 10px dashed red;
}
</style>
</head>
<body>
<div class="box">我是盒子模型</div>
</body>
</html>
边框就是一个四边形的边框，这里其实很多格式，其实如果想要更多种查一下就好，当然用的最多的就是我注释的那个语句，那个很通用。
1.2内边距（padding）
首先直观的感受一下什么是内间距，就是一个盒子内部的在里面的间距，尤其注意，这个内间距是先定义一个盒子，然后不是在盒子内部取一部分作为内间距，而是把一个盒子的内部直接拓宽，所以说盒子正常是会拓宽的。所以做页面的时候尽量用外间距来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css进阶</title>
<style>
.box{
background-color: green;
height: 200px;
padding: 200px 10px;
}
</style>
</head>
<body>
<div class="box">我是盒子模型</div>
</body>
</html>
首先解释一下这个代码，其实padding可以传4个参数，和上面的边框相同，方向是上右下左的顺序，但是如果传两个参数，就默认为上等于下，右等于左，如果传一个参数就是默认都是这一个间距。
1.3外边距（margin）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css进阶</title>
<style>
.box{
background: green;
height: 200px;
width: 1000px;
padding: 0;
margin-top: 200px;
margin-left: 20px;
margin-bottom: 20px;
/*margin-right: 20px;*/
border: 1px solid red;
}
.flag{
height: 200px;
width: 1000px;
background-color: red;
margin-top: 50px;
/*border: 1px solid blue;*/
}
.box1{
height: 100px;
width: 80px;
margin-top: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div class="flag">我是参照物</div>
<div class="box">
<div class="box1">
我是盒子1
</div>
我是盒子模型</div>
</body>
</html>
这个和之前的有所不同，主要是因为对于外间距来说，参照物很重要，这里就有几个问题，第一种情况，如果只有两个盒子，都是没有外边框的话，那么假如第一个盒子定义的下边距为50px，第二个盒子的上边距为100px，那么这两个盒子的距离就是100px，他们之间取得是最大值而不是相加的值。第二个问题就是如果存在嵌套盒子的情况，而外面的盒子没有边框的话，那么其实定义这个盒子的整体位置的其实是小盒子，所以为了避免麻烦，尽量在外面的盒子上加上边框，这样出错的概率就会变小很多。
2.浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box{
border: 10px solid red;
}
.box>.box1{
width: 100px;
height: 100px;
/*float: left;*/
background-color: green;
}
.box>.box2{
width: 100px;
height: 100px;
/*float: left;*/
background-color: blue;
}
.box>.box3{
width: 100px;
height: 100px;
/*float: left;*/
background-color: #695DC7;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">我是盒子一</div>
<div class="box2">我是盒子二</div>
<div class="box3">我是盒子三</div>
</div>
</body>
</html>
首先解释一下什么是浮动，浮动就是对一个div盒子来说，浮动会改变盒子正常的文档流，对于浮动最经典的操作就是一列变成一行，上面的代码我是把浮动注释掉了的，就是想看看原来是什么样子的。
原来就是这个样子的。
当然我把注释放开之后是什么样子的呢。
你会发现，好像和我们想象的不太一样呀，为啥会这个样子的呢，因为我们说过浮动脱离了正常的文档流，这样的话，对于边框而言就找不到限制边框的东西啦，所以说就变成这个样子了。那我们怎么改这个东西呢，方法有很多，我就写一个最推荐的方法吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box{
border: 10px solid red;
}
.box>.box1{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.box>.box2{
width: 100px;
height: 100px;
float: left;
background-color: blue;
}
.box>.box3{
width: 100px;
height: 100px;
float: left;
background-color: #695DC7;
}
.clearfix::after{
display: block;
clear: both;
content: "";
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1">我是盒子一</div>
<div class="box2">我是盒子二</div>
<div class="box3">我是盒子三</div>
</div>
</body>
</html>
这个就是改完的代码，主要就是clearfix，这就是相当于一个class，写完放在标签中就可以，解释一下里面是什么意思，display：block就是让float变成块级元素，其实本来的div应该是块级元素，但是因为加入float之后就不是块级元素了，所以用这个重新变成块级元素，这样边框就有了作用。clear就是字面的意思，全部清空，content就是不填内容，我试过了，如果你在content加入内容，就会在下面在开辟一个小块，然后输出内容。
你甚至可以通过样式控制来实现这个模块的改写。当然主要是实现行变成块的功能。
3.定位
首先说明几个概念，绝对定位和相对定位，绝对定位是脱离文档流的，相对定位是不脱离文档流的，也就是说相对定位是不影响其他布局的，而相对文档流是影响其他的网页布局的，而我们经常看到的小广告用的是固定定位，其实属于绝对定位。但是这个比较特殊，这个fixed是相对于你的浏览器的，也就是说无论你怎么滑动，都是在你当前页面的哪个固定的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box{
border: 10px solid red;
width: 1000px;
height: 1000px;
}
.box>.box1{
width: 100px;
height: 100px;
background-color: green;
position: fixed;
right: 100px;
bottom:100px;
}
</style>
</head>
<body>
<div class="box ">
<div class="box1">我是盒子一</div>
</div>
</body>
</html>
就是这样的，无论你怎么滑动你的鼠标，你都能发现这个绿色的小块还在那个位置。
3.1相对定位（relative）
前面用了一个最通俗易懂的小例子说明了什么是固定定位，现在说的是相对定位，主要还是看效果和代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box{
border: 10px solid red;
width: 1000px;
height: 1000px;
}
.box>.box1{
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 100px;
/*bottom:100px;*/
}
.box>.box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box ">
<div class="box1">我是盒子一</div>
<div class="box2">我是盒子二</div>
<!--<div class="box3">我是盒子三</div>-->
</div>
</body>
</html>
上面的是没有使用相对定位的，下面是使用了相对定位的。说明了什么呢？说明了使用了相对定位之后不会改变改变其他的网页布局，也就是说在改编位置前，其实前面还是有一个东西在占有地方。
3.2绝对定位（absolute）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box{
border: 10px solid red;
width: 1000px;
height: 1000px;
}
.box>.box1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 100px;
/*bottom:100px;*/
}
.box>.box2{
width: 100px;
height: 100px;
/*float: left;*/
background-color: blue;
}
</style>
</head>
<body>
<div class="box ">
<div class="box1">我是盒子一</div>
<div class="box2">我是盒子二</div>
<!--<div class="box3">我是盒子三</div>-->
</div>
</body>
</html>
是这个样子，这里我没有使用浮动，但是他改变了。这就是绝对定位。
3.3使用时候使用法则
其实使用的法则，总结一句话就是父相子绝，就是如果是对于那种div嵌套两个盒子来说，尽量对于父亲盒子要用到相对定位，对于子盒子可以使用绝对定位，这样的话，可以防止盒子因为改变而导致页面出项问题。
扫一扫
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
