前端学习笔记

CSS布局基础

纯碎是当笔记来用

参考视频：慕课网

PS：感觉会整理的非常乱

1、盒子模型

在CSS可以把Html元素看成一个三维的模型，如下图

这有利于理解CSS对样式的改变

2、列居中（用于块级元素）

2.1 把width设置为0；

2.2 margin设置为auto 0

这里的原理是auto为根据浏览器的宽度设置两边的外边距（如果此时的块级元素有浮动，则会市区居中）

3、清除浮动

（float属性是为了让block元素能在同一行出现。）

用于受到浮动影响的元素

for 一个zample

如果mainbody没有清除浮动，那么mainbody就会被覆盖。
不过这种情况下，用clear的方法是不行的。

4、position

static没什么好说的。关键是relative和绝对定位

4.1相对定位

4.2绝对定位

设置了absolute以后，会脱离文档流，width会变成零，只能靠内容撑开。
直接讲它的应用：两列布局

如果父元素没定位的话，会一直往上遍历到html
关于注意：因为绝对定位后会脱离文档流，没办法撑开父元素，所以需要用固定列来撑开

*导航条菜单

垂直菜单：利用ul
文字缩进的时候可以用text-indent

果然写的乱七八糟