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

来源：互联网发布：铁拳3知乎编辑：程序博客网时间：2024/05/17 20:25

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>