版权声明：文笔粗糙，技术渣渣，观后如有不适请及时举报 ！！！ https://blog.csdn.net/weixin_43560839/article/details/89942891
CSS 内边距（padding）
padding 会改变元素的实际大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 内边距</title>
<style>
div{
width:200px;
height:200px;
background-color:red;
/*设置内间距，让元素与边框有一定的距离,padding-top*/
/*会改变元素的实际大小 宽度，高度均为：200+30+30=260px*/
padding-top:30px;
padding-left:30px;
/*大于30px则不会生效*/
padding-bottom:30px;
padding-right:30px;
/*另外一种写法,顶部开始，顺时针*/
padding:50px 60px 70px 80px;
/*padding 设置两个值 ，第一个值代表上下，第二个值代表左右*/
padding:100px 200px;
/*padding 设置一个值*/
padding:200px;
}
</style>
</head>
<body>
<!--内边距，元素距离元素内部的距离-->
<div>你好</div>
</body>
</html>
CSS 外边距（margin）
margin，类似于 padding 的表示方法。
常用技巧：margin:0 auto;
margin 设置负使得边框和合并：margin-top:-10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 外间距</title>
<style>
div{
width:200px;
height:200px;
}
.item1{
background-color:red;
/*设置两个div之间的间距，类似于 padding 的表示方法
可以一个值 margin:20px;
两个值 margin:20px 30px;
四个值 margin-bottom:20px;
*/
margin-bottom:20px;
}
.item2{
background-color:green;
margin:20px;
/*常用技巧*/
margin:0 auto;
/*margin 设置负使得边框和合并*/
margin-top:-10px;
}
</style>
</head>
<body>
<!--元素距离外部元素的间距-->
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
CSS盒子模型
Chrome浏览器 F12
元素叫做盒子，对应的样式分别为：盒子的边框(border),盒子里的内容与边框之间的距离(padding),盒子与盒子之间的距离(margin).
解决padding和border的尺寸问题
box-sizing:border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 盒子模型</title>
<style>
.box1{
width:200px;
height:200px;
background-color:green;
border:20px solid red;
padding:10px;
/*由此看出盒子的大小=内容的大小+border+padding*/
}
.box2{
width:200px;
height:200px;
background-color:green;
padding:20px;
/*解决padding和border的尺寸问题*/
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
块元素，内联元素，内联块元素
块元素
div p ul h1~h6 dl dt dd…
- 独占一行，即使设置了宽度
- 支持全部样式
- 不设置宽度的情况下为父级元素的100%
内联元素
- 内联元素，不独占一行，只支持部分样式
- 不支持宽高
- 只支持左右margin
- 支持padding
内联块元素
也叫行内块元素
- 不独占一行
- 支持所有的样式
- 如果不设置宽高，他的宽高属性由内容决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素特点</title>
<style>
.box1{
height:200px;
background-color:green;
}
span{
/*
内联元素，不独占一行，只支持部分样式
不支持宽高
只支持左右margin
支持padding
*/
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="box1"></div>
上面是一个块级元素，<span>内联元素</span>
</body>
</html>
元素之间的转换
转化成内联元素：display:inline;
转化成内联块元素：display:inline-block;
转化为块元素：display:block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的切换</title>
<style>
div{
width:200px;
height:200px;
/*将块元素转化成内联元素*/
display:inline;
/*将块元素转化成内联块元素*/
display:inline-block;
}
.box1{
background-color:green;
}
.box2{
background-color:red;
}
.box3{
background-color:blue;
}
span{
/*内联元素转化为块元素*/
/*display:block;*/
/*内联元素转化为内联块元素*/
display:inline-block;
}
</style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
<!--/*内联元素转化为块元素或者是内联块元素*/-->
<span>内联元素转化为块元素或者是内联块元素</span>
<span>内联元素转化为块元素或者是内联块元素</span>
<span>内联元素转化为块元素或者是内联块元素</span>
<span>内联元素转化为块元素或者是内联块元素</span>
</body>
</html>
元素的显示与隐藏
让元素隐藏,并且影藏元素不会占据位置：display:none
block可以把元素变成块元素，也可以显示隐藏的元素：display:block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的显示与隐藏</title>
<style>
.box1{
width:200px;
height:200px;
background-color:green;
/*让元素隐藏,并且影藏元素不会占据位置*/
display:none;
}
.box2{
/*block可以把元素变成块元素
也可以显示隐藏的元素
*/
display:block;
}
.box3{
width:200px;
height:200px;
background-color:red;
/*让元素隐藏,并且影藏元素不会占据位置*/
/*display:none;*/
}
.box3 span{
display:none;
}
/*当鼠标移到box3时候，字体显示*/
.box3:hover span{
display:block;
font-size:30px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box1 box2">box2</div>
<div class="box3">
<span>我显示了</span>
</div>
</body>
</html>