CSS学习

最新推荐文章于 2023-05-10 00:13:21 发布

phoebe_l_

最新推荐文章于 2023-05-10 00:13:21 发布

阅读量198

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_58614993/article/details/119709976

版权

本文详细介绍了CSS布局的三种主要技术：浮动布局、伸缩盒布局和定位布局。包括浮动元素如何脱离文档流、伸缩盒的主轴与交叉轴概念、以及不同类型的定位如相对、绝对、固定和粘滞定位的工作原理。同时，还提到了媒体查询在响应式设计中的应用。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    默认文档流 （y轴）
 块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列
 
布局
 
浮动布局（x轴）
 float:left
 浮动元素： 
  脱离文档流
块元素的宽度不再是100%，由内容决定
块元素不再支撑其父元素
同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
 clear
 清理浮动
 left 不与左浮动元素在同一水平线上
 right 不与右浮动元素在同一水平线上
 
伸缩盒布局（x轴）
 div.container > div
 ul.container > li
 
概念
 伸缩盒容器 div.container 、ul.container
 伸缩盒元素 div、li
 主轴 默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
 交叉轴 与主轴垂直的轴
 2) 规则
 伸缩盒容器
 display:flex;
 强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
 flex-direction:row;
 定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
 flex-wrap:nowrap
 当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
 align-items: stretch;
 定义伸缩盒容器中

                