做化妆品注册和注册的网站,做安装系统网站有钱赚吗,太原的网站搭建公司,十大免费行情软件文章目录一、逐帧动画二、flex弹性盒子三、少量元素侧轴对齐方式四、折行侧轴对齐方式五、项目属性六、网格布局七、网格布局的对齐方式八、网格布局的项目合并一、逐帧动画
一张背景图#xff0c;改变back-position-x的位置让他动起来 step-start 逐帧动画 animation: play …
文章目录一、逐帧动画二、flex弹性盒子三、少量元素侧轴对齐方式四、折行侧轴对齐方式五、项目属性六、网格布局七、网格布局的对齐方式八、网格布局的项目合并一、逐帧动画
一张背景图改变back-position-x的位置让他动起来 step-start 逐帧动画 animation: play 0.5s step-start infinite;
二、flex弹性盒子
触发弹性盒子 给父容器添加 display: flex 弹性盒子的特点 1、父容器添加弹性盒子以后子元素可转换成块元素 2、子元素横向排列了 3、父元素添加弹性盒子后只有一个子元素的时候给子元素添加 margin auto可以上下左右居中。 概念 1、容器父元素 2、项目子元素 触发完弹性盒子后只会影响子元素的排列方式孙子辈元素不影响。 概念 横轴 x轴 横向(水平方向) 纵轴 y轴 纵向(垂直方向)
主轴 弹性盒定义的方向 侧轴 与主轴对立的一个方向
容器属性 触发弹性盒子 display:flex 修改主轴方向 column纵向 row横向默认 flex-direction: column; 对齐方式 语法justify-content 取值 flex-start主轴的开始位置(元素挨在一起) flex-end主轴的结束位置(元素挨在一起) center主轴位置居中(元素挨在一起) space-around主轴环绕对齐 space-between主轴两端对齐
三、少量元素侧轴对齐方式
align-items: stretch(位伸) 默认值项目没有高度 flex-start侧轴开始的位置 flex-end:侧轴结束位置对齐 center:侧轴位置中间对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 800px;height: 900px;margin: 0 auto;display: flex;background-color: black;justify-content:space-around;align-items: center;}.box span{width: 100px;border: 1px solid red;color: white;text-align: center;font-size: 14px;}/style
/head
bodydiv classboxspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div
/body
/html四、折行侧轴对齐方式
元素的折行问题 如晒个容器当中放了过多的项目会出现项目挤压的问题项目原本的宽无法使用。 不想被挤压就进行折行定义宽度 flex-wrap: wrap/nowrap默认不折行 折行后会出现行高的问题如下图 折行之后行间距 行间距align-content 可消除行间距 属性值 flex-start:侧轴开始位置进行对齐几行挨在一起的 flex-end:侧轴结束位置进行对齐几行挨在一起的 center: 侧轴中心对齐 space-around:侧轴环绕对齐 space-between:侧轴两端对齐 stretch:拉伸(默认值)
五、项目属性
order 控制元素的布局顺序取值越大越靠后默认的值auto(0)
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 1000px;height: 800px;background-color: pink;display: flex;}.box span{width: 100px;height: 100px;border: 1px solid red;color: white;text-align: center;font-size: 14px;}.box .one{/* 其他默认为0所以one要排到最后去了 */order: 1;}/style
/head
bodydiv classboxspan classone1/spanspan classtwo2/spanspan classthree3/spanspan4/spanspan5/span/div
/body
/html调整单个元素在侧轴的对齐方式 align-self:
stretch 默认值拉伸前提是没有高度flex-start 侧轴的开始位置flex-end 侧轴的结束位置center 侧轴的中心位置baseline 效果跟flex-start一致
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 1000px;height: 800px;background-color: pink;display: flex;}.box span{width: 100px;height: 100px;border: 1px solid red;color: white;text-align: center;font-size: 14px;}.box .one{/* 其他默认为0所以one要排到最后去了 */order: 1;/* 这个元素跑到中间去了 */align-self: center;}/style
/head
bodydiv classboxspan classone1/spanspan classtwo2/spanspan classthree3/spanspan4/spanspan5/span/div
/body
/html挤压属性 当项目过多的时候宽义马会被挤压如果需要不挤压可以使用 flex-shrink 取值0 不挤压 1挤压
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 500px;height: 400px;background-color: green;display: flex;overflow: auto;}.box span{width: 200px;height: 100px;background-color: blueviolet;flex-shrink: 0;}/style
/head
bodydiv classboxspan classone1/spanspan classtwo2/spanspan classthree3/spanspan4/spanspan5/spanspan classone1/spanspan classtwo2/spanspan classthree3/spanspan4/spanspan5/span/div
/body
/htmlflex:1;项目占余下所有空间
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 500px;height: 400px;background-color: green;display: flex;flex-direction: column;}header{height: 50px;background-color: red;}section{background-color: green;/* height: calc(100% - 100px); */flex: 1;}footer{height: 50px;background-color: blue;}/style
/head
bodydiv classboxheader头部/headersection主体/sectionfooter尾部/footer/div
/body
/html六、网格布局
网格布局的含义将页面划分成一个一个的网格区域用于不同样式的合并制作不同的效果网格和flex布局的区别 相同点
都是通过display属性进行触发的都分为容器和项目 不同点flex布局 一维布局 要么横向要么纵向grid布局 二维布局 里面有行和列 网格布局组成单元格1行1列的单元格 2条横线 2条纵线1行3列的单元格 2条横线 4条纵线 触发网格布局 语法display: grid; 如何划分网格使用px grid-template-rows: 100px 100px 100px 100px; 四行 grid-template-columns: 100px 100px 100px 100px; 四列使用百分比 grid-template-rows: 20% 20%; 两行 grid-template-columns: 20% 20%; 两列
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlelink relstylesheet href./icon/iconfont.cssstyle typetext/css*{margin: 0;padding: 0;}.box{width: 500px;height: 400px;background-color: green;display: grid;grid-template-rows: 20% 20% 20% 20% 20%;grid-template-columns: 50% 50%;}/style
/head
bodydiv classbox/div
/body
/htmlrepeat函数 重复数值
grid-template-rows: repeat(重复次数取值)grid-template-columns: repeat(10, 40px) 自动填充平均分配grid-template-rows: repeat(auto-fill, 20%)grid-template-columns: repeat(auto-fill, 10%) 按片段来划分grid-template-rows: 1fr 2fr 3fr;grid-template-columns: 1fr 2fr 3fr; 占剩余宽度剩余高度的所有 autogrid-template-rows: 100px 100px auto;grid-template-columns: 100px auto 100px; 最小最大函数grid-template-rows: 100px 100px 100px minmax(100px, 200px);grid-template-columns: 100px 100px 100px minmax(100px, 200px);
七、网格布局的对齐方式
网格线的命名 grid-template-rows: [r1]100px [r2] 100px [r3]100px [r4]100px [r5]; grid-template-columns: [c1]100px [c2]100px [c3]100px [c4]100px [c5]; 网格的间距 行间距
grid-row-gap: 10px; 列间距grid-column-gap: 10px; 复写方式grid-gap: 10px 10px; 对齐方式 取值 start end centerplace-items: end start;
八、网格布局的项目合并
网格在容器当中的对齐方式纵向 横向 place-content: center center 项目的排列方向 grid-auto-flow: column/row
