CSS Box
2018-12-02 本文已影响7人
roy_pub
border
| 属性 | 说明 |
|---|---|
| border-width 上边，[右边，下边，左边] | 边框粗细 |
| border-top | 上边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
| border-right | 右边框 |
| border-color上边，[右边，下边，左边] | 边框颜色 |
| boder-style:上边，[右边，下边，左边] | none |
| hidden | |
| dashed 虚线 | |
| dotted 点线 | |
| solid 实线 |
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {
width: 600px;
height: 300px;
background-color: cyan;
/*
border-width: 5px;
border-color: red;
border-style: solid;
*/
/*
border: 5px solid red;
*/
border-top: 2px solid red;
border-bottom: 5px dotted pink;
border-left: 3px dashed green;
border-right: 10px solid orange;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
表格细线边框，相邻边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
table {
width: 500px;
height: 400px;
border: 1px solid cyan;
}
td {
border: 1px solid green;
}
table, td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>
</body>
</html>
padding
- padding: 10px 上下左右内边距都是10px
- padding: 10px 20px 上下内边距10px 左右内边距20px
- padding: 10px 20px 30px 上边距10px 左右内边距20px 下内边距30px
- padding: 10px 20px 30px 40px 上，右，下，左
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {
width: 600px;
height: 80px;
border: 10px solid green;
padding: 30px;
}
a {
height: 35px;
background-color: rgba(0,0,0,0.5);
display: inline-block;
line-height: 35px;
color: white;
text-decoration: none;
padding: 0px 10px 0px 10px;
}
</style>
</head>
<body>
<div>
Hello World
</div>
<a href="#">Hello</a>
<a href="#">How do you do</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.nav {
height: 50px;
background-color: rgba(0,0,0,0.5);
border-top: 3px solid orange;
border-bottom: 1px solid #EDEEF0;
}
.nav a {
display: inline-block;
height: 50px;
line-height: 50px;
color: white;
text-decoration: none;
padding: 0px 20px;
}
.nav a:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">iPhone</a>
<a href="#">iPad</a>
<a href="#">iMac</a>
<a href="#">Support</a>
</div>
</body>
</html>
- box 居中对齐，必须是块级元素
- box 必须指定宽度，默认宽度为100%
- margin: 0 auto 左右充满，水平居中对齐
- margin-left: auto 左充满，右对齐
- margin-right: auto 右充满，左对齐
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.article {
width: 380px;
height: 263px;
border: 1px solid grey;
margin: 50px auto;
padding: 20px 15px 0;
}
.article h4 {
color: #202026;
font-size: 20px;
border-bottom: 1px solid grey;
padding-bottom: 8px;
margin-bottom: 10px;
}
.article a {
text-decoration: none;
font-size: 14px;
color: #333;
}
.article ul li {
list-style: none;
height: 38px;
line-height: 38px;
padding-left: 20px;
border-bottom: 1px dashed #ccc;
}
.article a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="article">
<h4>Top News</h4>
<!--ul>li*5>a-->
<ul>
<li><a href="#">China News</a></li>
<li><a href="#">USA News</a></li>
<li><a href="#">Japan News</a></li>
<li><a href=""#>Canada News</a></li>
<li><a href="#">English News</a></li>
</ul>
</div>
</body>
</html>
margin
盒子和盒子之间的间距
外边距离合并,上下两个盒子的间距为20px
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: orange;
}
.hello {
margin-bottom: 20px
}
.world {
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="hello">
Hello
</div>
<div class="world">
world
</div>
</body>
</html>
两个嵌套关系的块元素，如果父元素没有上内边距以及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者的较大者，及时父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距
- 可以为父元素添加 overflow: hidden
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.father {
width: 300px;
height: 300px;
background-color: orange;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.father {
width: 300px;
height: 300px;
background-color: orange;
//padding-top: 1px;
//border-top: 1px solid;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
