1.盒模型-边框
<!-- 内部样式表的创建 -->
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
/* 会撑大盒子 内填充 用于文字等内容 距离 边界之间的距离 */
padding:50px;
/* 边框 会撑大盒子*/
border:20px solid #000;
/* 边框的注意事项 块状元素可以设置上下左右边框 但是 行内元素只能设置左右边框 */
}
</style>
</head>
<body>
<div>今天我们也是快乐的一天</div>
</body>
2.外边界/外边距
<!-- 内部样式表的创建 -->
<style type="text/css">
div{
width: 200px;
height: 200px;
background: cyan;
/* 外边界 一般用于 元素整体 和其他地方之间的距离 */
margin-left:100px;/* 左边距/左外边界 */
margin-right: 200px;
margin-top: 100px;
margin-bottom: 100px;
/* margin的简写/复合属性 */
/* 当上下左右值相同时 margin:值 */
margin:0;
/* 当上下值相同 左右值相同时 margin:上下值 左右值 */
margin:100px auto;
/* 当上下值不同 左右值相同时 margin:上值 左右值 下值 */
margin:10px auto 30px;
/* 当上下左右值不同时 margin:上 右 下 左; */
margin:10px 30px 20px 50px;
}
</style>
</head>
<body>
<div>我们H5-2109-2 YYDS</div>
<h1>哈哈哈哈哈哈，早睡早起身体好</h1>
</body>
3.margin的特性
<!-- 内部样式表的创建 -->
<style type="text/css">
span{
background: cyan;
margin-left: 50px;
margin-right: 50px;
}
b{
background: #f90;
margin-left: 50px;
}
/* margin左右边界相加;上下边界取最大值 */
.box1{
width: 200px;
height: 200px;
background: palegreen;
margin-bottom: 100px;
}
.box2{
width: 200px;
height: 200px;
background: yellow;
margin-top: 190px;
}
</style>
</head>
<body>
<span>你好</span>
<b>很高兴认识你</b>
<div class="box1"></div>
<div class="box2"></div>
</body>
3.margin的特性2
<!-- 内部样式表的创建 -->
<style type="text/css">
.big{
width: 500px;
height: 500px;
background: yellowgreen;
/* 问题：子元素设置margin-top;父元素跟随子元素下移了 */
/* 解决方式1 给父元素设置overflow:hidden;原理BFC */
/* overflow: hidden; */ 溢出隐藏
/* 解决方式2：给父元素设置padding-top: 1px; 缺点 会将父元素撑大1px */
/* padding-top: 1px; */
/* 解决方式3 给父元素设置border-top:1px solid transparent; */
border-top:1px solid transparent;
}
.son{
width: 100px;
height: 100px;
background: pink;
margin-left: 100px; /* 左外边界 */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
4.margin使用注意事项
<!-- 内部样式表的创建 -->
<style type="text/css">
div{
width: 200px;
height: 200px;
background: cyan;
margin-left: 100px;
margin-top: 100px;
/* 块状元素可以设置上下左右margin */
}
span{
background: red;
margin-left: 100px;
/* 行内元素只能设置左右margin 不能设置上下margin */
margin-top: 100px;
}
</style>
</head>
<body>
<div>块状元素</div>
<span>行内元素</span>
</body>
5.padding的使用注意事项
<!-- 内部样式表的创建 -->
<style type="text/css">
div{
width: 100px;
height: 100px;
background: #Dea;
/* 块状元素 可以设置上下左右的padding */
padding-left: 50px;
padding-right: 50px;
padding-top: 40px;
padding-bottom: 60px;
}
span{
/* 因为是行内元素 不可以设置宽高 大小由内容撑开 */
background: red;
padding-left: 50px;
padding-right: 50px;
/* 行内元素 默认情况下 只能设置左右padding */
/* padding-top: 10px;错误的 */
}
</style>
</head>
<body>
<div>块状元素</div>
<span>行内元素</span>
</body>
6.利用padding来移动位置
<!-- 内部样式表的创建 -->
<style type="text/css">
/* 我们先尝试使用padding做 */
.big{
width: 350px;
height: 400px;
background: yellowgreen;
padding-left: 150px;
padding-top: 100px;
}
.son{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
扫一扫
4911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
