html css的标签

html:负责网页结构的
css:负责网页样式的
html:由标签组成
单标签：没有内容
双标签：开始标签和结束标签可以放内容的
所有写在元素开始标签之中的都是该标签的属性
<!DOCTYPE html>用来声明文档类型
<html></html>代表了整个网页，这个元素包裹了整个完整的页面，是一个根元素。
<head></head>用来写网页的一些配置信息
<meta charset = "UTF-8>"声明文档的编码格式
<title></title>负责网页标题
<body></body>负责网页内容
格式：标签换行，开始标签和结束标签要对齐（一条竖线）
子父级之间相差一个tab键

网页布局

给元素/标签加样式

1.样式分类:
（1）内联/行内样式：写在元素开始标签里面的方式
（2）内部样式：写在head里的style标签里需要大括号包裹
   class属性：可以重名
   class命名规范：不能用中文，不能用特殊符号（除了_‐）不能用纯数字不能以数字打头，不能用大写字母，不能有空格见名知意
   id属性:不能重名
（3）外部样式: link rel = "stylesheet" href="1.css"
（4）样式的优先级
!important>内联样式>内部样式(id>class>标签名)(后>前)
内部样式=外部样式
(5)权值计算公式：
权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数；
2.路径
href后面跟的是路径
绝对路径：不需要参照物 www.baidu.com
相对路径：有参照物的,参照的是当前文件 15 权值计算公式： 16 权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数；

改变元素位置

1.margin(外边距)

设置值

  当只指定一个值时，该值会统一应用到全部四个边的外边距上。
  指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
  指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
  指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

margin问题：

1.margin塌陷：

子父级之间，顶部想隔开距离，给子集加margin‐top会发生塌陷，也就是这个margin会加在父级身上，导致父级整体往下移（浮动元素除外）

2.margin合并：

在垂直方向上，同级，临边margin会合并为一个，取较大值

2.padding(内边距)

padding问题：

会自动的增宽或者增高，所以我们要主动的减去对应的宽高

3.position(定位)

absolute(绝对定位)：

想改变谁的位置，就给谁加绝对定位，需要给top left right bottom, 绝对定位的元素默认参照的是已定位的父级元素，就近

realtive（相对定位）:

想以谁当作参照，就给谁加相对定位

fixed（固定定位）：

几乎等同于绝对定位，只不过参照物不同，参照物是我们的浏览器

定位问题：

绝对定位和的固定定位的元素不占位置（脱离文档流）
脱离文档流：该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。

浮动：float:left/right

希望哪几个元素在一行上显示，那么就给哪几个元素加浮动

问题：

半脱离文档流，不占位置，但是如果其他盒子内有文字，文字会卡住

解决：

clear:both 需要放在所有浮动元素之后，并且是同级关系。页面中有几处浮动，那么就需要清除几次

html&css学习记录(一):标签 网页布局 改变元素位置 浮动