您的位置：首页 > Web前端 > CSS

09-DIV+CSS-流和盒子模型初识

2013-11-03 15:43 806 查看

1. 流

标准流/非标准流

① 流

在现实生活中就是流水,

在网页设计中就是指元素(标签)的排序方式



② 标准流

元素在网页中就像流水,

排在前面的元素(标签)内容先出现,

排在后面的元素(标签)内容后出现.

③ 非标准流

当某个元素(标签)脱离了标准流的排列,则为~.

即,某个div在标准流中本来第二个出现的,现在却第一个出现.

在实际网页布局中,可能需要非标准流来布局.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>flow1.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <style type="text/css">
      
      div {
        background-color: gray;
      }

      span {
        background-color: silver;
      }

      * {
        background-color: green;
      }
     
    </style>

  </head>
  <body>
    
    <div>div1</div>
    <span>span1</span>
    <span>span2</span>
    <div>div2</div>
    hello world!!

  </body>
</html>


2. 盒子模型

2.1 概念

1) 具备以下属性:

① 内容(content)

② 填充(padding)

③ 边框(border)

④ 边界(margin)

2) 理解(联系实际中的盒子)



我们可以把盒子模型关联到显示中的盒子(箱子),

日常生活中所见的盒子也具有这些属性,所以叫它盒子模型.

内容, 盒子里装的东西(贵重物品);

填充, 添加的泡沫或者其它抗震的辅料;

边框, 盒子本身;

边界, 与其他箱子的距离.

与现实中盒子不同的是,

现实中的东西体积不能大于盒子,否则盒子会坏掉.

而CSS盒子具有弹性, 要么把盒子撑大,要么东西溢出盒子一部分.

2.2 图解

① 每个元素都可以看成一个盒子

② 找准参照物





2.3 示例

注:

① body{width:800px;height:}

使用width/height属性,需要指定doctype为 xhtml

② margin: 0 auth;

上下为0, 左右居中, 自动调整

③ 坐标体系

原点 : 左上角

X 轴 : 水平,向右

Y 轴 : 垂直,向下

④ padding过大,盒子会撑开

margin过大,盒子不会变,但内容跑出盒子了

因此, 尽量使用margin布局



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
      <title>box1.html</title>
      <meta http-equiv="keywords" content="value1,value2,...">
      <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <style type="text/css">
    
      body {
        border: 1px solid red; /*给body指定边框的样式*/
        width: 800px;  /*需使用xhtml的dtd*/
        height: 1000px;
        margin: 0 auto; /*上下为0, 左右自动调整且居中*/
      }
      
      .sty1 {
        width: 140px;
        height: 140px;
        border: 1px solid blue;

        margin-top: 10px;
        margin-left: 10px;
      }
      
      .sty1 img {     /*图片为 120X120*/
        width: 120px;
        margin: 10px;
      }

    </style>

  </head>
  <body>
      
      <div class="sty1"><img src="1.jpg" /></div>

  </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航