css实现三列布局？

css实现三列布局？

css布局-基础,单列,双列,三列现有样式
不能满足人们的需求.
人们需要:
CSS2并没有提供原生支持，所以需要将一些属性组合起来，以实现布局
国外一般不这么叫.div是一个无语义的标签，适合用来做与内容无关的事情.
只能用div吗？
优化:
省标签，便于控制局部范例
给通栏加背景色范例
IE6不支持inline-block:
范例
一列固定宽度，另外一列自适应宽度
浮动元素+普通元素margin范例
如果侧边栏在右边:
注意:考虑到浏览器的渲染顺序,
aside和main顺序不可更改.
两侧两列固定宽度，中间列自适应宽度
范例
《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：
利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。
css3笔记4盒模型,flex弹性布局,三列布局咦,感觉这个层次示意图,比较值钱!单独放一下.
触发怪异模式的条件
如果想设置滚动条样式怎么办?
三列布局
第一种绝对定位
html
css
利用vw和calc()?
float方式,
要注意html的顺序
html
scss
参考三列布局实现4种方法;
双侧翼,还真是学习了.
这样能够保证先加载中间的主要内容
html
scss
不用float用display:inline-block行不行?
这才发现float和inline-block有个挺大的区别
float时,left通过margin-left向左移动时,right会被mid卡主.
inline-block时,left通过margin-left向左移动时,right会跟着left一起移动.
双侧翼很巧妙!
css每个单句都不怎么难,但复合使用不太好掌握.
圣杯模式
html
scss
这个就更巧妙了,我真实佩服的五体投地.
首先,width和margin的百分比都是针对父级的宽度,这个宽度是content-width
不包括padding部分.
所以根据padding预留出左右的空间.
根据float的特性,左右会折行到下一行,
通过margin-left可以让float元素之间重叠,让他们回到同一行.
但重要的是,left的移动,right不会跟着移动,这和inline-block不同.
最后用relative最后再调一次位置.
实在是精妙.
css3关于position感觉非常坑人
关于百分比的基准值,这里有写.
用flex
html
scss
确实很方便,问题来了,如果我想让mid先加载怎么办?
利用order
html
scss
设置在子元素,伸缩项目上.
多余的部分会进行拉伸填充,
每个子元素的默认是为0,默认是不会拉伸填充,不变形.
如果设置,则按照比例,分割空间分配.
也就是会经过变形不超出父级.
默认值为1,按照该比例,切割子元素,
如果我们想让他们不变形且不换行,
可以把子元素的shrink值都设置为0
这就是视频和文字的差异了,
因为用文字表达要准确,所以只能说的不是人话,
实际上核心逻辑非常简单.
刚开始,我不明白这个属性有什么用处,
后来发现三列布局时,通过html顺序和order配合可以调整加载顺序.
默认值为0
如果我们想设置子元素的主轴方向的属性,
可以用grow,shrink,base,order,可以调整主轴的大小和位置
如果想谁知子元素的侧轴方向的属性,
可以用aline-item,
父元素上的flex-directionflex-wrapjustify-contentaline-itemaline-content
这几个属性,都是用来进行布局的.
非常的,,嗯强大.
我们讲主轴设为x轴,设定多行的情况,
讨论一下aline-item和aline-content的效果区别.
之前我只是笼统的知道aline-item作用在侧轴只有一行的情况.
aline-content作用在侧轴多行的情况.
而实际上aline-item对侧轴多行的情况也是有效果的,只是不一样.
html
当值为strech时,两个效果是一样的.
注意strech如果想要有效果,就必须让heigth(侧轴宽度)不是固定宽度,否则失效.
除了这三个之外,aline-content还有两个属性,
与justify-content非常类似,
如果父级relative子级当中有absolute的元素,
则该子元素不受到flex布局的影响.
flex布局时会排除该元素进行布局
至此,我觉得flex进行布局,那是真的强.
主轴和侧轴的各自控制属性基本就全了.
侧轴唯一比主轴差的属性,应该就是shink和order属性了.
好课外思考就到这里,继续看视频
CSS三栏布局实现，左右固定，中间自适应实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。
例：
此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到文字环绕问题，如下如所示。
解决办法：
补充flex左右布局，左边固定，右边自适应，并且两列等高自适应
2024-09-18