1429次阅读
盒子模型

欣欣说我的html代码太长,可以用类,在网上找了一下,原来全名叫类选择器,除了类选择器,还有元素选择器,可以直接作用在html元素上。赶紧来试一试,把上节的例子重写一下吧。

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
  body {
    background-color: #F9F9F9;
  }
  .outDiv {
    width: 1120px;
    height: 2200px;
    background-color: #FFFFFF; margin: 0px auto;
  }
  .topDiv {
    width: 1100px;
    height: 90px;
    margin: 0px auto;
  }
  .logoDiv {
    width: 370px;
    height: 90px;
    background-color: #BEBEBE;
    float: left;
  }
  .adDiv {
    width: 730px;
    height: 90px;
    background-color: #0C5A8D;
    float: left;
  }
  .navDiv {
    width: 1100px;
    height: 55px;
    background-color: #FFFFFF;
    margin: 0px auto;
  }
  .midDiv {
    width: 1100px;
    height: 2000px;
    background-color: #FFFFFF;
    margin: 0px auto;
  }
  .borderDiv {
    width: 180px;
    height: 2000px;
    background-color: #EFEFEF;
    float: left;
  }
  .torDiv {
    width: 740px;
    height: 2000px;
    ackground-color: #FFFFFF;
    float: left;
  }
  .bottomDiv {
    width: 1100px;
    height: 55px;
    background-color: #B6B6B6;
    margin: 0px auto;
  }
</style>
</head>
<body>
  <div class="outDiv">
    <div class="topDiv">
      <div class="logoDiv">W3School</div>
      <div class="adDiv">广告</div>
    </div>
    <div class="navDiv">导航栏</div>
    <div class="midDiv">
      <div class="borderDiv">课程表</div>
      <div class="torDiv">教程</div>
      <div class="borderDiv">工具箱</div>
    </div>
    <div class="bottomDiv">尾部栏</div>
  </div>
</body>	
check the result

这样看起来果然html代码清爽多了,div通过类选择器来指定样式,body的样式则是通过元素选择器来指定的。值得注意的是:1、样式都是写在style标签中,这个标签是放在head里面的;2、类选择器定义的时候前面以点开头,引用的时候用class,不需要加点哦;3、元素选择器前面不需要加点,也不需要引用。这部分知识还挺深的,以后再研究吧,不然就本末倒置了。

来看看重点:盒子模型。其实在W3School中就有介绍,在这里,看完这个我就彻底明白了,原来我们设置div的width和height,只是最内部的,还有内边距padding和外边距margin,还可以通过border设置边框,来个例子试试:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
  body {
    margin : 0px;
    padding : 0px;
  }
  .box {
    width : 100px;
    height : 100px;
    background-color : blue;
    padding : 10px;
    border : 10px solid red;
    margin : 20px;
  }
</style>
</head>
<body>
  <div class="box">内部文字</div>
</body>	
check the result

这可是一个不折不扣的盒子,可以看到,由于margin的存在,盒子离浏览器边界有距离,由于padding的存在,内部文字与边框也隔了一定距离。在例子中有两点要注意,一是把body的margin和padding设为0了,这是因为body默认是有padding的,如果你细心的话,就会发现,上节的例子中,div并没有贴着浏览器,这就是最好的证据;二是border的设置,一次用了三个样式,这种方法还是第一次见吧。

这个例子是比较重要的,一定要反复琢磨,可以把其中一些样式去掉,再看看效果来理解。

盒子模型和float结合起来,就可以做出一个排列,来看个小例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
  .outDiv {
    width : 360px;
    height : 360px;
    background-color : pink;
  }
  .box {
    width : 100px;
    height : 100px;
    margin : 10px;
    float : left;
    background-color : blue;
  }
</style>
</head>
<body>
  <div class="outDiv">
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
    <div class="box">内部文字</div>
  </div>
</body>	
check the result

怎样?九个小盒子均匀地分布在一个大盒子里面,这里面的margin和width、height之间的关系,能看出来的话就说明这节搞懂了。

我明白盒子模型的意义了,很多网页上都有一块一块的区域,这些都是盒子模型的应用吧,看来这节真的很重要啊!

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录