一、盒子模型
(一)外边距(margin)
1、设置标签与标签之间的间距
2、margin: 0 auto 是左右自动居中
3、设置标签的位置(水平/垂直)
4、可能会遇到的问题:外边距重叠(合并),外边距塌陷 , 解决方法(嵌套一层标签):
(1)设置overflow:hidden;
(2)设置边框(border)
(3)设置浮动(float)
(4)设置定位(position)
外边距塌陷代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06.css.外边距塌陷的解决方法.html</title>
<style>
.big{
width:500px;
height: 300px;
background-color: red;
/*解决外边距塌陷的问题*/
/* overflow: hidden; */
/*border:1px solid blue;*/
/*float: left;*/
/*position: absolute;*/
}
.big .small{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
外边距塌陷的运行结果:
解决外边距的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06.css.外边距塌陷的解决方法.html</title>
<style>
.big{
width:500px;
height: 300px;
background-color: red;
/*解决外边距塌陷的问题*/
overflow: hidden;
/*border:1px solid blue;*/
/*float: left;*/
/*position: absolute;*/
}
.big .small{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
解决外边距塌陷问题的运行结果:
(二)边框(border)
1、一个盒子有四条边
2、属性:border-style(边框样式例如:直线、点线、虚线)/border-width(边框宽度)/border-color(边框颜色)
3、边框的作用:修饰盒子边框,制作小图标:例如三角形;
设置三角形代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04.css.边框.html</title>
<style>
/*选中类名叫做box的div标签*/
/* 三角形 */
/*transparent 透明*/
span.icon{
display: inline-block;
width:0;
height:0;
border-right: 50px solid transparent;
border-top: 50px solid blue;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
</style>
</head>
<body>
<!-- 2.0border -->
<span class="icon"></span>
</body>
</html>
运行结果:
(三)内边距(padding)
1、设置内容与边框的间距
2、padding-top(上)/padding-bottom(下)/padding-right(右)/padding-left(左)
3、作用:可以居中指定的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02.css.内边距.html</title>
<style>
html,body{
padding:0;
margin:0;
}
div.box1{
background-color: red;
padding-top:50px;
}
div.search{
width:400px;
height: 60px;
background-color: #ccc;
/*内边距会撑开盒子大小*/
padding:20px 50px;
}
div.search div.box{
height: 60px;
background-color: white;
}
div.nav{
/*盒子大小的计算方式 width+padding+border*/
/*width: 100%;*/
height: 80px;
background-color: orange;
padding-left:500px;
padding-top:10px;
padding-bottom: 10px;
padding-right:10px;
/*box-sizing: border-box;*/
}
.nav .content{
height: 80px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"> 网站首页 </div>
<!-- padding -->
<div class="search">
<div class="box"></div>
</div>
<div class="nav">
<div class="content"></div>
</div>
</body>
</html>
运行结果:
(四)盒子设置内容大小:宽(width)高(height)
二、盒子计算方式
盒子计算方式:边框+外边距+内容大小
三、字体属性
(一)font-size 字体大小
(二)font-style 字体样式
(三)font-weight 字体粗细
(四)font-family 字体名称
(五)color 字体颜色。