学习总结

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的知识基本学习完了，内容还是有很多的，需要多加练习加以消化，并且将前面学习的知识联合起来使用更是存在问题，需要多多做项目加以练习，熟能生巧