盒子:
在html中所有的标签(元素)都可以看作是一个盒子
盒子的四要素:内容、内边距(padding)、盒子厚度(border)、外边距(margin)
注:1. 在使用盒子时,margin要素有一定的弊端(也就是margin塌陷)。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin塌陷</title>
<style type="text/css">
#person{
background-color:pink;
width:500px;
height: 500px;
}
#sun{
background-color: skyblue;
width:200px;
height: 200px;
margin-top:50px;
}
</style>
</head>
<body>
<div id="person">
<div id="sun"></div>
</div>
</body>
</html>
margin塌陷:就是在设置子元素margin-top时父元素跟着下来
解决方法:
1. 为父盒子设置边框,例:border:1px solid black; <!--边框大小1像素,样式实线,颜色黑色-->
2. 为父盒子设置内边距,例:padding-top: 50px;
3. 为父盒子设置overflow: hidden;子盒子设置margin-top:50px; <!--overflow: hidden;意为溢出隐藏,超出自身区域的地方 不显示,推荐使用-->
注:2.内联元素不推荐设置内边距(padding)的上下值,因为设置了也无效,内联元素根据内容多大,盒子多大。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联元素</title>
<style type="text/css">
#outer{
display:inline;
/*background-color: pink;
border: 1px solid black;*/
/*这里请不要为了让他体现出来加上背景和边框*/
width:400px;
height: 400px;
}
#inward{
background-color: skyblue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inward">
</div>
</div>
</body>
</html>
这里的outer里的大小并没有400*400px,因为内容只有200*200px ,所以outer的大小也只有200*200,上面代码中不加背景和边框,是因为他们自带样式会加大原来盒子大小
盒子的特性:独占一行,属性与id(#)选择器和,class(.)选择器使用
<div></div>一般案例:
显示如下图形,如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#tree{
width:0 ;
height: 0;/*这里不写的话,div独占一行的特性*/
border-top:50px solid green ;/*上边的厚度50,绿色*/
border-right:50px solid red ;/*右边的厚度50,红色*/
border-bottom:50px solid blanchedalmond ;/*下边的厚度50,绿色*/
border-left:50px solid blue ;/*左边的厚度50,蓝色*/
}
</style>
</head>
<body>
<div id="tree"></div>
</body>
</html>
注意:这里设置像素大小px最好不要掉,争对不同浏览器
float(浮动)
生活中的浮动:想像一下盒子的浮动,没有浮动的盒子是沉浸在水下的,浮动的盒子是漂在水上的,页面上的是从上往下漂,也就是页面顶部就终点,不管是漂在水上的,还是沉浸在水下的,他们都会到达终点(最先到达的会占用他的地方,依次),只是先后的问题
为什么用浮动:兄弟关系的盒子,也就是多个块状元素实现并列一行显示
浮动原理:
所有浮动元素受父盒子影响,设置了左浮动的元素,先找父亲的左边缘,若遇到浮动的元素,就靠着浮动元素排列 ,设置浮动的元素不独占一行
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
#person{
background-color: pink;
width:600px;
height: 600px;
}
#sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
#sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div id="person">
<div id="sun1"></div>
<div id="sun2"></div>
</div>
</body>
</html>
清除浮动:
为什么要清除周边元素的浮动:用于撑起父元素的高度
方法一:clear:both;
给设置了浮动元素的最下面添加一个清除浮动的元素,该元素属于正常文档流中的内容,它会紧靠着设置浮动元素的最底边缘,也称为额外标签法。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
}
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
.sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
.clear{/*清除浮动,*/
clear:both;
}
</style>
</head>
<body>
<div class="person">
<div class="sun1"></div>
<div class="sun2"></div>
<div class="sun1"></div>
<div class="clear"></div>
</div>
</body>
</html>
注: clear:both;清除浮动不推荐使用,且只能放在有浮动元素的父盒里
方法二:伪元素法
伪元素: 伪元素用于向文本设置特殊样式,也就是格式化,不两只伪元素其作用不同,具体学习可以在https://www.w3school.com.cn/上可以了解。(推荐使用)
语法:
选择器:伪元素{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
}
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
.sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
.clearfix:after{
content:"";
display: block;/*将设置为行内元素,内容多高且多高*/
clear: both;
}
</style>
</head>
<body>
<div class="person clearfix">
<div class="sun1"></div>
<div class="sun2"></div>
<div class="sun1"></div>
</div>
</body>
</html>
注:在版本较低的浏览器下,伪元素不存在