网站流量不够怎么办,佛山网站设计讯息,wordpress 标签禁用,wordpress iis7 伪静态响应式布局 1.媒体查询2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等1.rem与em2.vw、vh、vmax、vmin 3.Flexboxflexbox计算题 响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。 1.媒体查询 媒体查询是最基础的实现响应式的方式 使用media关键… 响应式布局 1.媒体查询2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等1.rem与em2.vw、vh、vmax、vmin 3.Flexboxflexbox计算题 响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。 1.媒体查询 媒体查询是最基础的实现响应式的方式 使用media关键字 媒体查询是阶梯性的不连续没有完全响应 2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等
1.rem与em
rem(root em) 是相对于根元素通常是 标签的字体大小。适用于全局缩放和响应式布局. em 是相对于父元素的字体大小。具有继承性适用于局部尺寸的调整。
2.vw、vh、vmax、vmin
先来了解下网页视口相关 屏幕的宽度和高度window.screenWidth、window.screenHeight 网页视口的宽度和高度window.innerWidth 、 window.innerHeight body的宽度和高度document.body.clientWidth、document.body.clientHeight 网页视口的高度100vh网页视口的宽度100vwvmax 取vh和vw两者的最大值vmin 取vh和vw两者的最小值 所以1vh是网页视高度的百分之一1vw是网页视口宽度的百分之一
3.Flexbox
主轴Main Axis、交叉轴Cross Axis、Flex容器Flex Container包含Flex项目的容器。、Flex项目Flex Item
设置Flex属性使用Flex属性来控制Flex项目在主轴和交叉轴上的行为。
/* 容器属性 */.container {/* 定义为flex布局 */display: flex; /* 或 inline-flex *//* 主轴的方向 */flex-direction: row; /* 默认值从左到右。还可以是row-reverse、column或column-reverse *//* 是否换行 */flex-wrap: nowrap; /* 默认值不换行。还可以是wrap或wrap-reverse:当项目无法放在同一行时它们会从容器的底部开始并向上堆叠 *//* flex-direction 和 flex-wrap 的简写 */flex-flow: row nowrap; /* 主轴上的对齐方式 */justify-content: flex-start; /* 默认值左对齐。还可以是flex-end(右对齐)、center(中心对齐)、space-between(平分空间左右顶边)、space-around(两侧空间是中间一半)或space-evenly(两侧空间等于中间) *//* 交叉轴上的对齐方式 */align-items: stretch; /* 默认值项目被拉伸以适应容器的交叉轴宽度。还可以是flex-start、flex-end(从交叉轴底部排列)、center(交叉轴中间排列)或baseline *//* 多行的交叉轴上的对齐方式 */align-content: stretch; /* 默认值行之间拉伸。也可为flex-start、flex-end、center、space-between或space-around */}/* 项目属性 */.item {/* 排列顺序 */order: 0; /* 默认值。可以是任何整数 *//* 放大比例 */flex-grow: 0; /* 默认值。定义在分配多余空间时项目的放大比例 *//* 缩小比例 */flex-shrink: 1; /* 默认值。定义在减少空间时项目的缩小比例 *//* 初始大小 */flex-basis: auto; /* 默认值。初始大小 *//* 上述三个属性的简写 */flex: 0 1 auto; /* 使用flex-grow, flex-shrink 和 flex-basis的默认值 */flex: 1 1 0%; /* flex:1缩写 让所有Item平均分配剩余空间*//* 单个项目的对齐方式 */align-self: auto; /* 默认值与继承容器的align-items值。还可以是flex-start、flex-end、center、baseline或stretch。控制交叉轴单独布局没有与之对应的单独控制主轴的布局除非换grid方法或加margin */
}
flexbox计算题
问题1: 你有四个项目宽度分别为100px、150px、200px和250px其flex-shrink值分别为2、1、3和0。 如果需要在这四个项目之间减少总共300px的空间每个项目会减少多少像素 解 项目1的缩小比例为 2/6 1/3 项目2的缩小比例为 1/6 项目3的缩小比例为 3/6 1/2 项目4不会缩小因为它的flex-shrink值为0。
项目1会减少300px * 1/3 100px 项目2会减少300px * 1/6 50px 项目3会减少300px * 1/2 150px 项目4不会缩小。
最后宽度加上flex-basis
