CSS布局思路和布局方式目录

CSS布局思路和布局方式

雷姆2

CSS布局思路和布局方式

i. CSS布局有三种方式:

第一种是固定宽度布局

宽度可以不固定，一般为960/1000/1024 px 主要在电脑上

第二种是不固定宽度布局

主要靠文档流的原理来布局主要在手机上,
文档流本来就是自适应的，不需要加额外的样式

第三种是响应式布局

意思是在pc上固定宽度，在手机上不固定宽度，也就是一种混合布局

ii. 布局的两种思路

从小到大

先定下大局，然后完善每个部分的小布局(适合老手)

从小到大

先完成小布局，然后组合成大布局(适合新人)

iii. 布局需要用到哪些属性

~~Div~~+CSS布局，不一定用div，主要用CSS，
可以用main,header,footer,nav,aside语义来替代div。

iv. 用什么CSS布局方式呢？

首先，先问自己做的需要兼容IE吗？

需要–>用float布局(左浮，固定宽度，不要响应式)

扫描二维码关注公众号，回复： 12205643 查看本文章

不需要–>只兼容最新的浏览器吗？----(是–>用grid布局)/(不只是，还要兼容老手机–>用flex布局)

float布局和flex布局必要时采用负margin。

1. float布局

现在不怎么用了，IE浏览器都换用Chromium内核了

1.1 float布局步骤:

在子元素上加float: left和width

在父元素上加 .clearfix ，用来包裹住里面的浮动元素。

如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

 .clearfix::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*/
}

2 Flex布局

flex布局主要参考CSS tricks flex

flex container

container(英译"容器")一般用作父元素

flex items

container直接的子元素一般叫做items(英译"项目")

可以参考下面的图，紫色的是container，橙色的是items，是父子元素关系

container

items

2.1 flex container有哪些样式

① display: flex;可以让一个元素变成flex容器

代码如下

.container {
    
    
  display: flex; 
  /* 或者是 inline-flex */
}

②flex-direction改变items流动方向(主轴):

代码如下

.container {
    
    
  flex-direction: row | row-reverse | column | column-reverse;
}

row从左往右，row-reverse从右往左，column从上到下，column-reverse从下到上。

类似如下

③是否折行flex-wrap

默认情况下弹性项目items都尝试放在一行

.container {
    
    
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap不折行，wrap折行，wrap-reverse从下往上折行

类似如下

wrap

④主轴对齐方式justify-content *

默认主轴是横轴

代码如下

.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表示平均放。

类似如下

主轴对齐justify-content

⑤次轴对齐align-items

默认次轴是纵轴

代码如下

.container {
    
    
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch表示(默认)拉伸以填充容器（仍然遵守最小宽度/最大宽度），flex-start 表示上对齐，flex-end表示下对齐center表示居中对齐，baseline 表示字对齐

类似如下

次轴对齐align-items

⑥多行内容如何分布align-content

很少用

代码如下

.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表示项目均匀分布，周围有相等的空间;

类似如下

多行分布内容

2.2 flex item有哪些属性？

①order排序

可以为项目进行排序，默认order为0，按从小到大排序，列也是一样

order代码

order1(1)

②flex-grow弹性成长(变胖)

如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。接受的比例决定了项目在容器里占的空间。负数无效

.item {
    
    
  flex-grow: 4; /* default默认为 0 */
}

类似如下

grow0

grow1

③ flex-shrink控制变瘦

默认是1，大家一起瘦，一般写flex-shrink: 0;防止变瘦。宽度不够按写的比列收缩。负数无效。

.item {
    
    
  flex-shrink: 3; /* default 1 */
}

收缩效果如下

代码收缩

④flex-basis控制基准宽度
分配内容周围空间

.item {
    
    
  flex-basis:  | auto; /* default auto */
}

如果设置为0，则不考虑内容周围的多余空间。如果设置为auto，则多余空间将根据其flex-grow值进行分配.

⑤flex简写

可以将flex-grow,flex-shrink和flex-basis合并简写，第二和第三个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto

.item {
    
    
 flex: flex-grow flex-shrink flex-basis;
}

⑥align-self

加在某一个item里，这个item可以特立独行

.item {
    
    
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  /*属性和align-items一样*/
}

align-self特立独行

3 推荐快速学习方法

我还是推荐两个小游戏学习flex布局和grid布局，能快速上手，更简单轻松。

①带青蛙回家-flex布局

https://flexboxfroggy.com/#zh-cn 带青蛙回家-flex布局

②种萝卜-Grid布局

https://cssgridgarden.com/#zh-cn 种萝卜-Grid布局

我都已经通关了哦

带青蛙回家-flex布局

种萝卜-Grid布局

–continue

学习前端从入门到入土，我正在路上。您的每一次观看，就是对我学习路上最大的鼓励，一起努力吧！

欢迎留下您宝贵的意见。

ojbk

CSS入门笔记3