<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box {
/* width: 100px; */
/* height: 100px; */
background-color: burlywood;
}
span {
background-color: chocolate;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<!--
文档流（normal flow）
网页是一个多层的结构,设置样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
元素脱离文档流后的特点
元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素，
也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有
元素怎么脱离文档流
浮动 绝对定位 flex 等等
-->
<div>
连劫国为报呼是人罪。
</div>
<p>了严台密耐谭哉败秦金考倒的，事长派家者。</p>
<span>尚啊</span>
</body>
</html>
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形 */
/* 盒模型、盒子模型、框模型（box model）*/
/* 买一个冰箱 收到一个大的快递
冰箱 内容区（content）
纸箱子 边框（border）
泡沫 内边距（padding）
冰箱离你的距离 外边距（margin）
影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小
*/
/*
1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
height 设置内容区的高度
*/
.box{
/* 设置内容区宽高*/
width: 200px;
height: 200px;
background-color: pink;
/* 设置padding */
padding: 30px;
/* 设置边框 */
border: 10px solid orange;
/*设置外边距 */
margin: 30px;
}
.box1{
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<main class="box">
<div class="box1"></div>
</main>
</body>
</html>
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
