目录:
(1)网页布局的实质
(2)盒子边框(border)
(3)表格的细线边框
(4)表格的细线边框
(5)内边距(padding)
(6)外边距(margin)
(7)清除元素默认的内外边距
(8)新浪导航栏小案例(padding练习)
(9)搜索趣图小案例(margin练习)
(1)网页布局的实质
把网页元素(比如文字图片等)放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。简单一句话就是：用CSS来摆放盒子。
盒子模型(box model):
(2) 盒子边框(border)
语法:
Border:border-width || border-style || border-color
边框属性-设置边框样式(border-style)
边框样式用于定义页面中边框的风格,常用属性如下:
- none:没有边框即忽略所有边框的宽度(默认值)。
- solid:边框为单实线(最常用)。
- dashed：边框为虚线。
- dotted：边框为点线。 Double：边框为双实线。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
width: 100px;
height: 100px;
border-width: 10px;
border-color: pink;
/* border-style: solid; */
/* border-style: dashed; */
/* border: dotted; */
border-style: double;
}
input {
border: 0;
}
.user {
border-width: 1px;
border-color: pink;
border-style: solid;
}
.nc {
border: 1px dashed pink;
}
.email {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.tel {
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
用户名：<input type="text" class="user/"><br />
用户名：<input type="text" class="nc"><br />
邮 箱：<input type="email" class="email"><br />
手 机：<input type="tel" class="tel"><br />
</body>
</html>
(3)表格的细线边框
语法：
table {border-collapse:collapse}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> table {
width: 700px;
height: 300px;
border: 1px solid red;
/* 合并相邻边框 */
border-collapse: collapse;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
(4)圆角边框
语法：
Border-radius:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
width: 200px;
height: 200px;
border: 1px solid red;
}
div:first-child {
border-radius: 20px;
/* 一个数值表示 四个角都是相同的 */
}
div:nth-child(2) {
/* 取宽度和高度的一半就会变成一个圆形 */
border-radius: 100px;
border-radius: 50%;
}
div:nth-child(3) {
/* 左上角和右下角 右上角和左下角 */
border-radius: 10px 40px;
}
div:nth-child(4) {
/* 左上角 右上角和左下角 右下角 */
border-radius: 10px 40px 80px;
}
div:nth-child(5) {
/* 从左上角开始 按照顺时针方向 */
border-radius: 10px 40px 80px 100px;
}
div:nth-child(6) {
border-radius: 100px 0;
}
</style>
</head>
<body>
<div>20px</div>
<div>50%或100px</div>
<div>10px 40px</div>
<div>10px 40px 80px</div>
<div>10px 40px 80px 100px</div>
<div>自由发挥</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
(5)内边距(padding)
Padding属性用于设置内边距,指边框与内容之间的距离。
Padding-top/bottom/left/right
后面跟几个数值表示的意思是不一样的:
1个值 padding:上下左右边距。
2个值 padding:上下边距 左右边距 。
3个值 padding 上边距 左右边距 下边距。
4个值 padding 上右下左边距。
注意:行内元素只有左右外边距,没有上下内外边距。内边距在ie6等低版本浏览器也会有问题。 (以后尽量不要给行内元素指定上下内外边距)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
width: 200px;
height: 200px;
border: 1px solid red;
/* 1个值 padding:上下左右边距。 */
padding: 20px;
/* 2个值 padding:上下边距 左右边距 。 */
padding: 10px 30px;
/* 3个值 padding 上边距 左右边距 下边距。 */
padding: 10px 30px 50px;
/* 4个值 padding 上右下左边距。 */
padding: 10px 20px 30px 40px;
}
</style>
<body>
<div>内边距就是内容和边框的距离</div>
</body>
</html>
(6)外边距(margin)：
①外边距实现盒子居中：
必须是块级元素,盒子必须指定了宽度。给左右外边距都设置为auto就可以使块级元素水平居中。
实际工作中用这样的方式网页布局： .header{ width:960px; margin:0 auto;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
width: 200px;
height: 200px;
background-color: pink;
margin: 30px auto;
padding: 4px;
}
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
<header>头部标签</header>
</body>
</html>
②外边距合并问题:
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
- 相邻块元素垂直外边距的合并：
当上下相邻两个块元素相遇,margin-bottom和margin-top。则他们之间的垂直间距是两者中较大者，这种现象被称为相邻块元素垂直外边距合并(外边距塌陷)。
- 嵌套块元素垂直外边距的合并：
解决方案：
- 为父元素定义1像素的上边框或上内边距。
- 为父元素添加overflow:hidden。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .father {
width: 300px;
height: 300px;
background-color: pink;
/* 解决外边距塌陷的问题 */
/* border: 1px solid red; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
(7)清除元素默认的内外边距
为了更方便的控制网页中的元素,制作网页时,使用如下代码清除元素的默认外边距:
* {
margin: 0;
padding: 0;
}
(8)新浪导航栏小案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> nav {
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500;
border-bottom: 1px solid #EDEEF0;
}
nav a {
font-size: 14px #4C4C4C;
text-decoration: none;
/* width: 100px; height: 41px; background-color: pink; 因为连接是行内元素,没有大小 需要转换为行内块元素 */
display: inline-block;
padding: 0 15px;
height: 41px;
line-height: 41px;
}
nav a:hover {
background: #eee;
}
</style>
<body>
<nav>
<a href="#">首页</a>
<a href="#">手机新浪网</a>
<a href="#">网站导航</a>
<a href="#">三个字</a>
</nav>
</body>
</html>
(9)搜索趣图小案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {
/* 清空默认的内外边距 几乎是我们写CSS必须首先写的 */
margin: 0;
padding: 0;
}
ul {
/* 取消列表自带的小点 */
list-style: none;
}
.searchPic {
width: 238px;
height: 294px;
border: 1px solid #D9E0EE;
border-top: 3px solid orange;
margin: 100px;
}
.searchPic h3 {
height: 35px;
line-height: 35px;
/* 让行高等于高度,可以让文字垂直居中 */
border-bottom: 1px solid #D9E0EE;
font-size: 16px;
font-weight: normal;
/* 让粗体不变粗 */
padding-left: 12px;
/* 因为h3没有给定宽度 继承的父亲的宽度 padding就不会撑开盒子了 */
}
.searchPic img {
margin: 7px 0 0 8px;
}
.searchPic ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
/* 取消下划线 */
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background: url(orange.jpg) no-repeat left center;
}
.searchPic ul li a:hover {
/* 添加下划线 */
text-decoration: underline;
color: #FF8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="写轮眼.jpg" height="160" width="218" alt="">
<ul>
<li><a href="#">开局一条鲲,装备全靠吞。</a></li>
<li><a href="#">开局一条鲲,装备全靠吞。</a></li>
<li><a href="#">开局一条鲲,装备全靠吞。</a></li>
</ul>
</div>
</body>
</html>
京公网安备 11010502036488号