前端基础之网页布局基础（5）

网页布局

，division，划分、层，是网页布局的主要工具，使用div将网页划分为一块一块的区域，包括很多网站也是采用div进行区域划分的，比如Google，

Google

表示的是div下id为lga的标签。

    This is a div

布局相关的属性

常用属性有：

• width / height
• margin / padding
• display
• position
• z-index*

主要是利用这几个属性来完成一般的网页布局。

padding / margin

padding：填充，指得是子元素与自己的距离（这里的自己指的是父元素，站在父元素的角度设置）
margin：边距，指得自己与外部元素的距离（这里的自己指得是子元素，外部元素也是指的子元素，站在子元素的角度设置）
可以根据DOM文档对象模型视图加以理解

• 无padding无margin

    
        
        
        
    
    
        

             Java 
             Android 
        
    

效果图

• 父元素有padding，无margin

    
        
        
        
    
    
        

             Java 
             Android 
        
    

效果图

• 子元素有margin，无padding

    
        
        
        
    
    
        

             Java 
             Android 
        
    

效果图

• 子元素有margin，父元素有padding

    
        
        
        
    
    
        

             Java 
             Android 
        
    

image.png

更多组合就不再一一举例。需要注意的是，margin与padding是布局中几乎必用的元素，务必掌握牢固！

Box模型

Box模型又叫做盒模型，是网页布局的一个核心要点，打开开发者工具我们可以看到

box模型

它包含一个标签的 margin、 border、 padding、 content，这四个区域的大小。
我们先来看看box模型存在的意义

    
        
        
        
    
    
         Android 
        

            Java
        
    

图中有两个标签，分别是

和，并且都是使用的相同样式的类选择器

效果图

在chrome中打开我们发现，虽然指定的是相同的 wigth和 height，但是所展现出来的大小却完全不一样

bottun

div

我们观察他们的盒模型，发现div标签的content的尺寸满足我们所定义的样式，button标签的border以内的尺寸满足我们所定义的样式。这就引入了调整盒模型的概念，box-sizing。
box-sizing，通常使用两种值进行调整，border-box、content-box。

box模型

我们为样式加一行box-sizing

            .test{
                border: 4px solid red;  
                padding: 16px;
                margin: 8px;
                width: 200px;
                height: 50px;
                box-sizing: content-box;
            }

统一指定该样式设置的尺寸指得是content的内容

效果图

我们可以得到div标签和button标签的尺寸都是一样的了。需要注意的是，不同标签的默认box-sizing是不同的，例如：
1.

默认为 box-sizing:border-box
2.

默认为 box-sizing:content-box

对于box-sizing，不同的浏览器对它属性的兼容不同，常用的浏览器比如

• box-sizing:border-box; /* 标志属性 Chrome,IE */
• -moz-box-size:border-box; /* FireFox */
• -webkit-box-size:border-box; /* Safari */

如果需要对多种浏览器都支持的话，这几个都写上就可以。

行内元素与块元素

我们先来看一个示例

    
        
        
    
    
         Java 
         C++ 
        
        
 Java 
        
 C++ 
    

在chrome中显示的是

效果图

我们对 label和 div设置的样式都是一样的，可是在显示中，label都在一行，div独占一行，并且对label设置的宽度没有效果，而 div默认占满一行。
这是因为 label是 行内元素，不可以设置宽度和高度，而 div是 块元素，占满一行。这里引入一个 display的属性，通过设置display属性来控制它属于什么类型的元素。

• display : inline 行内元素，不可以设置宽度高度
• display : block 块元素，独占一行
• display : inline-block : 行内块元素，可以设置大小，而且不占一行（通常这个使用较多）
• display : none 不占用任何空间 （隐藏）

行内元素的对齐

针对于行内元素的对齐，例如，一个

里有3个

：

确定 取消 新建

效果图

默认情况下，子元素是水平靠左对齐，竖直靠上对齐。

设置水平对齐

设置父容器的text-align属性，可以修改水平对齐，例如：

    
        
        
        
    
    
        

             确定 
             取消 
             新建 
        
    

水平居中

其中， center 居中， left 靠左， right 靠右

设置竖直对齐

竖直对齐分为两步：

1. 指定父容器的height和line-height为等高。
2. 指定子元素的vertical-align属性

例如：

    
        
        
        
    
    
        

             确定 
             取消 
             新建 
        
    

竖直对齐

需要注意的是，这里所说的对齐，是以父元素的文字基线（baseline）

---

下面我们来学习一下三种基本的 位置定位(position)。
position属性是实现复杂布局的有效手段，position属性有四种选项，分别是
position:static默认值
position:relative 相对位置
position:absolute 绝对位置
position:fixed 固定位置

默认位置定位position:static

默认值为static。默认地，按各个

出现的顺序依次布局
注：这个顺序称为 正常文档流 （Normal Flow）

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

默认显示效果

相对位置定位position:relative

相对定位，一般要同时指定偏移位置

• 相对于原本的正常位置，添加偏移，偏移由left/top/right/bottom属性指定
• 没有脱离Normal Flow，该占的位置还是占着

注意：相对定位，并不是相对于父元素，而是相对于自己原有的正常位置

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

相对定位效果

通过观察可以发现，原有的位置依然在，说明没有脱离正常文档流。还有一点需要说明的时候，偏移值可以设置为负值，如 left:-50px;

绝对位置定位position:absolute

绝对定位，一般要同时指定偏移位置

• 相对于谁？向上找父级或父级的父级，第一个由position:absolut / position:relative属性的
• 通常都是给父元素添加relative属性
• 脱离了正常文档流，原来的位置被后来者挤占

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

绝对位置定位

通过观察我们可以发现，偏移元素的位置被后来的元素所占据，这说明的确脱离了正常文档流。
需要注意的是，需给父元素添加 position，并且通常添加 position:relative，以便可以根据父元素进行定位。如果不添加的话，通常是相对于窗口进行偏移，结果会超乎想象。

固定位置定位position:fixed

固定定位，一般要同时指定偏移位置

• 相对于谁？相对于浏览器窗口
• 脱离了Normal Flow
• 通常于z-index联用，可以调整不同悬浮窗口的优先级显示，防止被其他div遮盖

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

固定位置定位

小结

通常使用绝对位置定位和固定位置定位，而relative很少独立使用，通常使用绝对位置定位的时候，伴随absolute一并出现，relative给父元素设定，absolute给子元素设定。而fixed主要用于实现悬浮窗口