1.块内元素与行内元素
HTML_code
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 100px;width: 200px;/* 变宽类型 */border-style: solid;/* 边框宽度 */border-width: 10px;/* 边框颜色 */border-color: violet;background-color: aqua;}</style>
</head><body><!-- 块内元素：自动换行 --><!-- 盒模型content：盒模型的内容padding:内边距border:边框margin:外边距--><div>块级元素1</div><div>块级元素2</div><!--行内元素：不能设置宽高，不会自动换行 --><span>行内元素1</span><span>行内元素2</span><a href="#">你好</a></body>
</html>2.块级元素，盒子模型的基本属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 200px;width: 300px;background-color: aqua;/* 字体居中 */text-align: center;/* 内边距 *//* padding-top: 10px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px; *//* 设置4方向 */padding: 10px;/* 边框 *//* border-style: solid;border-width: 10px;border-color: #000000; *//* 边框大小 类型 颜色 */border: 10px double #000000;/* 边框颜色 */border-color: blue;/* 外边距 *//* margin-top: 15px;margin-left: 15px;margin-right: 15px;margin-bottom: 15px; *//* 设置4个方向 */margin: 15px;margin:auto;}</style>
</head><body><div>have not been able to </div>
</body>
</html>3.盒子模型的简单嵌套
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{height:160px;width: 300px;border: 1px solid black;margin: auto;} .left{/* foat定位左浮动：从左往右排 */float: left;height:100px;width: 70px;border: 1px solid black;/* 设置内边距 *//* padding: 10px; */}.right{/* foat定位右浮动:从右往左排 */float: right;height:100px;width: 70px;border: 1px solid black;/* 设置一个外边距 */margin: 10px;}.middle{/* foat定位左浮动:从左往右排 */float: left;height:100px;width: 70px;border: 1px solid black;/* 设置中间那个盒子的背景颜色 */background-color: yellowgreen;}</style>
</head>
<body><div class="main"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div>
</body>
</html>
