前端学习日记-log1

本文最后更新于：3 个月前

现在网上有很多学习编程的网站和资料，例如W3school、菜鸟教程，我选择的是慕课网

我决定先从html基础开始，免费课程：初识HTML+CSS

日志随笔

1. html基础的标签知识

基础的标签其实大学里面都学习过了，复习一下

2. css样式属性

内联、嵌入、外部三种写法，优先级：内联>嵌入>外部

3. css调用，标签选择、类选择、ID选择、子选择等

熟练调用，合并相同属性，简化写法

4. 元素分类，盒子模型

块状元素、内联元素（行内元素）、内联块状元素

常用的块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素：<img>、<input>

5. 盒子模型

盒子模型：margin、border、padding

6. css布局模型
  • 流动模型

流动（Flow）是默认的网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

  • 浮动模型

任何元素在默认情况下是不能浮动的，但可以用css定义为浮动，如div、p、table、img等元素都可以被定义为浮动。

1
2
float:left;
float:right;
7. 层模型

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作

  • 绝对定位(position: absolute)

这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

  • 相对定位(position: relative)

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

  • 固定定位(position: fixed)

由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

练习：box4在box3标签内，把box4定位到box3的底部。

代码如下，通过相对定位(position: relative)和绝对定位(position: absolute)配合达到效果

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>

		<style type="text/css">
			#box3 {
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
			}
			#box4 {
				border: 1px solid black;
				width: 100%;
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="box3">
			<div id="box4">测试文字</div>
		</div>
	</body>
</html>

未完待续