前端学习总结

一：本周学习

html：网页结构、标签、属性、注释、实体、路径

css：选择器、元素、背景、浮动、定位、盒子模型、布局

二：部分学习内容分享

1.若属性值相同，后来居上

2.数字后不加单位

3.只有定位的盒子才有z-index属性

定位的特殊性:

绝对定位和固定定位也和浮动相似（都脱标）

1.行内元素添加绝对定位或固定定位，可直接设置高度和宽度

2.块级元素添加绝对定位或固定定位，若不给宽度或高度，默认大小是内容大小

3.脱标的盒子不会触发外边距塌陷（外边距合并）

4.绝对定位和固定定位会完全压住下面标准流的所有内容，浮动会压住下面标准流的盒子，但不会压住文字或图片（浮动最初就是为了做文字环绕效果）

三、网页布局总结

1.标准流

可让盒子上下或左右排列，垂直的块级盒子显示用标准流布局

2.浮动

让多个块级元素一行显示或左右对齐盒子

3.定位

最大特点是有层叠概念，若元素自由的在某个盒子中移动就用定位

浮动特性:

1.如果块级元素未设置宽度，默认和父级一样宽，但添加浮动后，具有行内块元素特性，宽度根据内容来决定

2.任何元素都可以添加浮动，添加之后都具有行内块元素特性

3.一个大盒子中有多个小盒子，如果其中一个小盒子浮动了，那么其他小盒子也要浮动

4.浮动的盒子只会影响后面的标准流，不会影响前面的标准流

浮动经常和标准流的父级搭配使用

控制浮动盒子的外边距时如果要清除某个盒子的外边距，一定要注意权重问题！