学习总结

1.页面布局

普通流定位：position:static;相对定位：position:relative;绝对定位：position:absloute;固定定位：position:fixed;浮动定位：float

注意点：子绝对父相对。

解决高度坍塌的问题：

1.给父元素设置高度，缺点：不是每次都可以知道具体高度；

2.给父元素设置浮动，缺点，会影响父元素后续元素

3.为父元素设置overflow:hiddenn;缺点，如果有内容要溢出显示（弹出菜单，也会被一同隐藏）

4.为父元素设置display:table;缺点，盒模型属性已改，会造成其他问题

5.在父元素中追加一个空元素，设置clear:both;

6.用伪元素，然后设置clear:both;

元素堆叠：只有已定位的元素才有堆叠顺序，浮动定位没有

2.CSS常用属性

visibility：hidden:让整个元素隐藏，但是依然占位，不过元素绑定的事件不产生作用，子元素可以用visibility:visible;来单独显示；

opacity:0；实质是让元素的颜色完全透明，占位，但是元素绑定的事件依然生效，子元素不可以再显示。

display:none;直接让元素脱离文档流，不占据空间位置。子元素不可以单独显示，绑定的事件无效。

opacity和tgba透明的区别是opacity内部只要是和颜色相关的样式都会变化，rgba是只改变当前设置的颜色的透明度。

3.弹性布局

display:flex;

元素设置弹性容器之后，该元素所有的子元素都变为弹性项目，弹性项目将按照弹性布局的方式排列。

元素设置为弹性容易之后，项目的flota/clear失效，容器的vertical-align/text-aligin失效

父元素设置了宽高就没有项目根据尺寸变小的效果了

flex-direction:row/row-reverse/column/column-reverse设置主轴方向

flex-wrap:nowrap/wrap/wrap-reverse设置项目换行

flex-flow:设置主轴方向，设置项目换行

justify-content:flex-start/flex-end/center/space-between/space-around设置项目在主轴上的对齐方式

align-items:flex-start/flex-end/center/baseline/steretch设置项目在交叉轴上的对齐方式 stretch是项目不写高，占满交叉轴所有空间baseline是交叉轴基线对齐，就是交叉轴起点

项目：order是设置项目在主轴上的排列顺序

flex-grow是定义项目的放大比例

flex-shrink是定位项目的缩小比例

flex-basis是设置每个项目占据主轴的空间

简写：flex-grow flex-shrink flex-basis

设置项目在交叉轴上的位置：flex-start/flex-end/center/baseline/stretch

auto

学习心得

今天讲的内容是CSS中很重要且较为有难度的东西，其中弹性布局自己使用的并不多，还需大量练习来熟悉。