border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border : border-width || border-style || border-color
例如:
border: 1px solid red; 没有顺序
很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
cellspacing="0"
,将单元格与单元格之间的距离设置为0,<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
text-align: center;
border: 1px solid rgb(202, 117, 162);
height: 300px;
width: 500px;
/* 合并 */
border-collapse: collapse;
}
td,th{
text-align: center;
border: 1px solid rgb(202, 117, 162);
}
.headerTable{
background-color: antiquewhite;
}
</style>
</head>
<body>
<table align="center" >
<caption><h1>小说排行榜</h1></caption>
<tr class="headerTable">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↑</td>
<td>3500</td>
<td>35000</td>
<td>
<a href="#">贴吧</a>
<a href="#">官网</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↑</td>
<td>3500</td>
<td>35000</td>
<td>
<a href="#">贴吧</a>
<a href="#">官网</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↑</td>
<td>3500</td>
<td>35000</td>
<td>
<a href="#">贴吧</a>
<a href="#">官网</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↑</td>
<td>3500</td>
<td>35000</td>
<td>
<a href="#">贴吧</a>
<a href="#">官网</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↑</td>
<td>3500</td>
<td>35000</td>
<td>
<a href="#">贴吧</a>
<a href="#">官网</a>
</td>
</tr>
</table>
</body>
</html>
padding属性用于设置内边距。 是指 边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
当我们给盒子指定padding值之后, 发生了2件事情:
注意: 后面跟几个数值表示的意思是不一样的。
简写版!重要
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ; |
课堂一练:
请写出如下内边距:
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
<style>
.nav{
height: 41px;
border-top: 3px solid #FF8500;
border-bottom: 1px solid #EDEEF0;
text-align: center;
}
.nav a{
height: 41px;
line-height: 41px;
display: inline-block;
padding: 0 20px;
text-decoration: none;
color: #4C4C4C;
font-size: 16px;
}
.nav a:hover{
background-color: #EEE;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
问题:
解决:
课堂一练
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{
width:960px;
margin:0 auto;
}
常见的写法,以下下三种都可以。
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 background-position */
}
为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除
代码:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意:
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
解决方案:尽量给只给一个盒子添加margin值。
解决方案:
还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。
内边距和外边距,大部分情况下是可以混用的。 就是说,你用内边距也可以,用外边距也可以。 你觉得哪个方便,就用哪个。
我们根据稳定性来分,建议如下:
优先使用宽度(width) 其次使用内边距(padding) 再次外边距(margin)。
width > padding > margin
因为网页美工大部分效果图都是利用ps来做的,所以,以后我们大部分切图工作都是在ps里面完成。
箭头素材:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.contain {
width: 280px;
height: 300px;
border: 1px solid #ccc;
margin: 60px auto;
padding: 20px;
}
.contain .top {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.contain .bottom ul li {
height: 30px;
margin-top: 5px;
line-height: 30px;
background: url(image/arr.jpg) no-repeat scroll 5px center;
border-bottom: 1px dashed #ccc;
list-style: none;
}
.contain .bottom ul li a {
text-decoration: none;
color: #333;
font-size: 15px;
padding: 0 20px;
}
.contain .bottom ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="contain">
<div class="top">
<h2>最新文章/New Articles</h2>
</div>
<div class="bottom">
<ul>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
<li><a href="#">北京招聘最新消息:lol在线招人</a></li>
</ul>
</div>
</div>
</body>
</html>
无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }