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

迈不过友情╰ 2022-09-18 02:00 134阅读 0赞

# 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 图解 ##

① 每个元素都可以看成一个盒子  
② 找准参照物

![SouthEast][]

![SouthEast 1][]

##  2.3 示例  ##

注:  
① body\{width:800px;height:\}  
使用width/height属性,需要指定doctype为 xhtml  
  
② margin: 0 auth;  
上下为0, 左右居中, 自动调整  
  
③ 坐标体系  
  
原点 : 左上角  
X 轴 : 水平,向右  
Y 轴 : 垂直,向下  
  
④ padding过大,盒子会撑开  
margin过大,盒子不会变,但内容跑出盒子了  
因此, 尽量使用margin布局

![SouthEast 2][]

<!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>

[SouthEast]: /images/20220828/1d905aee3d4b4b4a9386dece142ac399.png
[SouthEast 1]: /images/20220828/9473b7c12577464fb9201a7276018231.png
[SouthEast 2]: /images/20220828/93543af3b08843bebf9f5bf00e17a6e6.png