随笔分类 -  HTML与CSS

stick footers布局
摘要：需求： 将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。 方法一： <style>*{padding: 0;margin: 0;font-size:20px;}html, body, #wrap {height: 100%;}body > #wra 阅读全文
posted @ 2018-03-04 23:40 undefined- 阅读(118) 评论(0) 推荐(0)
CSS自定义滚动条样式
摘要： 阅读全文
posted @ 2018-02-28 13:54 undefined- 阅读(185) 评论(0) 推荐(0)
CSS隐藏滚动条但又能滚动，不用js实现
摘要：隐藏多余的内容，但是可以滑动查看 原理就在于padding-right:17px;把滚动条挤出去隐藏了 阅读全文
posted @ 2018-02-28 13:37 undefined- 阅读(5307) 评论(1) 推荐(0)
关于height:100%不生效的问题
摘要：当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间 阅读全文
posted @ 2018-02-13 17:55 undefined- 阅读(709) 评论(0) 推荐(0)
使用transform实现手风琴布局
摘要： 阅读全文
posted @ 2017-12-08 15:15 undefined- 阅读(348) 评论(0) 推荐(0)
rem的使用方法
摘要：首先写入一下代码 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale 阅读全文
posted @ 2017-11-19 14:06 undefined- 阅读(258) 评论(0) 推荐(0)
justify-content 定义子元素在父元素水平位置排列的顺序
摘要：justify-content 定义子元素在父元素水平位置排列的顺序，需要和display:flex使用才会生效。 有五个属性： 1.flex-start(默认值) 左对齐 2.flex-end 右对齐 3.center 居中 4.sapce-between 两端对齐，子元素之间的间距相等 5.sp 阅读全文
posted @ 2017-08-12 23:28 undefined- 阅读(417) 评论(0) 推荐(0)
flex弹性盒模型
摘要：flex 意思是弹性布局，用来给盒模型提供最大的灵活度，指定容器中的项目为弹性布局，类似于float:left; 比float的好处是容器没有设置高度，会根据项目来自适应高度，我们都知道，设置float属性，如果没有设置高度，那么容器会脱离文档流，需要清除浮动，才可以根据项目的高度规定高度。 父元素 阅读全文
posted @ 2017-08-12 23:08 undefined- 阅读(579) 评论(0) 推荐(0)
让子元素在父元素中水平居中align-items
摘要：做案例中，我们会发现让子元素在父元素中垂直居中，要设置margin和padding等，各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元素交叉轴上如何对齐的，大多数不理解交叉轴是什么，下面举例来说明，不多说直接上代码 现在是这样显示的， 阅读全文
posted @ 2017-08-12 22:28 undefined- 阅读(6226) 评论(0) 推荐(0)
box-sizing的用法
摘要：box-sizing 规定两个并排的带边框的框： 例如 以上案例父元素是600px，子元素各占百分之五十，因为两个子元素有边框。导致没有浮动在一排 加了box-sizing:border-box 两个子元素边浮动在一起了 加了box-sizing:border-box 两个子元素边浮动在一起了 bo 阅读全文
posted @ 2017-08-12 14:09 undefined- 阅读(297) 评论(0) 推荐(0)
px与与rem vw的区别
摘要：1.px 使用具体像素点为单位，好处是比较稳定和精确，但在浏览器放大缩小会出现问题 2.rem 参考根元素的值 例如设置根元素字体大小是20像素 在h1中设置字体大小 那么H1的大小就是40px p的像素是20*0.8就是16像素 3.vw是针对于可是窗口的大小，就是窗口的大小，或者手机屏幕的大小 阅读全文
posted @ 2017-08-11 22:11 undefined- 阅读(478) 评论(0) 推荐(0)