Jane_Juan小姐的博客

菜鸟一枚,记录前端成长轨迹,个人博客正在建设中,地址为https://git.zhangxiaojuan.club/...

rem原理 - 2

github地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&g...

2019-05-28 15:00:10

阅读数 19

评论数 0

[css]:黏性页脚,页面上中下布局;当页面内容不足时,使得页脚footer紧贴屏幕底部,内容过长是,页脚紧贴内容后面

效果图【截取自网上】 使得内容不足时,content撑开页面使得footer置底,内容充足时footer还是置底 flex布局 https://codepen.io/zxjzx/pen/KYbooM table布局 https://codepen.io/zxjzx/pen/NmeYJN 网格布局...

2019-05-22 11:04:14

阅读数 25

评论数 0

rem原理 - 1

rem响应式 html{ font-size: calc(100vw/750);//1rem=1px } 举例 <!doctype html> <html lang="en"> <hea...

2019-04-15 16:32:15

阅读数 12

评论数 0

[css]:一个左中右布局,最小宽度为600px,左侧为200px,右侧是300px,中间自适应。中间优先显示

我是标题 我是html <div class="content"> <div class="left">左边</div> <div class=&quo...

2019-04-11 11:51:57

阅读数 59

评论数 0

弹性布局:display:flex相关知识点与常见应用场景

小游戏:http://flexboxfroggy.com/ 通过这个游戏可对弹性布局的属性进行了解透彻。 flex容器的基本概念 flex-direction:设置主轴方向,row,row-reverse,cloumn,column-reverse flex-wrap:是否换行,nowra...

2019-03-01 18:04:42

阅读数 133

评论数 0

vue通过style或者class改变样式

通过style改变样式 <div :style="{ 'min-height': size + 'px' }"></div> <div :style="[{ 'min-height': size...

2018-10-30 11:40:30

阅读数 517

评论数 0

div垂直居中显示

如图所示,怎么处理不定宽度和高度的盒子在大盒子中自动居中显示 解决方法: 父亲盒子相对定位position:relative; 子盒子绝对定位position:absolute;再加上 top:50%; left:50%; transform:translate(-50%,-5...

2016-12-24 18:57:05

阅读数 232

评论数 0

CSS居中小谈-上下左右居中

http://web.jobbole.com/88804/ 内联元素居中方案 水平居中设置: 行内元素 设置 text-align:center; Flex布局 设置display:flex;justify-content:center;(灵活运用,注意兼容性和前缀) 垂直居中设置...

2016-11-26 12:05:59

阅读数 137

评论数 0

页面响应式网络布局原理

window.onresize=function(){}:改变窗口事件,即窗口或框架被调整大小时发生; 新建一个空白css链接 <link rel="stylesheet" type="text/css" href=""...

2016-10-29 19:12:58

阅读数 395

评论数 0

全兼容的多列均匀布局问题--来自微信公众号-“前端大全”

css实现两端对齐的3种方法:http://www.cnblogs.com/PeunZhang/p/3289493.html 法一:display:flex CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它...

2016-10-21 08:55:20

阅读数 363

评论数 0

BFC模式

1、BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 BFC有一下特性: ...

2016-10-20 16:53:28

阅读数 905

评论数 0

由display:in-block设置带来的元素间间距怎么消除

网上参考资料链接:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/ 2个元素之间有间隙,那么问题来了,为什么会出现间隙?   原因是inline-block允许空格,出现空隙的罪魁祸首就是包括...

2016-10-04 11:14:39

阅读数 1528

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭