内补白(内间距)
让内容和元素的边框有一定距离
padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top: 检索或设置对象顶边的内部边距
padding-right: 检索或设置对象右边的内部边距
padding-bottom:检索或设置对象下边的内部边距
padding-left: 检索或设置对象左边的内部边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的内边距</title>
<style>
div{
width:200px;
height:200px;
background:red;
/*设置元素的内间距 让内容和元素的边框有一定距离*/
/*注意:在使用padding的时候,会改变我们元素的实际大小*/
/*padding-top:30px;*/
/*padding-left:30px;*/
/*padding-bottom:30px;*/
/*padding-right:30px;*/
/*padding:设置四个值的时
第一个值代表元素顶部的内间距
第二个值代表的是元素右边的内间距
第三个值代表的是元素底边的内间距
第四个值代表元素左边的内间距
*/
/*padding:10px 20px 10px 20px;*/
/*padding:设置两个值时
第一个值代表上下对边的间距
第二个值代表左右对边的间距
*/
/*padding:10px 30px;*/
/*padding:设置一个值时
代表四个边的间距
*/
/*padding:30px;*/
}
</style>
</head>
<body>
<!--内边距: 指的是元素距离元素内部元素的间距-->
<div>你好</div>
</body>
</html>
外补白(外间距)
元素距离周围元素的距离
margin: 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top: 检索或设置对象顶边的外延边距
margin-right: 检索或设置对象右边的外延边距
margin-bottom: 检索或设置对象下边的外延边距
margin-left: 检索或设置对象左边的外延边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css外间距</title>
<style>
div{
width:200px;
height:200px;
border:10px solid yellow;
}
.item1{
background:green;
/*设置item的底部的外间距,让他距离item20px*/
/*margin 设置外间距*/
/*margin-bottom:20px;*/
}
.item2{
background:red;
/*单独给每一个方向设置响应的间距*/
/*margin-top:20px;*/
/*margin-left:20px;*/
/*margin-right:20px;*/
/*当设置四个值的时候
第一个值代表当前元素距离上边元素的间距
第二个值代表当前元素距离右边元素的而间距
第三个值代表当前元素距离下边元素的间距
第四个值代表当前元素距离左边元素的间距
*/
/*margin:20px 20px 50px 50px;*/
/*当设置两个值的时候
第一个只代表当前元素距离顶部元素和底部元素的间距
第二高值代表当前因素距离左右两边元素的距离
*/
/*margin:20px 50px;*/
/*当设置一个值的时候
代表当前元素上下左右四周距离元素的距离
*/
/*margin:50px;*/
/*margin的使用技巧 让元素水平居中*/
margin:0 auto;
/*margin:设置负值 让边框合并*/
/*margin-top:-10px;*/
}
.item3{
background:blue;
margin-top:-10px;
}
</style>
</head>
<body>
<!--外间距: 是元素距离周围元素的距离-->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</body>
</html>
margin相关技巧
1、设置元素水平居中: margin:x auto;
2、margin负值让元素位移及边框合并
盒子模型
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。
把元素叫做盒子,设置对应的样式分别为:盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
在布局中,如果我想增大内容和边框的距离,又不想改变盒子显示的尺寸
box-sizing:content-box | border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box1{
width:100px;
height:100px;
background:green;
border:10px solid red;
padding:20px;
/*由此看出我们的盒子实际大小是
盒子的宽度=内容宽度+左右边框+padding(左右内边距)
盒子的高度=内容高度+上下边框+padding(上下内边距)
*/
}
.box2,.box3,.box4{
width: 100px;
height:100px;
background:green;
}
.box3{
padding:20px;
/*想改变元素距离内容的间距,但是又不想改变盒子大小*/
/*box-sizing: border-box;*/
}
.box4{
padding:20px;
border:20px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
块元素,内联元素,内联块元素
元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。
块元素
块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:
- 支持全部的样式
- 如果没有设置宽度,默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
内联元素
内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:
- 支持部分样式(不支持宽、高、margin上下)
- 宽高由内容决定
- 盒子并在一行
- 代码换行,盒子之间会产生间距
- 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置垂直对齐方式
内联块元素
内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,它们在布局中表现的行为:
- 支持全部样式
- 如果没有设置宽高,宽高由内容决定
- 盒子并在一行
- 代码换行,盒子会产生间距
- 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素特点</title>
<style>
.box1{
/* 块级元素
默认宽度是父级元素的100%
独占一行,即使设置了宽度
支持所有的样式
*/
width:100px;
height:100px;
background:green;
margin:20px;
padding:20px;
text-align: center;
line-height:100px;
}
span{
/*
内联元素:
不独占一行,盒子并在一行,代码换行是会产生间距
只支持部分样式:
不支持高度和宽度属性
宽高是由内容撑开
只支持左右margin值
*/
height:100px;
width:100px;
background:green;
margin:20px;
padding:20px;
}
input{
/*行内快元素
不独占一行,盒子并行在一行,代码换行是会产生间距
支持所有的样式
如果不设置宽高属性,那么他的宽高就由内容决定
*/
width:300px;
height:100px;
margin:30px;
padding:30px;
}
</style>
</head>
<body>
<div class="box1"><b>box1</b></div>
<!--上面是一个块级元素,<span>他独占一行</span>,内联元素不独占一行-->
代码换行,盒子之间会产生间距 <br>
上面是一个块级元素,他独占一行,<input type="text" >内联元素不独占一行
</body>
</html>
块元素,内联元素,内联块元素之间的转换
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素类型切换</title>
<style>
div{
width: 100px;
height: 100px;
/*将块元素转换成内联元素*/
/*display:inline;*/
/*将块元素转换成内联块元素*/
/*display:inline-block;*/
}
.box1{
background:green;
}
.box2{
background:red;
}
.box3{
background:blue;
}
span{
width:100px;
height:100px;
background:pink;
/*将内联元素转换成块元素*/
/*display:block;*/
/*将内联元素转换成内联块元素*/
display:inline-block;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
display属性是用来设置元素的类型及隐藏的,常用的属性有:
<span>1、none 元素隐藏且不占位置</span>
<span>2、block 元素以块元素显示</span>
<span>3、inline 元素以内联元素显示</span>
<span>4、inline-block 元素以内联块元素显示</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的隐藏和显示</title>
<style>
.box1{
width:200px;
height:200px;
background-color: red;
/* 让元素隐藏 ,并且隐藏元素不会再占据位置*/
display:none;
}
.box2{
/*block把元素转换成块元素
还可以显示隐藏的元素
*/
display:block;
}
.box3{
width: 200px;
height: 200px;
background: green;
}
.box3 span{
display:none;
}
/*当我鼠标移入box3的时候让字体显示*/
.box3:hover span{
color:pink;
text-align:center;
line-height:200px;
font-size:30px;
display:block;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box1 box2">box2</div>
<div class="box3">
<span>我显示le</span>
</div>
</body>
</html>