居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border: 1px solid #ccc;
text-align: center; /*文字水平居中*/
margin: 10px auto; /* 盒子居中*/
}
section {
width: 400px;
height: 400px;
border: 1px solid red;
}
section img {
width: 200px;
height: 210px;
margin-left: 100px;
margin-top: 95px;
}
aside {
width: 400px;
height: 400px;
border: 1px solid pink;
background: #fff url(xd.jpg) no-repeat;
background-size: 200px 210px;
/* 背景图更改位置 用background-position*/
background-position: 100px 95px;
}
</style>
</head>
<body>
<div>文字水平居中</div>
<section>
<!--插入图片水平居中 图片也是一个盒子 用margin或padding设置-->
<img src="xd.jpg" alt="">
</section>
<aside>
</aside>
</body>
</html>
返回顶层目录
行内元素没有上下外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
span {
background: green;
margin: 10px; /**/
padding: 100px;
}
</style>
</head>
<body>
<span>我是行内元素</span>
</body>
</html>
返回顶层目录
外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: blue;
}
div:first-child {
margin-bottom: 80px;
}
div:nth-child(2) {
background-color: skyblue;
margin-top: 40px;
}
.fa {
width: 300px;
height: 300px;
background-color: red;
/* overflow: hidden; */
/* border: 1px solid #ccc; */
padding-top: 1px;
}
.son {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 30px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>
返回顶层目录
盒子尺寸计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
border: 4px solid #ccc;
padding: 20px;
margin: 40px;
/*
空间尺寸 width+padding+border+margin
内含实际尺寸 width+border+padding
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
返回顶层目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 44px;
height: 33px;
line-height: 33px;
border: 1px solid #ccc;
margin: 200px;
font-size: 16px;
color: #666;
border-radius: 5px 0 0 5px;
padding-left: 15px;
}
</style>
</head>
<body>
<div>新闻</div>
</body>
</html>
返回顶层目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div:first-child {
height: 300px;
border: 1px solid blue;
padding-left: 200px; /*盒子没有设置宽度 padding不会影响盒子的宽度*/
padding-top: 10px;
}
div:last-child {
width: 300px;
height: 40px;
border: 1px solid pink;
}
p {
height: 20px;
background-color: yellowgreen;
padding-left: 100px;
}
</style>
</head>
<body>
<div>奔跑吧 兄弟</div>
<div>
<p>
摔跤吧 爸爸
</p>
</div>
</body>
</html>
浏览器会给元素一个默认样式,一般我们会重置浏览器默认样式
* {padding: 0; margin: 0}
注意:
- 行内元素没有上下外边距 也没有上内边距
- 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌陷)
- 对于两个嵌套关系的块元素,假如父亲没有上内边距和边框,则父亲的上外边距和儿子的上外边距发生合并。
解决方案:- 给父亲加overflow:hidden
- 给父亲加上内边距或上边框
返回顶层目录
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 {
font-size: 90px;
text-shadow: 10px 3px 3px rgba(0,0,0,0.5);
color: red;
}
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* 水平位置 垂直位置 模糊距离 阴影颜色*/
box-shadow: 10px 15px 30px rgba(0,0,0,0.4) inset;
}
</style>
</head>
<body>
<h1>我们一定可以高薪</h1>
<div></div>
</body>
</html>
返回顶层目录
水晶图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 249px;
height: 249px;
line-height: 249px;
text-align: center;
border-radius: 50%;
margin: 100px;
background-color: pink;
background: url(shui.jpg) 0 0 no-repeat;
font-size: 30px;
color: rgba(255,255,255,0.7);
box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset, 5px 4px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>水晶图片</div>
</body>
</html>