<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
.box1{
/* border-width:1px;
border-color:red;
border-style:solid; */
/*边框复合写法:border:颜色 粗细 样式;(顺序不论)*/
/*border:1px dashed green;
solid :实线 dashed:虚线 dotted：点线 px：像素*/
/* 颜色的写法:颜色单词，rgb（0~255）:rgb(53,150,241);#3E40FF */
border: 10px solid #3E40FF;
width:200px;/* 宽:像素 */
height:300px;/* 高:像素 */
/* padding: 20px; */
/* top:上 left:左 right:右 bottom:下 center:居中 */
/*padding-top: 30px; */
/* 复合写法:padding:一个值(上下左右);
padding:两个值(上下,左右);(内边距)
padding:三个值(上 ,左右,下);
padding:四个值(上 ,右,下,左(顺时针)) */
padding:50px 50px 50px 60px;
}
</style>
<!-- 盒子模型必须有的三个条件：边框颜色 粗细 样式-->
</head>
<body>
<div class="box1">
hello world!
</div>
<!-- margin:外边距 盒子与盒子之间的距离-->
<!-- 块级盒子水平居中显示，给盒子的左右外边距设置为auto -->
<!-- 问题1：相邻两个之间外边合并。
解决:只给其中一个盒子设置外边距.
问题2:嵌套盒子之间外边距的塌陷.
解决方法:
1.给父盒子加边框
2.给父盒子加内边距padding
3. 给父盒子加overflow:hidden;-->
</body>
</html>
08-28
1465
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
