Web前端开发学习日记3

今天主要来学习CSS布局和定位。在我们搭建页面之前，要先对浏览器的默认样式进行清零处理。

1
2
3
4
*{
    padding:0;
    margin:0;
}

一个页面我们可以称之为容器（container），在页面上可以有以下几个模块：header，navbar，main（menu，content，sidebar），footer。
接下来我们讲两部分内容：
第一部分：元素盒子什么样，大小边框是什么样。
第二部分：元素放哪，定位是怎么样。

CSS盒子模型

页面上的区域，图片，导航栏，段落等都可以看做是盒子，每个盒子占据一定的空间。
盒子模型的组成：

  • content（内容）
  • height（高度）
  • width（宽度）
  • boder（边框）boder-top/right/bottom/left
  • padding（内边距）padding-top/right/bottom/left
  • margin（外边距）margin-top/right/bottom/left

一个盒子的实际宽度、高度：content+padding+border+margin

我们规定了盒子大小，那么如果内容超出盒子边界时，该怎么办呢？
这时候就需要用到overflow这一个属性

1
2
3
overflow: scroll;/*显示滚动条*/
overflow: hidden;/*超出部分不可见*/
overflow: auto;/*如果有超出部分则显示滚动条，没有超出正常显示*/

盒子模型重要组成部分border属性：

  • border-width（宽度）：px，thin，medium，thick
  • boder-style（样式）：dashed，dotted，solid，double
  • border-color（颜色）：red，blue
  • border（边框样式）：width style color

boder属性可以用来设置水平分割线。

盒子模型重要组成部分padding、margin属性：

  • padding/margin-top
  • padding/margin-right
  • padding/margin-bottom
  • padding/margin-left
  • padding/margin：top right bottom left （顺时针顺序）

padding/margin简写：top和bottom，right和left对应

padding/margin：1px===1px 1px 1px 1px

padding/margin：1px 2px===1px 2px 1px 2px5

padding/margin：1px 2px 3px=1px 2px 3px 2px

margin属性在垂直方向上有合并效果，浏览器在解析时，哪个盒子的margin值越大就采用哪个margin值。

1
margin: 0 auto;/*div水平居中*/

CSS定位机制

定位机制决定我们的盒子放在什么位置，定位方式可以分为以下三种：
1、文档流定位（flow）
2、浮动定位（float）
3、层定位（layer）

文档流定位
所有元素从上到下，从左到右依次排序。

  • block元素
    每个元素都独占一行，height，width，margin，padding都可以设置。
    常见的block元素有：div，p，h1~h6，ol，ul，table，form
    若要将其他元素显示为block元素，可以用display语句
    1
    a{display:block;}
  • inline元素
    不单独占一行，height，width不可设置。
    inline元素之间存在间距问题，所以导航条一般采用ul中li来实现。
    常见的inline元素有：span，a
    若要将其他元素显示为inline元素，可以用display语句
    1
    div{display:inline;}
  • inline-block元素
    不单独占一行，height，width，margin，padding都可以设置。
    常见的inline-block元素有：img
    若要将其他元素显示为inline-block元素，可以用display语句
    1
    div{display:inline-block;}

浮动定位
float属性设置浮动

  • float：left-左浮动
  • float：right-右浮动
  • float：none-不浮动

clear属性清除浮动

  • clear：both-清除盒子左右两边的浮动
  • clear：left/right-清除盒子左侧或者右侧上的浮动
  • clear：none-默认值

接下来我们利用所学知识，采用外部样式链接来搭建一个四行三列页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
*{
	padding: 0;
	margin: 0;
}/*清除浏览器默认样式*/
body{
	font-size: 14px;
}
#container{
	margin: 0 auto;/*垂直居中*/
	width: 900px;
}/*整体页面设置*/
#header{
	height: 100px;
	background-color: #6cf;
	margin-bottom: 5px;
}/*页首设置*/
#nav{
	height: 30px;
	background-color: #09c;
	margin-bottom: 5px;
}/*导航栏设置*/
#main{
	height: 500px;
	margin-bottom: 5px;
}
.aside{
	float: left;
	width: 100px;
	height: 500px;
	background-color: #6cf;
}/*侧边栏设置，相同样式采用类选择器*/
#aside1{
	margin-right: 5px;
}
#aside2{
	margin-left: 5px;
}
#content{
	float: left;
	width: 690px;
	height: 500px;
	background-color: #cff;
}/*主体设置*/
#footer{
	height: 60px;
	background-color: #6cf;
}/*页脚设置*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>第四章布局</title>
	<link rel="stylesheet" href="../CSS/布局.css">
</head>
<body>
<div id="container">
	<div id="header"></div>
	<div id="nav"></div>
	<div id="main">
		<div id="aside1" class="aside"></div>
		<div id="content"></div>
		<div id="aside2" class="aside"></div>
	</div>
	<div id="footer"></div>
</div>	
</body>
</html>

层定位
网页元素成为层，外部的网页元素称为父层，内部的网页元素称为子层。
position属性，表示定位的参照物是哪个元素：
1、position：fixed-固定定位，相对于浏览器窗口进行定位（left，right，top，bottom，z-index都可以有效设置）
2、position：relative-相对定位，相对于其直接父元素进行定位，原位置保留（left，right，top，bottom，z-index都可以有效设置）
3、position：absolute-绝对定位，相对于非static父元素进行定位，极端情况相对于body进行定位，原位置不保留（left，right，top，bottom，z-index都可以有效设置）

父元素采用相对定位方式，子元素采用绝对定位方式
z-index属性设定层次，值大的层次在上面