本教程案例在线演示
免费配套视频教程
教程配套源码资源
div
div 可定义文档中的分区（division）。
div 标签可以把网页分割为独立的、不同的部分。
可以看成以下结构：
div不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class，然后通过css选中某个div，对其进行样式美化。
<div class="demo">我是一个div</div>
<style> .demo{ color:red; font-size: 20px; } </style>
每个div可以看成一个盒子
一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：
width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border
height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border
padding：内边距。
border：边框。
margin：外边距。
元素宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: gray; } </style> </head> <body> <div>我是一只小小鸟</div> </body> </html>
边框
属性 说明 示例
border-top-color 上边框颜色
border-top-color:#369;
border-right-color 右边框颜色
border-right-color:#369;
border-bottom-color 下边框颜色
border-bottom-color:#fae45b;
border-left-color 左边框颜色
border-left-color:#efcd56;
border-color 四个边框为同一颜色
border-color:#eeff34;
上、下边框颜色：#369
左、右边框颜色：#000
border-color:#369 #000;
上边框颜色：#369
左、右边框颜色：#000
下边框颜色：#f00
border-color:#369 #000 #f00;
上、右、下、左边框颜色：
#369、#000、#f00、#00f
border-color:#369 #000 #f00 #00f;
边框粗细
border-width:像素值
order-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px 2px;
边框样式
none
hidden
dotted
dashed
solid
double
border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-style:solid ; border-style:solid dotted; border-style:solid dotted dashed; border-style:solid dotted dashed double;
border简写
同时设置边框的颜色、粗细和样式
border-bottom: 9px #F00 dashed ; border: 9px #F00 dashed ;
外边距
margin-top margin-right margin-bottom margin-left margin
margin-top: 1px margin-right : 2 px margin-bottom : 2 px margin-left : 1 px margin : 3 px 5 px 7 px 4 px; margin: 3px 5px; margin: 3px 5px 7px; margin: 8px;
外边距的妙用
网页居中对齐
前提，居中对齐的网页元素必须设定宽度。
margin:0px auto;
内边距
padding
padding-left padding-right padding-top padding-bottom padding
padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; padding:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px ; padding:10px;
盒子型模的尺寸
盒子模型总尺寸=border-width+padding+内容宽度
box-sizing
box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度
box-sizing: content-box
width = content width;
height = content height
box-sizing: border-box
width = border + padding + content width
heigth = border + padding + content heigth
<div class="content-box">Content box</div> <br> <div class="border-box">Border box</div> <style> div { width: 160px; height: 80px; padding: 20px; border: 8px solid orange; background: pink; } /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ; */ .content-box { box-sizing: content-box; } /** 元素的总宽度 = 160; 总高度 = 80px; */ .border-box { box-sizing: border-box; } </style>
content box:
image
border box:
image
总结一下：
1.对于给定width和height的元素，设置box-sizing属性会影响盒子content width和 content height。
2.浏览器默认使用标准盒子模型，即box-sizing: content-box, 就是我们所写的宽度和高度就是对content 进行设置的。
3.在一些响应式布局中，我们修改了浏览器计算元素宽度、高度的方式，认为元素的宽度和高度是包括内边距padding和边框border
元素默认样式
很多标签都有自己的默认样式
我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式
body标签的margin为8px
p标签的上下外边距为16px
image
h1标签的上下外边距为21.440px
image
ul标签的上下外边距也为16px，左内边距也为40px
image
重置默认样式
为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)
/*默认样式重置(css reset)*/ body,p,h1,h2,h3,h4,h5,h6,dl,dd{ margin: 0; font-size: 12px; /* 中文字体大小的最小值 */ /* font-family: xx; 也可以设置字体 */ } ol,ul { list-style: none; /* 去除列表样式 */ padding: 0; margin: 0; } a { color: #464646; text-decoration: none; } a:hover { color: #f60; text-decoration: underline; }
取色器工具
用来拾取演示，和测量长度的轻量级工具。
双击执行
image
弹出取色器，点击按钮
image
测量宽高
选择屏幕标尺
image
测量
image
拾取颜色
选择屏幕取色器
image
随意选取颜色
image
练习 有路网右侧黑板报
image
我们书写css的步骤应该按照由外及内，由上至下，由左到右的顺序。
black-board.css
.black-board{ width: 220px; background-color: #f9f9f9; } .book-con{ padding: 10px; border:1px solid #eaeaea } .black-board h2{ font-size: 16px; } .black-board ul{ padding-top: 14px; padding-left: 20px; } .black-board li{ line-height: 22px; }
youlu-blackboard.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="black-board.css"> </head> <body> <div class="black-board"> <div class="book-con"> <h2>黑板报</h2> <ul> <li><a href="#">2020秋季延迟发货开启</a></li> <li><a href="#">分享领佣金</a></li> <li><a href="#">助力2020开学季！包邮政策再</a></li> <li><a href="#">邀请有礼</a></li> </ul> </div> <div class="book-con"> <h2>购物指南</h2> <ul> <li><a href="#">支付宝担保交易，安全快捷</a></li> <li><a href="#">保证24小时之内发货</a></li> <li><a href="#">赠送积分，积分可用于支付</a></li> <li><a href="#">收货后7天内可以无理由退货</a></li> <li><a href="#">提供电子商务小包、EMS、快递</a></li> <li><a href="#">配送造成的所有损失由我们承担</a></li> <li><a href="#">提供免费短信提醒服务</a></li> </ul> </div> <div class="book-ad-con"> <img src="img/zhinan.jpg" alt=""> </div> </div> </body> </html>
元素分类
行级（内联）元素
块级元素
内联块元素
