关于弹性盒和媒体查询的那些知识！

最新推荐文章于 2023-02-27 19:24:26 发布

风~蒲公英

最新推荐文章于 2023-02-27 19:24:26 发布

阅读量467

点赞数

文章标签：弹性盒媒体查询

本文链接：https://blog.csdn.net/weixin_44269229/article/details/85399291

版权

本文深入探讨了CSS3中的弹性盒模型（Flexbox）和媒体查询（Media Queries），讲解了这两种技术如何解决复杂的布局问题，并适应不同设备的屏幕尺寸。弹性盒模型提供了更灵活的布局方式，而媒体查询则实现了响应式设计。

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

弹性盒和媒体查询

–怪异盒模型简介
浏览器对盒模型的解析一共有两种模式，一种是标准模式，另一种就是怪异模式。
一般在页面头部声明了DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。
标准盒模型和怪异盒模型的区别：
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
Css3中box-sizing：属性让两种盒模型相互转变
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
Flex布局是什么？
传统的布局方案，是基于盒模型， 依赖display+position+float， 但是对于特殊的布局就非常的不方便，如：垂直居中，2009年为w3c提出一种新方案-----flex布局
–弹性盒模型
在未来flex布局将成为布局的首选方案
Flex是flexinle Box的缩写，意思是弹性布局；用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。即：display：flex；
注：设置了flex布局后当前容器内子元素的float、clear、vertical-align属性将全部消失
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为容器项目
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）. 主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end ;交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
1、display:flex
设置为弹性盒（父元素添加）
2、flex-direction (主轴排列方向)
说明：指定了弹性子元素在父容器中的位置
row 默认在一行内排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）

column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面；
3、justify-content(主轴对齐方式)
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
```
    ■ flex-start  默认，左对齐
    ■ flex-end  右对齐
    ■ center   居中对齐
    ■ space-between  两端对齐，中间自动分配
    ■ space-around  自动分配距离
```

4、align-items（侧轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值项目的高度自适应容器（注：子元素不能设置高度
5、flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’> 属性类似。
注：本属性在只有一行的伸缩容器上没有效果
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
注意以上六个属性用在父元素上面加在子元素上
以下属性设置在项目上
7、align-self
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。

auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch元素被拉伸以适应容器。
Center元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end 元素位于容器的结尾。
8、order
number排序优先级，数字越大越往后排，默认为0，支持负数。
9、 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
flex-grow: 1;（此时占据多余空间；）
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
10、 flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
一般在弹性盒模型上面，这个属性的属性值经常取0；然后给其一个固定的高度或者宽度；和上面的flex-grow：1；搭配使用；
那么将会出来双飞翼的效果！如下代码：
html部分：

<body>
    <header></header>
    <section></section>
    <footer></footer>
</body>

外部css部分：

*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;display:flex;flex-direction:column;}
header{height:100px;width:100%;flex-shrink:0;}
section{width:100%;flex:1;}//这里不给其设置高度；其占据的高度为body的高度减去（footer的高度+header的高度之和）；
footer{height:100px;width:100%;flex-shrink:0;}

每当body的高度再改变时，中间section的高度也改变；
弹性盒模型一般用在移动端的布局；这样能够更好的适应手机屏幕的大小以及分辨率；
–多栏布局
1.column-count：auto | 整数；—控制栏数
2.column-width：value；—每栏的宽度
3.column-gap : value ;—两栏之间的间距
4.column-rule : 宽度，线型，颜色；—栏与栏的间隔线
类似border，solid | dotted | dashed 实线 | 点线 | 虚线
column-width和column-count这两个属性提供了分栏的标准，只写其中的一个column-gap和column-rule就处在相邻两列之间
让某个元素跨栏加到某个元素上：column-span : all / none ; 是否跨栏显示

–媒体查询概念的应用

媒体查询
可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
响应式网站设计(Responsive Web design)的理念是：
集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
响应式网站布局的依据是：媒体查询；
基本语法
外联CSS语法

<link rel=“stylesheet” href=“wide.css”   media="screen and (min-width:320px)" />
<link rel=“stylesheet” href=“mobile.css”  media="screen and (max-width:1000px)" />

内嵌样式的语法
<style>
@media all/only screen/  and  (min-width:500px) { … }
</style> screen---显示器的意思

移动端页面需要加media标签
1)首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果
是否允许屏幕缩放 ps: width=device-width:宽度等于当前设备的宽度 initial-scale=1：初始的缩放比例（默认为1） maximum-scale=1：允许用户缩放到得最大比例（默认为1） user-scalable=no：用户不能手动缩放

怎样使用media
2)怎样在CSS文件中写CSS响应式媒体查询
例: @media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; }
} @media screen and (max-width:320px){ body{ background-color:blue;