margin | 易学教程

一个margin就可以让块状元素响应居中，很实用

阅读更多关于一个margin就可以让块状元素响应居中，很实用

之前总结过水平居中的很多方法，但今天在《css世界》这本书里看到margin的一个特性，一行代码就搞定很实用，分享一下 margin: auto 能在块级元素设定宽高之后自动填充剩余宽高。 margin: auto 自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性，显然默认情况下块级元素的高度是不具备这个条件的。典型应用是块级元素水平局中的实现： display: block;width: 200px;margin: 0 auto; auto 的特性是，如果两侧都是 auto ，则两侧均分剩余宽度；如果一侧 margin 是固定的，另一侧是 auto ，则这一侧 auto 为剩余宽度。例子↓ 是不是很方便当然除了水平方向，垂直方向的 margin 也能实现垂直居中，但是需要元素在垂直方向具有自动填充特性，而这个特性可以利用 position 实现： .mm>div{ position: absolute;left: 0; right: 0; top: 0; bottom: 0;width: 200px;height: 200px;margin: auto;} 来源： https://www.cnblogs.com/bobo1/p/12370160.html

微信小程序之登录页并存储用户

阅读更多关于微信小程序之登录页并存储用户

效果图： login.wxml：  <view class="container"> <view class="login-icon"> <image class="login-img" src="/images/logo.png"></image> </view> <view class="login-from"> <form bindsubmit="formSubmit" class='form'> <view class="myno">  <view class="weui-cell weui-cell_input"> <image class="nameImage" src="/images/name.png"></image>  <view class="weui-cell__bd"> <input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="请输入学号" /> </view> </view> </view> <view

BFC的基础理解及应用场景

阅读更多关于 BFC的基础理解及应用场景

　　最近学习了BFC，开始学习的时候，单纯看概念，有种云里雾里的感觉，字都认识，凑一起啥意思大致也知道，但是具体有什么用呢？这个就有点迷迷糊糊的，经过老师的讲解，以及自己课后的代码实验与总结，就拨云见日了，在这里分享自己对BFC的一些理解。 BFC的概念：　　BFC 即（Block Formatting Context）块级格式化上下文，指一个独立的块级渲染区域，只有块级盒子（box）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。　　　　与之对应的还有IFC、GFC、FFC。 BFC的形成：　　 1、根元素 html标签就是一个bfc 　　 2、float的值不为none 　　3、overflow的值不为visible 　　 4、display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 　　5、position的值为absolute或fixed BFC的特性：　　 1、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠　　2、计算BFC的高度时，浮动元素也参与计算　　3、BFC的区域不会与float box发生重叠　　4、BFC内部的Box会在垂直方向，一个接一个的放置。　　5、每个元素的margin

博客园样式(仿简书)

阅读更多关于博客园样式(仿简书)

成品图成品链接设置流程博客园　　→　　管理　　→　　设置　　→　　博客皮肤　　→　　SimpleMemory 页面定制CSS代码禁用模板默认css不用勾选 body { background: none; } .postTitle { border-bottom: 0px solid #969696; border-left: 0px solid #969696; color: #969696; display: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; padding: 0; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #969696; font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; } .postTitle a:hover{ color: #646464; text-decoration: underline; } .c_b_p_desc { margin: 0 0 8px; font-size

动态加载用户菜单

阅读更多关于动态加载用户菜单

流程是用户登录后进入模块页面，点击不同的模块，进入菜单页面（模块不同，菜单内容也不同）遇到的问题 1、菜单数据存储到store中页面刷新后页面空白解决方法：在全局导航守卫中每次都初始化菜单 2、如何动态生成路由 (动态生成路由会叠加，如果已经存在再生成会警告) 采用方法：router . addRoutes ( data ); 3、不同模块切换进入菜单页面，高亮显示有问题解决方法： : default-active = " routePath " created() { this.routePath = this.$route.path; }, 3、退出登录后如何清空store中数据（vuex中并没有清空的方法）暂时采用： location . reload (); 下面全部采用json模拟数据详细代码如下 userPermission.json { "data":{"name":"小李"}, "token":"111", "responseCode":"0000" } Login.vue <template> <div> <el-form :rules="rules" ref="loginForm" v-loading="loading" element-loading-text="正在登录..." element-loading-spinner="el-icon

三栏布局——横向

阅读更多关于三栏布局——横向

前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟， 1分钟~2分钟~3分钟~4分钟~5分钟！好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { min-height: 100px; } </style> 1.浮动的解决方案  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow; } </style> <article class="left-center-right"> <div class="left"></div> <div class="right"

关于为什么会造成外边距塌陷的分析

阅读更多关于关于为什么会造成外边距塌陷的分析

大家应该会碰到这种情况。父元素内部有子元素，如果给子元素添加了margin-top，结果父元素也会一起跟下来，导致了外边距塌陷的现象。我们可以在父元素中加入overflow:hidden，便可以解决外边距塌陷问题。那为什么子元素加了margin-t 大专栏关于为什么会造成外边距塌陷的分析 op，父元素也会跟下去呢？根据规范，一个盒子如果没有上补白和上边框的话，那么它的上边距会和它的文档流中的第一个子元素的上边距重叠。意思就是子元素的margin-top如果找不到父元素的border或者padding，就会与父元素的上边距重叠。来源： https://www.cnblogs.com/liuzhongrong/p/12365142.html

02-CSS基础与进阶-day5_2018-09-03-22-10-39

阅读更多关于 02-CSS基础与进阶-day5_2018-09-03-22-10-39

08盒模型之margin.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; padding: 4px; /* margin: 20px; */ /* margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; */ margin: 20px auto; /*左右auto 这样可以让块级带有宽度的盒子水平居中对齐*/ } span { margin: 0 auto; /*无效因为span是行内元素*/ } header { margin: 0 auto; /*无效因为没设置宽度*/ width: 400px; } </style> </head> <body> <div></div> <header>头部</header> <span>span</span> </body> </html> 来源： https://www.cnblogs.com/HiJackykun/p/11048277

都说知道 HashMap 线程不安全，那它为啥就不安全？

阅读更多关于都说知道 HashMap 线程不安全，那它为啥就不安全？

我们都知道HashMap是线程不安全的，在多线程环境中不建议使用，但是其线程不安全主要体现在什么地方呢，本文将对该问题进行解密。 1.jdk1.7中的HashMap 在jdk1.8中对HashMap做了很多优化，这里先分析在jdk1.7中的问题，相信大家都知道在jdk1.7多线程环境下HashMap容易出现死循环，这里我们先用代码来模拟出现死循环的情况： public static void main(String[] args) { HashMapThread thread0 = new HashMapThread(); HashMapThread thread1 = new HashMapThread(); HashMapThread thread2 = new HashMapThread(); HashMapThread thread3 = new HashMapThread(); HashMapThread thread4 = new HashMapThread(); thread0.start(); thread1.start(); thread2.start(); thread3.start(); thread4.start(); } } class HashMapThread extends Thread { private static AtomicInteger

盒模型的应用

阅读更多关于盒模型的应用

第一次写博客的我，心情贼紧张，哈哈。。废话不多说接下来我给大家分享的是盒模型里margin和padding的用法，希望能对各位看官有所帮助。盒模型具体的css属性分为两种： 1、margin（外边距）：它的含义你可以理解为同级元素之间我想让它俩产生上下间距或者左右间距时，可以使用margin，margin不会改变盒子内部的大小； 2、padding（内填充）：是长在内容与盒子之间的距离，主要控制子元素在盒子内部的位置关系，且padding只能添加在父元素上面，添加padding原先的盒子会被padding值撑开（变大）所以相应的父元素宽高需要减去padding值，如果一个块状元素没有设置宽高（被内容撑开的大小）padding的值不需要减去。以上是对盒模型具体的css属性的解释，下面我们看下实际操作案例（案例均使用的是div）假如我想让一个盒子里面的内容与盒子之间产生一定的间距，我们该怎么做，例如：我们想让文本对盒子的四周产生一定的间距，这个时候我们可以给这个盒子添加padding属性，让整个文本挤下来，代码实现与实现效果图如下：这个时候我想肯定有人在想用margin实现不可以吗？ margin的用途是同级元素之间产生间距，我们想让内容与盒子之间产生间距，最好还是使用padding在盒子有宽高的时候，添加padding值对应的宽高要减去，不然会影响你网页布局的大小。

订阅 margin