HTML基础背景设置、外边距、外边距坑及内边距讲解
程序员文章站
2022-05-03 08:59:23
一、背景设置
一、背景设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景设置</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- 背景样式 background -->
<!-- 背景颜色 background-color：颜色值； -->
<!-- 背景图片 background-image：url（“图片路径”） -->
<!-- 背景图片平铺background-repeat：repeat-x(沿着x平铺）|repeat-y（沿着y平铺）|no-repeat（都不平铺）；指定图片的平铺方式 -->
<!-- 背景图片定位 backgroud-position:x,y; -->
<!-- x:支持left center right 支持百分比-->
<!-- y:支持top center bottom 支持百分比-->
<!-- 背景图片尺寸 background-size:x y |cover（拉伸）|contain（-->
<!-- background:复合写法 -->
<!-- background:background-color background-image background-position background-repeat -->
<p>春眠不觉晓，处处闻啼鸟</p>
</body>
</html>
css：
p{
width: 1200px;
height: 800px;
border: 1px red solid;
/*background-color: yellow;
background-image: url("dm.jpg"),url("dm1.jpg");
background-repeat: no-repeat,repeat-y;
background-position: 0px 0px ;
background-size: 50% 50% ;*/
/*顺序可以任意*/
/*size*/
/*多背景*/
background: url("dm.jpg") 0px 0px/200px 200px no-repeat,url("dm1.jpg") right/300px 300px repeat-y;
}
二、外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- 外边距 margin -->
<!-- 左边距 margin-left :数值|auto-->
<!-- 右边距 margin-right:数值|auto-->
<!-- 上边距 margin-top -->
<!-- 下边距 margin-bottom -->
<!-- 外边距复合写法 -->
<!-- 1：margin:0px 0px 0px 0px （第一上 第二 右 第三 下 第四 左-->
<!-- 2:margin:0px 0px 0px（第一表示上，中间左右，第三表示下 -->
<!-- 3:margin:0px 0px（第一个是上下边距，第二个是左右边距） -->
<!-- 4:margin:0px(上下左右边距都是这个值) -->
<p>
<p class="p1">我是p1</p>
<p class="p2">我是p2</p></p>
</body>
</html>
css:
p{
width: 200px;
height: 200px;
background: red;
border: 1px gold solid;
}
.p1{
margin-left: 100px;
margin-top: 100px;
margin-bottom: 50px
}
.p2{
background: blue;
margin-left: 300px;
margin-top: -200px;
}
三、外边距坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的坑</title>
<style type="text/css">
p{
width: 200px;
height: 200px;
}
.p1{
background-color: red;
margin-bottom: 50px;
border: 1px #eef0f0 solid;
}
.p2{
margin-top: 51px;
background-color: blue;
}
.hezi{
width: 400px;
height: 200px;
background-color: #eef0f0;
padding: 50px;
margin:
}
</style>
</head>
<body>
<!-- 坑1：同级结构下，外边距冲突的情况下，谁的数值大，就采用谁的 -->
<!-- 坑2：父子结构下，父级与子级存在都设置上边距的情况下，父级没有设置border..，时，子级的外边距会引出”塌陷“的问题。 -->
<!-- 盒模型：构成：容器尺寸+padding+border+margin -->
<p class="p1">
<p class="p2">
<p class="hezi"></p>
</p>
</p>
</body>
</html>
四、内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- 内边距 padding -->
<!-- 左内边距 padding-left :数值|auto-->
<!-- 右内边距 padding-right:数值|auto-->
<!-- 上内边距 padding-top -->
<!-- 下内边距 padding-bottom -->
<!-- 外边距复合写法 -->
<!-- padding:0px 0px 0px 0px （第一上 第二 右 第三 下 第四 左-->
<!-- 2:padding:0px 0px 0px（第一表示上，中间左右，第三表示下 -->
<!-- 3:padding:0px 0px（第一个是上下边距，第二个是左右边距） -->
<!-- 4:padding:0px(上下左右边距都是这个值) -->
<p >我是p1</p>
</body>
</html>
css:
p{
height: 200px;
background: red;
padding-left: 50px;
padding-top: 50px;
}