整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上。
3.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
3.2 flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
以下6个属性设置在项目上。
4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
来源：阮一峰大神的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align:center;
color:#001D26;
}
h4{
color:#900
}
p{
font-size:16px;
color:#3E4B53;
text-indent:2em;
}
a:link{
color:skyblue;
}
a:hover{
color:red;
}
body{
background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
}
</style>
</head>
<body>
<p>
<h1> 忆江南 </h1>
</p>
<a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
<p>
(1)江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。
</p>
<h4>作者介绍</h4>
<p>
白居易（772-846），字乐天，太原（今属山西）人。唐德宗朝进士，元和三年（808）拜左拾遗，后贬
江州（今属江西）司马，移忠州（今属四川）刺史，又为苏州（今属江苏）、同州（今属山西大荔）刺史。晚居
洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人重的佼佼者，
所作对后世影响甚大。
</p>
<h4>注释</h4>
<p>
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。
又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双调五十四字，
皆平韵。
(2)谙（音安）：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
</p>
<h4>品评</h4>
<p>
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南的种种佳处，
而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，
词句又已暗逗结句“能不忆江南”，并与之相关阖。此句“风景旧曾谙”，点明江南风景之“好”，
并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，
不失为勾通一篇意脉的精彩笔墨。三两句对江南之“好”进行形象化的演绎，突出渲染红花、江水红绿相映
的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者
善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又
深长的韵味，把读者带入余情摇漾的境界中。
</p>
</body>
</html>示为
盒模型：
(1)border 相关的属性：
border-style 属性是用来设置边框样式的，我们可以直接使用 border-style 来设置四个边框的样式，也可以分别设置上下左右四个边框的属性。
我们来举个例子吧！
我们在 body 标签中添加一对段落标签。将段落元素边框的上、右、下、左四个部分的边框类型分别设置为实线、点状、虚线和双线。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>显示为，
（2）border-width 属性：
border-width 属性是用来设置边框宽度的，我们可以直接使用 border-width 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。
例子，
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 6px;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>显示为，
（3）border-color 属性：
border-color 属性是用来设置边框颜色的，我们可以直接使用 border-color 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
width: 420px;
height: 200px;
border: 1px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>显示为，
（4）border 属性和 padding 属性，以及使用这两个属性做练习：
border 是边框属性，它是复合属性，其用法如下所示：
border: 上右下左的值;
border-top: 上边框值;
border-right: 右边框值;
border-bottom: 下边框值;
border-left: 左边框值;padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。
其使用格式如下所示：
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;例子，
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top: thin solid red;
border-right: medium dotted green;
border-bottom: dashed thick blue;
border-left: double 6px yellow;
padding: 10px;
}
</style>
</head>
<body>
<p>
王耶浪Web开发学习笔记
</p>
</body>
</html>显示为，
（5）margin 属性：
margin 属性是用来设置元素的外边距：
使用格式：
margin: 上边距 右边距 下边距 左边距;也可以省略写。
当左右边距值相同时，写法如下：
margin: 上边距 左右边距 下边距;当上下边距值相同，左右边距值相同时，写法如下：
margin: 上下边距 左右边距;当上下左右边距值均相同时，写法如下：
margin: 属性值;从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：
/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid blue;
}
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>王耶浪Web开发学习笔记</p>
</div>
</body>
</html>显示为，
margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下：
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
margin: 25px 50px;
}显示为，
（6）display 的常用属性：
display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。
display 属性值的说明如下表所示。
属性值 | 说明 |
block | 元素以块级方式展示。 |
inline | 元素以内联方式展示。 |
inline-block | 元素以内联块的方式展示。 |
none | 隐藏元素。 |
block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下：
display: block;还记得前面学过的行内元素的概念吗？ 行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>王耶浪</span><span>Web开发学习笔记</span>
</body>
</html>显示为，
原本 span 标签是行内元素，却因为设置 display: block; 导致「王耶浪」与「Web开发学习笔记」分开了。
inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。
其使用格式如下：
display: inline;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>王耶浪</div>
<div>Web开发学习笔记</div>
</body>
</html>显示为，
块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。
其使用格式如下：
display: inline-block;哪些情况下可以用到这个属性？
比如，用 a 标签来实现导航的时候，a 标签可以让元素在一行显示，但若想给每个 a 标签加上高和宽时发现没有任何效果。这时用 display: inline-block，a就具备块的特性了。
例子,
eb前端css支持6种定位模型
静态
绝对
固定
相对
浮动
相对浮动
设定位置
position:static;可以取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.
position:relative;可以使元素相对于常规流的位置偏移一定距离.
position:absolute;可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离.
position:fixed;可以使元素相对于窗口偏移一定的距离.
z-index可以设置元素的堆叠顺序,数值越大,元素越靠上.
如果有想从事前端这行不知道怎么学习的，或者对于前端学习效率很慢的可以来我的群570946165，群文件里有全套系统学习资料，也问题可以随时问！
最近定位祖先元素
如果设定位置的元素没有定位祖先元素,那么<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.
最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局
原子显示
设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景
会发生重叠,但文字不会.z-index适用于所有元素,默认auto
z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
静态定位元素按照文档出现顺序从后往前进行堆叠.
设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下
一 web前端静态定位模型
position:static;默认是static;
静态元素的开始位置由前一个静态元素的位置确定.静态元素的尺寸,内边距,边框,和外边距
决定了下一个元素的开始位置.
相邻元素的垂直外边距会合并在一起,最终的外边距是两个相邻元素外边距的较大值
将左右外边距设置为auto,可以使已设定尺寸的静态块级元素居中显示.
二 web前端绝对定位模型
position:absolute;百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.
将元素的left,right,top,bottom,设置为auto,可以使它恢复原先在常规流中的位置.
与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为0,所有它的子元素都离开了常规流.
如果不存在定位祖先元素,会根据<body>来定位
绝对定位居中,一般元素
对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,这里left和right必须是0才行.
三 固定定位模型
position:fixed;可以将任意元素变为固定位置元素
切记:固定定位的元素位置是相对于窗口而定,而非相对于最近定位祖先`,而且元素不会随页面滚动而滚动.
因为它是相对页面来定位,所以不需要最近定位祖先
设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效
四 web前端相对定位
position:relative;
使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
使用float可以使一些元素成为浮动元素,通过relative可以浮动元素设置为相对定位,相对浮动元素仍然位于浮动元素所在的常规流中,可以使用left和top设置它在流中的偏移位置.
任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.
使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
使用float:left;和float:right;可以使元素离开常规流.
五 web前端浮动定位与复位
浮动元素不会影响块级框的位置,而只影响行内元素
clear:left;clear:right;clear;both;
任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
clear 不适用于行内,绝对定位或固定定位的元素、
如果有想从事前端这行不知道怎么学习的，或者对于javascript学习效率很慢的可以来我的群570946165，群文件里有全套系统学习资料，也问题可以随时问！
六 web前端相对浮动定位
只有positon:relative;和position:static;适用于浮动元素.而设定为absolute和fixed时,显示结果是不确定的.
零散
在css中,如果参数值是0的话,不要加单位,
浏览器在渲染一个元素内容之前,会先渲染它的框,顺序是从背景颜色开始,然后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容
*请认真填写需求信息，我们会在24小时内与您取得联系。
