搜索到
3
篇与
CSS
的结果
-
flex常用属性 在使用过程中，时常出现，混淆部分属性的内容，所以在这记录下来 #flex-direction: 确定主轴的方向 css复制 row | row-reverse | column | column-reverse; 1 #justify-content: 主轴对齐方式 css复制 flex-start | flex-end | center | space-between | space-around; 1 justify-content对应flex-direction的方向，比如 justify-content默认为水平方向row，justify-content为center，那么是水平居中， 如果flex-direction为垂直方向column，justify-content为center，那么是垂直居中 #align-items: 交叉轴对齐方式，（与主轴垂直的方向） css复制 flex-start | flex-end | center | baseline | stretch; 1 如果: flex-direction:row | row-reverse, justify-content代表水平方向对齐方式，align-items代表垂直方向对齐方式 flex-direction:column | column-reverse, justify-content代表垂直方向对齐方式，align-items代表水平方向对齐方式 #flex-wrap: 决定是否换行和换行方式 css复制 nowrap | wrap | wrap-reverse; 1 #align-content: 多轴对齐方式 css复制 flex-start | flex-end | center | space-between | space-around | stretch; 1 #order: 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 #flex-grow: 属性定义项目的放大比例 默认为0，即如果存在剩余空间，也不放大。（此值如果为1，代表如果存在剩余空间，对应项目将占有剩余空间），如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 #flex-shrink: 属性定义了项目的缩小比例 默认为1，即如果空间不足，该项目将缩小。（此值如果为1，代表如果空间不足，对应项目将缩小），如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 #flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size） 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。（占据固定空间） #align-self: 属性允许单个项目有与其他项目不一样的对齐方式 可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 css复制 auto | flex-start | flex-end | center | baseline | stretch; 1
-
通过sticky-footer布局来实现绝对底部 当内容不够时，页脚应该固定在页面底部 当内容超出时，页脚应该在内容后面 html复制 //html <div class="wrapper"> <div class="content-wrapper clearfix"> <div class="content"></div> </div> <div class="footer"></div> </div> //css .clearfix{ display: inline-block; } .clearfix:after{ display: block; content: ''; height: 0; line-height: 0; clear: both; visibility: hidden; } .wrapper{ position: fixed width: 100% height: 100% overflow: auto } .content-wrapper{ min-height: 100% width: 100% } .content{ padding-bottom: 40px } .footer{ position: relative margin-top: -40px clear: both } 1234567891011121314151617181920212223242526272829303132333435363738 #介绍 1、嵌套层级不深，可直接继承自 body width：100%； height:100%; html复制 // html <body> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </body> // css html,body{ width:100%; height:100%; } #sticker{ width:100%; min-height:100%; } .sticker-con{ padding-bottom:40px; // 40px 为 footer 本身高度 } .footer{ margin-top:-40px; // 40px 为 footer 本身高度 } 1234567891011121314151617181920212223 2、嵌套层级很深，无法直接从上级继承 百分比高度 给需要的 sticker-footer 创建一个 wrapper html复制 <body> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </div> </body> .wrapper{ position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了 overflow:auto; // 当高度超过 100% ;时产生滚动条 width:100%; height:100%; // 继承自 body } // wrapper 内部包裹的结构，就如上所示了，css样式也一样 12345678910111213141516 3，当无法用百分比获取高度时，也可通过js方式获得 javascript复制 //css样式同第一种， 只是 sticker 的 min-height 用css获取 <body> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </body> var sticker = document.querySelector('#sticker'); var h = document.body.clientHeight; sticker.style.minHeight = h - 44 + 'px'; //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height: 1234567891011121314 4，强大的 flex 布局 flex-direction:column 将wrapper容器， display:flex; flex-direction:column 将sticker， flex:1; 占据除footer以外的剩余空间 html复制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>sticker footer</title> </head> <style> html,body{ width: 100%; height: 100%; background-color: #ccc; margin:0; padding: 0; } header{ height:44px; width: 100%; text-align: center; line-height: 44px; } #wrapper{ display: flex; flex-direction: column; width: 100%; /*height: 100%;*/ } #sticker{ background-color: red; flex: 1; } #sticker .sticker-con{ padding-bottom: 40px; } .footer{ background-color: green; height: 40px; } </style> <body> <header>我是头部</header> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </div> </body> <script> var wrapper = document.querySelector('#wrapper'); var h = document.body.clientHeight; wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度 </script> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657