盒子模型 》》》标签之间存在包含关系 位置调整
内边距
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1{
border: 1px groove red;
color: black;
width: 200px;
height: 200px; /*width、height内部容量*/
/*内边距:内部元素距离当前块元素边界距离 容量大小不改变
边线向外扩充*/
padding:100px;/*内边距四个方向均设置100*/
/*padding: 100px 50px; 上下100左右20 顺序:上右下左*/
}
</style>
</head>
<body bgcolor="yellowgreen">
<div id="div1">
<a href="https://www.baidu.com" style="color: black;">百度</a><br/>
<h1>abcd</h1>
</div>
</body>
外边距
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2{
border: 1px solid:red;
background-color: yellowgreen;
width: 200px;
height: 200px;
/*外边距 实际容量不变 包含关系只增大距离*/
/*margin: 200px;*/
margin: 0px auto; 居中
}
</style>
</head>
<body>
<div id="div2">
</div>
</body>
行内元素和块元素的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background: lightyellow;
border: 1px solid lightblue;
margin: auto;
}
.s1{
width: 100px;
height: 100px;
background: lightskyblue;
border: 1px solid lightyellow;
margin-top:20px;
/*不生效,span是行内元素,无盒子模型 只有块标签有盒子模型
转换:display block块(转换为块)
inline行内
行内元素设置宽和高未必生效,块元素一定生效
* */
display: block;
}
</style>
</head>
<body>
<div class="div1">
<span class="s1">今天天气真好</span>
</div>
</body>
</html>