给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.
flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法
flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.
flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性
CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义
justify-content 属性在弹性布局中常用的语法如下
align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下
align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示
我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高
flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?
flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候
flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.
如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐
要实现最后一行对齐,理论上最好使用 gap 属性设置间隙
如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定
例如 <input type="month">可以选择年月日例如 <input type="text" placeholder="请输入" >
显示在input输入框 默认显示的文字
例如 鼠标滑动事件
实例
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000"></canvas>
<video src=""></video>
<audio src=""></audio>
用法一样 例如
// 设置本地存储
localStorage.setItem("lastname", "Smith")
// 获取本地存储
document.getElementById("result").innerHTML = localStorage.getItem("lastname")
draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有三个值,true表示可以拖放,false表示不可以被拖放,auto表示使用浏览器的默认值
在h5中,如果想拖拽元素,就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽
<div draggable="true">123</div>
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
伪类元素选择器
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)
background-origin:规定背景图片的定位区域
对于 background-origin 属性,有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
border-radius:圆角
box-shadow / text-shadow:阴影
border-image:边框图片
2D/3D 转换
2D 转换(transform)
translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px, 100px)
rotate():元素顺时针旋转给定的角度。若为负值,元素将逆时针旋转。transform: rotate(30deg)
scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,也可以一个值(宽高)。transform: scale(2,4)
skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg, 20deg)
matrix(): 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0)
3D 转换
rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg)
rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg)
perspective:规定 3D 元素的透视效果
transition-property :执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。
transition-duration:过渡动画的一个持续时间。
transition-timing-function:在延续时间段,动画变化的速率,常见的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay:延迟多久后开始动画
先定义 @keyframes 规则(0%,100% | from,to)
然后定义 animation,以下参数可直接写在 animation 后面
animation-name: 定义动画名称
animation-duration: 指定元素播放动画所持续的时间长
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ): 指元素根据时间的推进来改变属性值的变换速率,即动画的播放方式
animation-delay: 指定元素动画开始时间
animation-iteration-count: infinite | number:指定元素播放动画的循环次数
animation-direction: normal | alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为 normal 时,动画的每次循环都是向前播放;另一个值是 alternate,规定动画在下一周期逆向地播放(来去播放)
animation-play-state: running | paused :控制元素动画的播放状态
实例
div{
width: 200px
height: 100px
background: pink
animation: move 1s linear
}
@keyframes move {
0%{
width: 0
}
100%{
width: 500px
}
}
通过CSS3,能够创建多个列来对文本进行布局
column-count: 规定元素应该被分隔的列数
column-gap: 规定列之间的间隔
column-rule: 设置列之间的宽度、样式和颜色规则
resize
box-sizing
outline-offset
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll
div {
resize: both/* none|both|horizontal|vertical*/ overflow: auto
}
box-sizing 属性可设置的值有 content-box、border-box 和 inherit
content-box 是W3C的标准盒模型,元素宽度 = 内容宽度 + padding + border:意思是 padding 和 border 会增加元素的宽度,以至于实际上的 width 大于原始设定的 width
border-box 是ie的怪异盒模型,元素宽度 = 设定的宽度,已经将 padding 和 border 包括进去了,比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破,但是使用 border-box 就可以轻松完成
inherit:规定应从父元素继承 box-sizing 属性的值
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
div {
display: flex
flex-direction: row
/*弹性盒方向:主轴方向X轴 */
flex-direction: column
/* 弹性盒方向:主轴Y轴方向 */
flex-direction: row-reverse
/* 弹性盒方向:主轴方向X轴 倒叙 */
flex-direction: column-reverse
/* 弹性盒方向:主轴Y轴方向 倒叙*/
flex-wrap: nowrap
/* 弹性盒换行:不换行 默认的 */
flex-wrap: wrap
/* 弹性盒换行:换行 */
/*设置主轴方向子元素排列顺序*/
justify-content: flex-start
/* 从左到右排列 默认的 */
justify-content: flex-end
/* 从尾部开始排列 不影响子元素排列顺序 */
justify-content: center
/* 从主轴居中对齐 */
justify-content: space-around
/* 平分主轴剩余空间 */
justify-content: space-between
/* 两边对齐,中间评分剩余空间 */
justify-content: space-evenly
/* 间距相同 */
}
CSS 兼容内核
-moz-:代表FireFox浏览器私有属性
-ms-:代表IE浏览器私有属性
-webkit-:代表safari、chrome浏览器私有属性
-o-:代表opera浏览器私有属性
弹性元素是 container直接的在文档流中的子元素container在文档流中的子元素才是弹性子元素
弹性元素的默认宽高为内容宽高
flex-direction: row|row-reverse|column|column-reverse
container内的排列顺序: 从左往右 从右往左 从上往下 从小往上(都是从container对应方向边缘开始)
flex-wrap: nowrap|wrap|wrap-reverse
order: <integer>
initial: 0
两个黄色元素没有设置order, 默认为0
flex-basis: <height>|<width>
设置的是宽还是高根据主轴来定, 如果主轴是行则设置默认宽度, 如果主轴是列则设置默认高度
flex-grow: <integer>
initial: 0
弹性元素的宽或高计算:
flex-basis + flow-grow/sum(flow-grow)*remain
flex-shrink: <integer>
initial: 1
弹性元素的宽或高计算:
flex-basis + flow-shrink/sum(flow-shrink)*remain
这里的remain是负值, 表示超出的内容大小
flex: <flex-grow>|| <flex-shrink>|| <flex-basis>
initial: 0 1 main-size ( main-size 元素沿主轴方向默认尺寸)
justify-content: flex-start | flex-end | center | space-between | space-around
效果依次如下:
align-items: flex-start | flex-end | center | stretch | baseline
align-self: auto | flex-start | flex-end | center | baseline | stretch
initial: auto
当多行时: 应用于行
align-content: flex-start | flex-end | center | space-between | space-around | stretch