宽度可以不固定,一般为960/1000/1024 px 主要在电脑上
主要靠文档流的原理来布局 主要在手机上,
文档流本来就是自适应的,不需要加额外的样式
意思是在pc上固定宽度,在手机上不固定宽度,也就是一种混合布局
先定下大局,然后完善每个部分的小布局(适合老手)
先完成小布局,然后组合成大布局(适合新人)
Div+CSS布局,不一定用div,主要用CSS,
可以用main
,header
,footer,nav
,aside
语义来替代div。
首先,先问自己做的需要兼容IE吗?
需要–>用float
布局(左浮,固定宽度,不要响应式)
不需要–>只兼容最新的浏览器吗?----(是–>用grid
布局)/(不只是,还要兼容老手机–>用flex
布局)
float布局和flex布局必要时采用负margin。
现在不怎么用了,IE浏览器都换用Chromium内核了
在子元素上加floa: left
和width
在父元素上加 .dearfix
,用来包裹住里面的浮动元素。
.clrarfix:after{
content:''; /*内容为空*/
display: block;
clear: both;
}
注释:一般会留一些空间或者最后一个不设width。
如果用float布局,就不要做响应式了,这个布局是为IE准备的,手机上基本不用IE。
存在的问题:IE 6/7存在双倍margin(在float左边加上外边距,在IE 6/7下自动变双倍)
解决方法一:可以把margin减半–> IE会识别_margin-left
解决方法二:再加一个
display: inline-block;
.选择器{
...
margin-left: 10px;
_marigin-left: 5px;
/*方法一:IE会识别_margin-left*/
}
flex布局主要参考CSS tricks flex
container(英译"容器")一般用作父元素
container直接的子元素一般叫做items(英译"项目")
可以参考下面的图,紫色的是containe
r,橙色的是items
,是父子元素关系
代码如下
.container {
display: flex;
/* 或者是 inline-flex */
}
代码如下
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row
从左往右,row-reverse
从右往左,column
从上到下,column-reverse
从下到上。
类似如下
默认情况下弹性项目items都尝试放在一行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
不折行,wrap
折行,wrap-reverse
从下往上折行
类似如下
默认主轴是横轴
代码如下
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start
表示往前靠,flex-end
表示往后靠,center
表示往中间靠,space-between
表示把剩余空间放在间隙,space-around
表示把空间放在周围,space-evenly
表示平均放。
类似如下
默认次轴是纵轴
代码如下
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch
表示(默认)拉伸以填充容器(仍然遵守最小宽度/最大宽度),flex-start
表示上对齐,flex-end
表示下对齐center
表示居中对齐,baseline
表示字对齐
类似如下
很少用
代码如下
.container {
align-content: flex-start | flex-end | center | stretch |space-between | space-around | space-evenly;
}
flex-start
表示容器上;flex-end
表示容器下;center
表示容器中间,stretch
表示线条拉伸以占据剩余空间;space-between
表示项目平均分配,第一行在容器的开头,而最后一行在容器的结尾;space-around
表示项目均匀分布在每行周围;space-evenly
表示项目均匀分布,周围有相等的空间;
类似如下
可以为项目进行排序,默认order为0,按从小到大排序,列也是一样
如果所有项目都flex-grow设置为1,则容器中的剩余空间将平均分配给所有子项。接受的比例决定了项目在容器里占的空间。负数无效
.item {
flex-grow: 4; /* default默认为 0 */
}
类似如下
默认是1,大家一起瘦,一般写flex-shrink: 0;防止变瘦。宽度不够按写的比列收缩。负数无效。
.item {
flex-shrink: 3; /* default 1 */
}
收缩效果如下
.item {
flex-basis: | auto; /* default auto */
}
如果设置为0,则不考虑内容周围的多余空间。如果设置为auto,则多余空间将根据其flex-grow值进行分配.
可以将flex-grow,flex-shrink和flex-basis合并简写,第二和第三个参数(flex-shrink和flex-basis)是可选的。默认值为0 1 auto
.item {
flex: flex-grow flex-shrink flex-basis;
}
加在某一个item里,这个item可以特立独行
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*属性和align-items一样*/
}
我还是推荐两个小游戏学习flex布局和grid布局,能快速上手,更简单轻松。
https://flexboxfroggy.com/#zh-cn 带青蛙回家-flex布局
https://cssgridgarden.com/#zh-cn 种萝卜-Grid布局
我都已经通关了哦
–continue
学习前端从入门到入土,我正在路上。您的每一次观看,就是对我学习路上最大的鼓励,一起努力吧!
欢迎留下您宝贵的意见。