网站渠道建设,天津塘沽网站建设,泰安市住宅与房产信息网,网站制作方案怎么做黑马程序员JS学习时的一个案例#xff0c;CSS有点不懂#xff0c;单拎出来分析。 具体出处是某站视频中的数组篇讲解#xff0c;#xff08;点击链接跳转#xff09; CSS案例 效果代码1. 先分析最大的boxflex布局 justify-contentalign-items以 flex-end 为例 2. box… 黑马程序员JS学习时的一个案例CSS有点不懂单拎出来分析。 具体出处是某站视频中的数组篇讲解点击链接跳转 CSS案例 效果代码1. 先分析最大的boxflex布局 justify-contentalign-items以 flex-end 为例 2. box中的dix分析步骤1flex-direction 步骤2步骤3 效果代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {display: flex; /*flex*/width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto; /*上下50px 左右auto居中*/justify-content: space-around; align-items: flex-end; text-align: center;}.boxdiv {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}/style
/headbodydiv classboxdiv styleheight: 123px;span123/spanh4第1季度/h4/divdiv styleheight: 156px;span156/spanh4第2季度/h4/divdiv styleheight: 120px;span120/spanh4第3季度/h4/divdiv styleheight: 210px;span210/spanh4第4季度/h4/div/divscript/script
/body/html1. 先分析最大的box
flex布局 这些都是flex布局中的 display: flex; 为了能够更好区别先设置主轴x轴justify-content再设置侧轴y轴align-items justify-content
属性值说明flex-start默认值项目向水平方向的起点对其flex-end水平方向的终点对齐center项目在水平方向上居中space-between最左最右靠边中间间距相等space-evenly水平方向的终点对齐space-around每个项目的左右撑开距离相等
跳转链接查看
align-items
该属性用于控制子元素在侧轴默认为y轴上的排列方式在子元素为单项时使用
属性值说明flex-start从上到下默认值flex-end从下到上center垂直居中stretch注意子元素不设置高度否则没有效果
以 flex-end 为例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlebodydiv classboxdiv styleheight: 200px;/divdiv styleheight: 100px;/divdiv styleheight: 300px;/div/div/bodystyle* {margin: 0;padding: 0;}.box {width: 700px;height: 300px;border-left: 3px solid pink;border-bottom: 3px solid pink;margin: 50px auto;display: flex;justify-content: space-around;align-items: flex-end;}.boxdiv {width: 50px;background-color: pink;}/style
/head
/html2. box中的dix分析
一个div中有2个元素
div styleheight: 120px;span120/spanh4第3季度/h4
/div这里以一个柱状图为例。 步骤1 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlebodydiv classboxspanxxxx/spanh4第x季度/h4/div/bodystyle* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;}/style
/head
/htmlflex-direction
flex-direction: 决定主轴的方向(即项目的排列方向) flex-direction column 主轴为垂直方向起点在上沿 这篇文章写的好点击跳转链接
此时我们的div中有两个元素span和h4想让他一个在上一个在下就先设置主轴方向为垂直方向。然后 justify-content: space-between;最左最右靠边中间间距相等
步骤2 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlebodydiv classboxspanxxxx/spanh4第x季度/h4/div/bodystyle* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;display: flex;flex-direction: column;justify-content: space-between;}/style
/head
/html步骤3
添加了text-align: center;等 这里设置了黄色是为了更好看清楚。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlebodydiv classboxspanxxxx/spanh4第x季度/h4/div/bodystyle* {margin: 0;padding: 0;}.box {width: 300px;height: 700px;background-color: pink;margin: 50px auto;display: flex;flex-direction: column;justify-content: space-between;text-align: center;}.box span {margin-top: -20px;background-color: yellow;}.box h4 {margin-bottom: -35px;width: 300px;background-color: yellow;}/style
/head/html
