初学Web笔记 css day06

PS测量使用
链接：https://pan.baidu.com/s/18QqXrZv1RU2wAZkX4EJ3VQ
提取码：z5so

CSS属性查找
https://www.w3school.com.cn/css/index.asp

一.布局标签
header 定义头部
nav 定义导航
section 定义一个区域
aside 定义侧边栏
article 定义内容(文章)
footer 定义底部
二.定位
使用定位改变盒子的位置
静态定位(默认)、相对定位、绝对定位、固定定位、粘性定位
常用的定位：相对定位、绝对定位、固定定位
1.相对定位
position: relative
相对于元素原来的位置进行定位，可以使用left/right 、top/bottom来控制水平位置和垂直的位置
(1)相对定位没有脱离文档流，还会保留原来的位置，撑开父盒子，不影响父盒子
(2)对比外边距
外边距会影响到后边的盒子，相对定位不会挤开后边的盒子0
2.绝对定位
position: absolute
绝对定位会脱离文档流，不再占位
使用绝对定位的盒子会参照离自己最近有“非静态定位”的祖先元素。
通过left/top、top/bottom控制水平和垂直位置
如果要相对于父盒子，通常给父盒子设置相对定位：子绝父相
垂直居中
top:50%; margin-top: -自身高度一半;
水平居中
Left:50%; margin-left: -自身宽度一半;
(1)行内元素定位后会块状化，具有了宽高属性
(2)定位中出现了重叠，通过z-index控制层级，值是一个整数，越大越靠前，默认是0

三.浮动特殊情况
在文档流下，浮动盒子的父盒子如果不设置高度，会出现高度塌陷
如果浮动盒子的父盒子也设置浮动，则会被子盒子撑开，不会出现高度塌陷