前端基础之网页布局基础（5）
2019-01-17 本文已影响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主要用于实现悬浮窗口
