HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示
教程配套源码资源
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:
border box:
总结一下：
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
h1标签的上下外边距为21.440px
ul标签的上下外边距也为16px，左内边距也为40px
重置默认样式
为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (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;
}
取色器工具
用来拾取演示，和测量长度的轻量级工具。
双击执行
弹出取色器，点击按钮
测量宽高
选择屏幕标尺
测量
拾取颜色
选择屏幕取色器
随意选取颜色
练习 有路网右侧黑板报
我们书写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>
元素分类
行级（内联）元素
块级元素
内联块元素
行级元素
a
strong
em
内嵌元素的特性：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin
span
span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。
通常用来着重显示某行文字中的某个单词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{font-size:14px;}
p .show,.rd span{font-size:36px; font-weight:bold; color:blue;}
p #dream{font-size:24px; font-weight:bold; color:red;}
</style>
</head>
<body>
<p>积极推进<span class="show">“科学融入教育”</span>提供优质教育服务</p>
<p>在东部数据，有一群人默默支持你成就<span id="dream">IT梦想</span></p>
<p class="rd">选择<span>东部数据</span>，成就你的梦想</p>
</body>
</html>
块级元素
p
div
h1~h6
ol-li
ul-li
dl-dt-dd
块元素的特性
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
练习 有路网左侧图书分类
left-category.css
.index-sort{
width: 208px;
border: 1px solid #dcdcdc;
border-top: 0;
background-color: #FFFFFF;
}
.index-sort li{
border-bottom: 1px dotted #dcdcdc;
padding: 0 10px 12px 26px;
}
.index-sort li h2{
font-size: 14px;
line-height: 28px;
padding-left: 8px;
}
.index-sort a{
line-height: 20px;
margin: 0 3px;
}
.index-sort .yl-all-index{
font-size: 14px;
line-height: 20px;
padding: 10px;
}
youlu-left-category.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="left-category.css">
</head>
<body>
<div class="index-sort">
<ul class="cat-menu">
<li>
<h2>
经济管理
</h2>
<div class="min-sort">
<a href="#">市场营销</a>
<a href="#">经济学理论</a>
<a href="#">国际贸易</a>
<a href="#">物流管理</a>
<a href="#">管理学原理</a>
<a href="#">财务管理</a>
</div>
</li>
<li>
<h2>
文学艺术
</h2>
<div class="min-sort">
<a href="#">设计</a>
<a href="#">音乐</a>
<a href="#">青春文学</a>
<a href="#">绘画</a>
<a href="#">人物传记</a>
<a href="#">外国文学</a>
</div>
</li>
<li>
<h2>
人文社科
</h2>
<div class="min-sort">
<a href="#">数学</a>
<a href="#">英语教材</a>
<a href="#">化学</a>
<a href="#">日语</a>
<a href="#">生物科学</a>
<a href="#">专业英语</a>
</div>
</li>
<li>
<h2>
科学技术
</h2>
<div class="min-sort">
<a href="#">语言与编程</a>
<a href="#">电子通信</a>
<a href="#">电工电子</a>
<a href="#">数据库</a>
<a href="#">建筑工程</a>
<a href="#">土木工程</a>
</div>
</li>
<li>
<h2>
生活休闲
</h2>
<div class="min-sort">
<a href="#">家庭保健</a>
<a href="#">美食烹饪</a>
<a href="#">导游必备</a>
<a href="#">地理学理论</a>
<a href="#">动漫卡通</a>
<a href="#">球类</a>
</div>
</li>
<li>
<h2>
教育考试
</h2>
<div class="min-sort">
<a href="#">教学理论</a>
<a href="#">自考</a>
<a href="#">研究生考试</a>
<a href="#">考研英语</a>
<a href="#">公务员考试</a>
<a href="#">初高中用书</a>
</div>
</li>
</ul>
<h2 class="yl-all-index">
<a href="#">浏览所有图书分类</a>
</h2>
<div class="book-ad-first">
<a href="#">
<img src="img/haoshu.jpg" alt="新书推荐"/>
</a>
</div>
</div>
</body>
</html>
内联块元素—代表元素img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
</body>
</html>
display属性
控制元素的显示和隐藏
块级元素与行级元素的转变
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 内联块元素
none 设置元素不会被显示
练习 有路网help导航
help-nav.css
.help{
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.help a{
border-right: 1px solid gray;
padding-right: 4px;
padding-left: 2px;
}
.help .last{
border-right: 0
}
youlu-help-nav.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="help-nav.css">
</head>
<body>
<div class="help">
<a href="#">如何购买</a>
<a href="#">如何支付</a>
<a href="#">旧书缺货怎么办</a>
<a href="#">配送方式与配送费</a>
<a href="#">普通会员与VIP会员</a>
<a href="#">有路积分说明</a>
<a href="#">有路礼券说明</a>
<a href="#">账户余额说明</a>
<a href="#">退款退货说明</a>
<a href="#" class="last">电子书购买说明</a>
</div>
</body>
</html>
练习 有路网顶部导航
top-nav.css
.topBar{
height: 30px;
line-height: 30px;
width: 1200px;
margin: 0 auto;
background-color: #f4f4f4;
}
.topBar .topBarL{
display: inline-block;
margin-right: 536px;
}
.topBar .topBarR{
display: inline-block;
}
.topBar .topBarR li{
display: inline-block;
}
.topBar .topBarR li a{
border-right: 1px solid gray;
padding-left:4px;
padding-right: 6px;
}
.topBar .login{
color: red;
}
.topBar .topBarR .last a{
border-right: 0;
}
youlu-top-nav.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="top-nav.css">
</head>
<body>
<div class="topBar">
<div class="topBarL">
<img src="img/welcome.jpg" alt="">
<span>您好，欢迎光临有路网！</span>
</div>
<ul class="topBarR">
<li>
<a href="#" class="login">请登陆</a>
<a href="#" class="regist-link">免费注册</a>
</li>
<li><a href="#">我的有路</a></li>
<li>
<a href="#">我要开店</a>
</li>
<li>
<a href="#">团购批发</a>
</li>
<li><a href="#">客服服务</a></li>
<li>
<a href="#" class="menu-btn">
<img src="img/ico_phone.gif" />手机有路</a
>
</li>
<li class="last">
<a href="#" class="menu-btn">微信公众号</a>
</li>
</ul>
</div>
</body>
</html>
背景图像
背景图像
background-image属性
background-image:url(图片路径);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 600px;
background-image: url("images/book.jpg");
}
</style>
</head>
<body>
<div>
摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 600px;
background-image: url("images/book.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>
背景定位
background-position属性
Xpos Ypos
单位：px
Xpos表示水平位置，Ypos表示垂直位置
X% Y%
使用百分比表示背景的位置
X、Y方向关键词
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 600px;
border: 1px solid red;
background-image: url("images/book.jpg");
background-repeat: no-repeat;
background-position: bottom right;
/* background-position: 50% 50%; */
}
</style>
</head>
<body>
<div>
摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>
给黑板报的列表项目前面加上小圆点背景图像
.black-board li{
line-height: 22px;
padding-left: 6px;
background: url('img/point.gif') no-repeat left center;
}
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型的更多相关文章
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- web前端该怎么入门?web前端入门教程(非常详细)
初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! ...
- HTML5+CSS3前端开发资源整合
HTML5+CSS3前端开发资源整合 推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...
- Web前端入门教程之浏览器兼容问题及解决方法
JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...
- HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
- 《Ruby语言入门教程v1.0》学习笔记-01
<Ruby语言入门教程v1.0> 编著:张开川 邮箱:kaichuan_zhang@126.com 想要学习ruby是因为公司的自动化测试使用到了ruby语言,但是公司关于ruby只给了一 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 12 . Kubernetes之Statefulset 和 Operator
Statefulset简介 k8s权威指南这样介绍的 "在Kubernetes系统中,Pod的管理对象RC.Deployment.DaemonSet和Job都面向无状态的服务.但现实中有很多 ...
- H5+CSS复习笔记（全）
1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...
- python学习笔记之数据类型（二）
上一篇博客,小波介绍了python的入门和简单流程控制,这次写python的数据类型和各种数据类型的内置方法. 一.数据类型是何方神圣? 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当 ...
- jmeter设置HTTP代理，录制APP脚本
1.打开jmeter,“工作台”右键——“添加”——“非测试元件”——“HTTP代理服务器” 2.设置端口号,手机需与这里的端口号一致 3.新建线程组,“测试计划”右键——“添加”——“Threads ...
- 北航2018级算法期末上机实录随笔1st
简单记录下题目类型和做题情况,理性复习同时也希望提供一些参考 题目描述 共计八个题目,按照助教的划分,题目分类如下 一个签到(二分查找),两个板子(活动选择.KMP(洛谷kmp模板题)),一个板子变形 ...
- 最大熵原理（The Maximum Entropy Principle）
https://wanghuaishi.wordpress.com/2017/02/21/%E5%9B%BE%E8%A7%A3%E6%9C%80%E5%A4%A7%E7%86%B5%E5%8E%9F% ...
- 大牛聊Java并发编程原理之 线程的互斥与协作机制
可能在synchronized关键字的实现原理中,你已经知道了它的底层是使用Monitor的相关指令来实现的,但是还不清楚Monitor的具体细节.本文将让你彻底Monitor的底层实现原理. 管程 ...
- bzoj3223Tyvj 1729 文艺平衡树
bzoj3223Tyvj 1729 文艺平衡树 题意: 一个数列,支持区间翻转操作. 题解: splay裸题.注意涉及到区间操作的一般用splay不用treap. 代码: #include <c ...
- LINQ多表查询
#region Group,Join //只有join,没有into,内联(inner join) //var sql = from c in sdb.Classic // join s in sdb ...
- maven 将jar包添加本地仓库源
有如下jar包 zxing3.2.1.jar zxingcore.jar QRCode.jar 存在于本机目录 D:\Program Files\eclipse_workspace\webapp\We ...