V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kamiba
V2EX  ›  分享创造

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

  •  
  •   kamiba · 2020-07-29 19:03:21 +08:00 · 2143 次点击
    这是一个创建于 1577 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本教程案例在线演示

    有路网 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
        1
    hooopo  
       2020-07-30 08:26:01 +08:00
    有点过时 建议隐藏
    masker
        2
    masker  
       2020-07-30 18:44:19 +08:00 via Android
    这些教程,也太老了吧? 不过培训机构的都是这样了
    rodrick
        3
    rodrick  
       2020-07-31 11:26:05 +08:00
    恩。。是挺入门
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1043 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:08 · PVG 07:08 · LAX 15:08 · JFK 18:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.