一:本周学习
html:网页结构、标签、属性、注释、实体、路径
css:选择器、元素、背景、浮动、定位、盒子模型、布局
感悟:
第一次接触前端,上手要比初学时Java快,但是做网页,感觉还是很乱,无从下手,一些标签、布局方式虽然学了,但到要用的时候却不知道用,还是要多练习。
二:部分学习内容分享
叠放次序 z-index
细节
1.若属性值相同,后来居上
2.数字后不加单位
3.只有定位的盒子才有z-index属性
定位的特殊性
绝对定位和固定定位也和浮动相似(都脱标)
1.行内元素添加绝对定位或固定定位,可直接设置高度和宽度
2.块级元素添加绝对定位或固定定位,若不给宽度或高度,默认大小是内容大小
3.脱标的盒子不会触发外边距塌陷(外边距合并)
4.绝对定位和固定定位会完全压住下面标准流的所有内容,浮动会压住下面标准流的盒子,但不会压住文字或图片(浮动最初就是为了做文字环绕效果)
网页布局总结
1.标准流
可让盒子上下或左右排列,垂直的块级盒子显示用标准流布局
2.浮动
让多个块级元素一行显示或左右对齐盒子
3.定位
最大特点是有层叠概念,若元素自由的在某个盒子中移动就用定位
浮动特性
细节
1.如果块级元素未设置宽度,默认和父级一样宽,但添加浮动后,具有行内块元素特性,宽度根据内容来决定
2.任何元素都可以添加浮动,添加之后都具有行内块元素特性
3.一个大盒子中有多个小盒子,如果其中一个小盒子浮动了,那么其他小盒子也要浮动
4.浮动的盒子只会影响后面的标准流,不会影响前面的标准流
浮动经常和标准流的父级搭配使用
控制浮动盒子的外边距时如果要清除某个盒子的外边距,一定要注意权重问题!!!!
清除浮动
必要性
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子