20200817赵鑫

学习总结

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中很重要且较为有难度的东西,其中弹性布局自己使用的并不多,还需大量练习来熟悉。

标签

评论

this is is footer