我又又来了， 这周我们具体学习了弹性盒子与边框还有背景以及CSS3中的2D转换的主要知识内容 下面由我来讲解一下吧。
弹性盒子的概念
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子的内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex 属性用于指定弹性子元素如何分配空间。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
CSS3 框大小
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
分类
1.标准盒子模型
设置 box-sizing: content-box;
例如：.div {
box-sizing: content-box;
}
2.IE盒子模型或者叫怪异盒子模型
设置 box-sizing: border-box;
例如： .div {
box-sizing: border-box;
}
注意！！：弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
弹性盒子的排列方式
flex-direction（排列方式）
概念：flex-direction 属性指定了弹性子元素在父容器中的位置。
语法：
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
示例图如下：
弹性盒子的对齐方式
align-items（对齐方式）
概念：align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
align-items的各个值：
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
示例图如下：
flex-start，baseline，stretch效果相同！！！
flex-end的效果图：
center效果图：
这里重点讲一下密钥（数据存储）！！！
数据存储的分类
1.LocalStorage
概念：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
2.SessionStorage
概念：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
3.Cookie
概念：储存在用户本地终端上的数据，是网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据。
三者的共同点和不同点：
共同点：
三者都是浏览器的本地存储。
//---------------------------
不同点：
①存储位置：cookie是由服务器端写入的，而SessionStorage、LocalStorage都是由前端写入的；
②存储大小：cookie的存储空间比较小，大概4KB,而SessionStorage、LocalStorage存储空间比较大，大概5M；
③生命周期：cookie的生命周期是由服务器端在写入的时候就设置好的，SessionStorage是页面关闭的时候就会自动清除，LocalStorage是写入就一直存在，除非手动清除；
④数据共享：三者的数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。
⑤发送请求时是否携带：在前端给后端发送请求的时候会自动携带cookie中的数据，但是SessionStorage、LocalStorage不会；
⑥应用场景：cookie一般用于存储登录验证信息SessionID或者token，SessionStorage可以用来检测用户是否是刷新
进入页面，如音乐播放器恢复播放进度条功能，多页表单信息填写，LocalStorage常用于存储不易变动的数据，减轻服务器的压力。
三者数据存储的方式：
①localStorage：
localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据
//------------------------------------------
②SessionStorage：
sessionStorage.setItem(key, value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据
//-----------------------------------------
③Cookie：由服务器写入。
弹性盒子的内容对齐方式
justify-content（内容对齐）
概念：内容对齐justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的值如下：
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
弹性盒子的换行方式
flex-wrap
概念：flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
flex-wrap的值如下：
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
nowrap 和wrap示例图：
wrap-reverse 示例图：
文字强制显示在同一行 后面显示省略号
<style>
h1{
width:100px;
overflow: hidden;
/* 强制显示在同一行 */
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<h1>我我我我我我我我哦我我我我我我我我我我我我我我我我我我</h1>
</body>
效果示例图：
Y轴方向对齐方式：
align-self （对齐方式）
概念：align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
注意！！：
align-self 属性可重写灵活容器的 align-items 属性。
语法：
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
align-self的值：
| 属性值 | 含义 |
|---|---|
| auto | 如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’ |
| stretch | 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线（Y轴）对齐 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性 |
设置各个行的对齐方式
align-content
概念：align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content的值如下：
- stretch - 默认。各行将会伸展以占用剩余的空间。
- flex-start - 各行向弹性盒容器的起始位置堆叠。
- flex-end - 各行向弹性盒容器的结束位置堆叠。
- center -各行向弹性盒容器的中间位置堆叠。
- space-between -各行在弹性盒容器中平均分布。
- space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
复合属性 （flex-flow ）
定义：
1.flex-flow 是 flex-direction 和 flex-wrap 的简写
2.flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
3.flex-direction 属性规定灵活项目的方向。
4.flex-wrap 属性规定灵活项目是否拆行或拆列
注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用 ！！！
flex-flow 的值：
| 属性值 | 描述 |
|---|---|
| flex-direction | 可能的值：row，row-reverse，column，column-reverse，initial，inherit，默认值是 “row”。规定灵活项目的方向 |
| flex-wrap | 可能的值：nowrap，wrap，wrap-reverse，initial，inherit，默认值是 “nowrap”。 规定灵活项目是否拆行或拆列 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性 |
弹性子元素属性
order（排列）
概念：弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
可以 为负值，属性设置弹性容器内弹性子元素属性。
注意：order的值是1开始，谁最小排在最前面。(oreder的值可以为负数)
写法：
<style>
.box1 {
width:100px
height:100px
order:-1;
}
</style>
伸缩盒子模型
<style>
h1{width: 100px;
display: -webkit-box;/* //对象作为弹性伸缩盒子模型显示 */
overflow: hidden;/* //溢出隐藏 */
-webkit-box-orient: vertical;/* //设置伸缩盒子对象的子元素的排列方式 */
-webkit-line-clamp: 3;/* //设置 块元素包含的文本行数 */
}
</style>
边框（border）：
border属性;
| 属性 | 含义 |
|---|---|
| border-radius | 边框圆角 |
| box-shadow | 盒子阴影 |
| border-image | 边框图像 |
注意：这些属性都是给标签写样式！！！
边框border的写法：
border: 10px solid red; //简便写法
border-top-width: 10px solid red //边框宽度
border-top-style: solid; //边框样式
border-top-color: red;//边框颜色
以上top/right/bottom/left都可以设置
边框样式：
| 值 | 含义 |
|---|---|
| none | 没有边框,即忽略所有边框的宽度(默认值) |
| solid | 边框为单实线 |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
边框圆角写法：
border-radius: 10px 30px 50px;
border-radius: 50%; //也可以设置百分比 50%就是圆形
边框盒子阴影写法
box-shadow: 水平 垂直 大小 颜色;
border-image: url(../../2.png) 0 36 repeat;
CSS3 背景
背景属性值：
| 属性 | 含义 |
|---|---|
| background-image | 添加背景图片（url（“”）放置多个用逗号隔开 |
| background-size | 添加背景图像大小 |
| background-color | 添加背景颜色 |
| background-position | 定位背景图像的位置（top/right/bottom/left） |
| background-repeat | 背景X轴Y轴的 |
| background-origin | 指定了背景图像的位置区域（content-box，padding-box，border-box） |
| background-cilp | 背景裁剪，从指定位置开始裁剪 |
| background-attachment | 设置背景图像是否固定或随着页面其余部分滚动 |
重点讲一下 background-attachment的值：
scrol//默认，页面滚动跟着滚动
fixed//不随着页面滚动
local//随着元素内容滚动
线性渐变（Linear Gradients）
概念：向下/向上/向左/向右/对角方向。默认情况：从上到下
写法
background-image: linear-gradient(颜色, 颜色,...);
从左到右to right|left|top|bottom
background-image: linear-gradient(to right,red,orange);
对角方式to bottom right
设置角度90deg
background-image: linear-gradient(90deg,red,#000);
使用透明度
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复线性渐变
background-image: repeating-linear-gradient(red,black 20%,green 10%);
径向渐变（Radial Gradients）
概念：由它们的中心定义。
写法与含义
background-image: radial-gradient(形状 大小 at 位置, 颜色, ...,颜色);
形状它可以是值 circle 或 ellipse默认值
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边-->
换行方式（重点 ！）
文本换行方式！！！
word-wrap:break-word;
单词换行方式！！！
word-break: keep-all;
设置字体
具体写法如下：
<style>
@font-face
h1 {
width: 100px;
text-shadow: 5px 5px 5px #FF0000;
word-wrap:break-word;/*文本换行方式 */
word-break: keep-all;/*单词换行方式*/
}
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
h2
{
font-family:myFirstFont;
}
</style>
<body>
<h1>hello word</h1>
<h2>你好</h2>
</body>
CSS3 2D 转换（transform）
概念：CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸
transform的属性值及含义
| 属性值 | 含义 |
|---|---|
| translate(X，Y) | 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 |
| rotate(X，Y) | 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转 |
| scale(X，Y) | 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 缩放，设置为负数镜像方式放大缩小 |
| skew(X，Y) | 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜 |
| matrix(1,2,3,4,5,6) | transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移); matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能 |
过渡（transition: 1s;）
写法：
transform = "translate(100px,200px)" // 移动 （x轴和y轴）
transform = "rotateX(30deg)"// 旋转（角度的单位是deg）
transform = "scale(0.5,1)"//缩放 （x轴和y轴）
transform = "skew(30deg,0deg)"//倾斜 （x和y轴的角度加单位deg）
transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);//不常用
注意：matrix里面的六个值都不需要加单位，还需注意的是第一和第三个的值都具备缩放的特性所以两个都是缩放 并不是选装。。。。
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
