HTML5+CSS3 前端入门教程---从 0 开始通过一个商城实例手把手教你学习 PC 端和移动端页面开发第 5 章 CSS 盒子模型

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1571 天前的主题，其中的信息可能已经有所发展或是发生改变。

本教程案例在线演示

有路网 PC 端有路网移动端

免费配套视频教程

教程配套源码资源

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;
}

3 条回复 • 2020-07-31 11:26:05 +08:00

hooopo

2020-07-30 08:26:01 +08:00

有点过时建议隐藏

masker

2020-07-30 18:44:19 +08:00 via Android

这些教程，也太老了吧？不过培训机构的都是这样了

rodrick

2020-07-31 11:26:05 +08:00

恩。。是挺入门

HTML5+CSS3 前端入门教程---从 0 开始通过一个商城实例手把手教你学习 PC 端和移动端页面开发第 5 章 CSS 盒子模型

本教程案例在线演示

免费配套视频教程

教程配套源码资源

div

元素宽高

边框

边框粗细

边框样式

border 简写

外边距

外边距的妙用

内边距

盒子型模的尺寸

box-sizing

元素默认样式

重置默认样式

取色器工具

测量宽高

拾取颜色

练习 有路网右侧黑板报

元素分类

行级元素

span

块级元素

块元素的特性

练习 有路网左侧图书分类

内联块元素—代表元素 img

display 属性

练习 有路网 help 导航

练习 有路网顶部导航

背景图像

给黑板报的列表项目前面加上小圆点背景图像

练习有路网右侧黑板报

练习有路网左侧图书分类

练习有路网 help 导航

练习有路网顶部导航