20200817

学习总结

1.页面布局

position:static 普通流定位,又文档流定位,页面元素的默认定位方式

position:relative 相对定位,相对于自己原来的位置偏移,不脱离文档流,被修饰时,元素被确定为已定位元素,多用于父级元素修饰,给子级元素做绝对定位的偏移标记,或者自身位置的微调

position:absolute 绝对定位,脱离文档流,绝对定位的元素将变成块级元素,相对于最近的已定位的祖先元素的内容的左上角做偏移

position:fixed 固定定位,脱离文档流,被修饰的元素变为块级元素,相对于浏览器做偏移

,不会随页面滚动发生位置变化

常使用子绝父相进行页面布局

2.浮动定位

元素脱离文档流,不占据页面空间,但依然会显示,后续元素上前补位,浮动元素依然在父元素包含框内,只会在当前行进行浮动,父元素显示不下所有浮动元素自动换行

浮动元素浮动后,会变为块级元素,但是如果没有设置宽度,则以内容为准

文本、行内元素、行内块元素遇到浮动元素,不会被浮动元素遮盖,而是围绕浮动元素显示

clear:both 清除前面浮动元素的影响,不在补位

高度坍塌:块级元素如果没有设置高度,默认靠内容撑开,但给子元素设置浮动后,子元素脱离文档流,不占据位置,块级元素认为自己内部没有内容,所以高度为0

​ 解决:①为父元素设置高度,但一般不能明确知道具体高度 ②为父元素设置浮动,但影响后续的元素 ③设置overflow,但会影响内容溢出显示 ④父元素设置display:table 改变盒模型属性,造成其他问题 ⑤最后追加一个div 设置清除浮动 ⑥使用伪元素内容成成的方式清除浮动

3.元素的堆叠顺序

只有已定位的元素才能设置堆叠顺序,同样层级,后定位元素堆叠顺序高

浮动和定位不是一个体系,不能比较,浮动只在一层,不能设置,定位可以设置堆叠顺序,不论堆叠顺序怎样取值,浮动在上面显示

4.CSS隐藏元素 display、visibility、opacity的区别

display: none; 该方法会改变页面布局。①元素彻底消失,脱离文档流。②子元素跟随父元素被隐藏,并且无法单独显示。③绑定的事件也无法触发。④无论如何,DOM节点还是存在的,仍旧可以用 js 操作。

opacity: 0; 该方法不会改变页面布局。①实际上是元素的透明度为0。②子元素 opacity:1 是无效的,元素仍旧无法显示。③绑定的事件仍旧可以触发。

visibility:hidden; 该方法不会改变页面的布局。①使元素不可见。②子元素设置 visibility:visible; 后,子元素会显示,但是父元素不会显示。③绑定的事件不能触发。

5.弹性布局

display:flex 设置元素为弹性容器,子级元素为弹性项目

fiex-direction 设置主轴方向 row默认值,主轴x轴,起点左边;row-reverse主轴x轴,起点相反 column主轴y轴,起点顶端;column-reverse主轴y轴,起点相反

flex-wrap 设置项目换行 nowrap默认值,不换行;wrap换行;wrap-reverse向上换行

justify-content 设置主轴对齐方式 space-between两端对齐,两端无空白 space-around两端对齐,两端有空白

align-items 设置交叉轴对齐方式 baseline交叉轴基线对齐 stretch项目不写搞,沾满交叉轴所有空间

order 对单个项目设置,设置在主轴上的排列顺序,默认为零,可以取负值

flex-grow 对单个项目设置,定义弹性容器剩余的空间,按比例放大

flex-shrink 对单个项目设置,定义超出弹性容器的空间,按比例缩小

flex-basis 设置项目的尺寸,默认为auto按项目设置的尺寸,设置后具体数值后,之前设置的尺寸无效

简写:flex-grow flex-shrink flex-basis

align-self 对单个项目设置,定义项目在交叉轴上的位置

心得体会

今天css的知识基本学习完了,内容还是有很多的,需要多加练习加以消化,并且将前面学习的知识联合起来使用更是存在问题,需要多多做项目加以练习,熟能生巧

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1