<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="web1.css" rel="stylesheet">
</head>
<body>
<div class="c">1111111</div>
<div class="d">绿色的圆</div>
<div class="e">今天是周六</div>
<div class="e"><strong>今天是周六</strong><!--行级标签，把字加粗--></div>
<div class="f">哈哈哈哈</div>
<div class="g">
<div class="c"></div>
<div class="h">lalalalalalal</div>
</div>
<p class="j">hhhhhhh</p>
<div class="k">44444</div>
<div class="z">
<div class="l"></div>
</div>
<!--网页的文档流：行级元素从左到右，快级元素从上到下，文字从始到终-->
</body>
</html>
*{
/*body，p元素天生自带margin，padding属性*/
padding: 0;
margin: 0;
/*消除元素天生自带的属性*/
}
.c {
width: 200px;
height: 200px;
border: 5px plum dashed;/*总的四条边*/
border-bottom:1px palegreen solid;/*一条边*/
margin: auto;/*子元素在父元素中水平居中*/
/*要居中的（子）元素一定要有一个固定宽度*/
}
.d{/*边*/
width: 200px;
height: 200px;
background-color: palegreen;
border-radius: 400px;/*圆角*/
}
.e{/*字体*/
background-color:palegoldenrod;
height: 40px;
color:palevioletred;
font-size: 30px;
font-family: 仿宋;
font-weight: bolder;/*加粗*/
text-align: left;
text-decoration: underline/*下划线*/;
text-decoration: line-through;/*横穿线*/
text-indent: 30px;/*缩进*/
}
.f{
height: 40px;
margin-bottom:10px ;
/*上下左右四个边的外边距，元素与元素之间的距离或者元素与父元素之间的距离*/
/*margin:10px 20px 30px 40px;上右下左，margin:10px 20px；上下，左右，简写形式*/
/*块级元素使用margin*/
margin-left: 40px;
background-color: palegreen;
}
.g {/*子元素在父元素位置中的移动*/
height: 20px;
background-color: palevioletred;
margin-top: 20px;
margin-left: 40px;
}
.h{
height:100px;
background-color:lightpink;
padding-left: 20px;
/*padding，元素的内容与边框之间的间距，使用padding会引起元素的撑大，
任何元素都适用，无负值*/
}
.j{/*控制文档流，定位*/
width: 100px;
height: 200px;
background-color: cadetblue;
position: absolute;
/*绝对定位，会使元素摆脱文档流的控制,position和right或者top必须同时使用
原元素向上浮动，原来的位置被空出来，下一元素跟随文档流占据原元素的位置*/
/*多元素可以同时飘，后飘的会在上面*/
left: 0;
top: 0;
margin-left: -50px;/*第二种居中方式*/
}
.k{
width: 300px;
height: 300px;
background-color: burlywood;
position: absolute;
left: 0;
top: 0;
z-index: 10;/*决定谁飘在上面，10代表飘在10层*/
}
.z{
width: 400px;
height: 400px;
background-color: peru;
}
.l{
width: 200px;
height: 200px;
background-color: palevioletred;
position: absolute;/*脱离文档流，断绝父子关系，子元素可以出去父元素外边*/
right: 0;
top: 0;
}
/*行级元素和行级元素都可以使用文档流，脱离文档流之后就不区分行级和块级了*/
.x{
background-color: black;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 11;
/*定位，让元素div飘起来，距上下左右都为0，可以使背景颜色充满整个屏幕,还不出现滚动条*/
}
火狐截图_2018-10-13T07-43-22.957Z.png
网友评论