cssflex布局 cssflex布局分三块

flex布局优缺点

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

css3引入的flex布局优缺点：优点在于其容易上手，根据flex规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

css grid和flex哪个好

CSS Grid和Flexbox都是用于布局的强大工具，但它们具有不同的适用场景和特点，因此选择哪个更好取决于您的具体需求。

CSS Grid适用于构建二维网格布局，它将页面分成行和列，并提供了更高级的布局控制能力。一些适合使用CSS Grid的场景包括：

1. 复杂的网格布局：CSS Grid可以轻松地创建具有复杂布局结构的网格，比如多行多列的格子布局。

2. 网站的整体布局：CSS Grid非常适合定义整个网站的主要布局，例如头部、侧边栏、主内容区等。

3. 响应式设计：CSS Grid提供了强大的响应式特性，可以轻松地为不同的屏幕尺寸和设备定制布局。

而Flexbox则适合用于一维布局，它专注于将元素在一条主轴上进行排列和对齐。一些适合使用Flexbox的场景包括：

1. 单行或单列布局：如果您只需要在一条主轴上对元素进行排列，Flexbox是比较简洁和易用的选择。

2. 弹性的项目排序和对齐：Flexbox提供了灵活的对齐和排序选项，使得元素可以根据需要动态排列。

3. 响应式设计中的小组件布局：如果您需要创建小组件，例如导航栏、按钮组等，Flexbox可以让元素在容器中自适应并对齐。

综上所述，CSS Grid和Flexbox都是非常有价值的工具，选择哪个更好取决于您的具体布局需求。在某些情况下，您甚至可以结合使用这两种技术，以实现更复杂和灵活的布局效果。

html布局思路

定位布局：

主要使用position样式来进行定位元素，定位元素又可以分为绝对定位（position:absolute）和相对定位（position:relative），绝对定位的对象是脱离正常的文档流，使用top，right，bottom，left等属性进行绝对定位，其层次关系顺序可以通过z-index属性来定义。相对定位是遵循正常的文档流，top，right，bottom，left等属性在正常的文档流中进行偏移位置。

浮动布局：

主要是使用float样式来定义元素的浮动，浮动可以设为左浮动（float：left）右浮动（float：right）不浮动（float：none）当你设置了元素为浮动元素的时候元素对象的display会被自动忽略，所以浮动元素的大小由它所包含元素的大小决定。

如何清除元素的浮动的，我们可以使用clear元素来清除浮动，当clear：none的时候允许两边都可以有浮动对象、当clear：left的时候不允许左边有浮动对象、当clear：right的时候不允许有右浮动对象、当clear：both的时候不允许元素左右两边有浮动对象。

弹性布局：

弹性布局又称flex布局，可以用弹性布局来做相应式网站