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

作者: 薛定谔的猫狗 | 来源:发表于2019-01-17 19:37 被阅读0次

网页布局

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

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

<div>
    This is a div
</div>

布局相关的属性

常用属性有：

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

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

padding / margin

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

无padding无margin

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test-panel{
                border: 1px solid red;              
            }
            #test-panel label{
                border: 1px solid blue;

            }
        </style>
    </head>
    <body>
        <div id="test-panel">
            <label> Java </label>
            <label> Android </label>
        </div>
    </body>
</html>

效果图

父元素有padding，无margin

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test-panel{
                border: 1px solid red;  
                padding: 12px;          
            }
            #test-panel label{
                border: 1px solid blue;

            }
        </style>
    </head>
    <body>
        <div id="test-panel">
            <label> Java </label>
            <label> Android </label>
        </div>
    </body>
</html>

效果图

子元素有margin，无padding

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test-panel{
                border: 1px solid red;  
            
            }
            #test-panel label{
                border: 1px solid blue;
                margin: 12px;
            }
        </style>
    </head>
    <body>
        <div id="test-panel">
            <label> Java </label>
            <label> Android </label>
        </div>
    </body>
</html>

效果图

子元素有margin，父元素有padding

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test-panel{
                border: 1px solid red;  
                padding: 12px;
            }
            #test-panel label{
                border: 1px solid blue;
                margin: 12px;
            }
        </style>
    </head>
    <body>
        <div id="test-panel">
            <label> Java </label>
            <label> Android </label>
        </div>
    </body>
</html>

image.png

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

Box模型

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

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .test{
                border: 4px solid red;  
                padding: 16px;
                margin: 8px;
                width: 200px;
                height: 50px;
            }   
        </style>
    </head>
    <body>
        <button class="test"> Android </button>
        <div class="test">
            Java
        </div>
    </body>
</html>

图中有两个标签，分别是<div>和<button>，并且都是使用的相同样式的类选择器

效果图
在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.<button>默认为 box-sizing:border-box
2.<div>默认为 box-sizing:content-box

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

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

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

行内元素与块元素

我们先来看一个示例

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
    </head>
    <body>
        <label style="border: 1px solid blue; width: 200px;"> Java </label>
        <label style="border: 1px solid blue; width: 200px;"> C++ </label>
        
        <div style="border: 1px solid blue;"> Java </div>
        <div style="border: 1px solid blue;"> C++ </div>
    </body>
</html>

在chrome中显示的是

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

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

行内元素的对齐

针对于行内元素的对齐，例如，一个<div>里有3个<button>：

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test{
                border: 1px solid red;
                height: 300px;
                width: 500px;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <button> 确定 </button>
            <button> 取消 </button>
            <button> 新建 </button>
        </div>
    </body>
</html>

效果图

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

设置水平对齐

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test{
                border: 1px solid red;
                height: 300px;
                width: 500px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <button> 确定 </button>
            <button> 取消 </button>
            <button> 新建 </button>
        </div>
    </body>
</html>

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

设置竖直对齐

竖直对齐分为两步：

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

例如：

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            #test{
                border: 1px solid red;
                height: 300px;
                width: 500px;
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <button style="vertical-align: top;"> 确定 </button>
            <button style="vertical-align: middle;"> 取消 </button>
            <button style="vertical-align: bottom;"> 新建 </button>
        </div>
    </body>
</html>

竖直对齐

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

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

默认位置定位`position:static`

默认值为static。默认地，按各个<div>出现的顺序依次布局
注：这个顺序称为 正常文档流 （Normal Flow）

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .main{
                margin: 50px;
                border: 1px solid red;
                width: 500px;
                height: 400px;
            }
            #div1{
                background-color: cornflowerblue;
                width: 100px;
                height: 100px;
            }
            #div2{
                background-color: yellow;
                width: 100px;
                height: 100px;
            }
            #div3{
                background-color: #ccc;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="div1">1</div>
            <div id="div2">2</div>
            <div id="div3">3</div>
        </div>
    </body>
</html>

默认显示效果

相对位置定位`position:relative`

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

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

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .main{
                margin: 50px;
                border: 1px solid red;
                width: 500px;
                height: 400px;
            }
            #div1{
                background-color: cornflowerblue;
                width: 100px;
                height: 100px;
            }
            #div2{
                background-color: yellow;
                width: 100px;
                height: 100px;
                /*修改地方*/
                position: relative;
                left: 50px;
                top: 50px;
                /*修改地方*/
            }
            #div3{
                background-color: #ccc;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="div1">1</div>
            <div id="div2">2</div>
            <div id="div3">3</div>
        </div>
    </body>
</html>

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

绝对位置定位`position:absolute`

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

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .main{
                margin: 50px;
                border: 1px solid red;
                width: 500px;
                height: 400px;
                /*修改部分*/
                position: relative;
            }
            #div1{
                background-color: cornflowerblue;
                width: 100px;
                height: 100px;
            }
            #div2{
                background-color: yellow;
                width: 100px;
                height: 100px;
                /*修改部分*/
                position: absolute;
                left: 50px;
                top: 50px;
                /*修改部分*/
            }
            #div3{
                background-color: #ccc;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="div1">1</div>
            <div id="div2">2</div>
            <div id="div3">3</div>
        </div>
    </body>
</html>

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

固定位置定位`position:fixed`

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

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

<html>
    <head>
        <meta charset="utf-8" />
        <title>Test0116</title>
        <style>
            .main{
                margin: 50px;
                border: 1px solid red;
                width: 500px;
                height: 1000px;
            }
            #div1{
                background-color: cornflowerblue;
                width: 100px;
                height: 100px;
            }
            #div2{
                background-color: yellow;
                width: 100px;
                height: 100px;
                
                position: fixed;
                top: 50px;
                left: 0px;
            }
            #div3{
                background-color: #ccc;
                width: 200px;
                height: 200px;
                position: fixed;
                bottom: 100px;
                right: 0px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="div1">1</div>
            <div id="div2">2</div>
            <div id="div3">3</div>
        </div>
    </body>
</html>

固定位置定位

小结

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

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

网页布局

布局相关的属性

padding / margin

Box模型

行内元素与块元素

行内元素的对齐

设置水平对齐

设置竖直对齐

默认位置定位`position:static`

相对位置定位`position:relative`

绝对位置定位`position:absolute`

固定位置定位`position:fixed`

小结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

网页布局

布局相关的属性

padding / margin

Box模型

行内元素与块元素

行内元素的对齐

设置水平对齐

设置竖直对齐

默认位置定位position:static

相对位置定位position:relative

绝对位置定位position:absolute

固定位置定位position:fixed

小结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

默认位置定位`position:static`

相对位置定位`position:relative`

绝对位置定位`position:absolute`

固定位置定位`position:fixed`