2017年11月20日
css边框内圆角
一、使用两个元素实现 html css 效果图 二、使用box-shadow+outline实现 html css 效果图 说明： 描边outline不会跟着元素的圆角走，因而会显示直角，但是box-shadow会跟着元素的圆角走，因此两者叠加起来刚好填补描边和容器圆角之间的空隙，这两者结合达到了我 Read More
posted @ 2017-11-20 16:02 孟丽媛 Views(612) Comments(0) Diggs(0) Edit
css多重边框
一、使用box-shadow实现多重边框 html css 效果图 值得说明的是，box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因此你需要按照此规律扩张半径。比如上面的代码，如果我们想在外层在加一个5px的外框，那么久需要指定扩张半径的值为25px（20px+5px）。上述方法所 Read More
posted @ 2017-11-20 15:35 孟丽媛 Views(265) Comments(0) Diggs(0) Edit
css半透明边框
html css 效果图 background-clip的用法详见https://www.w3cplus.com/content/css3-background-clip Read More
posted @ 2017-11-20 11:52 孟丽媛 Views(321) Comments(0) Diggs(0) Edit
2017年11月10日
css脱离文档流
所谓文档流，指的是元素排版布局过程中，元素会从左往右，从上 往下的流式排列。并最终窗体自上而下分成一行行，并在每一行中按照从左至右的顺序排放 元素。脱离文档流即将元素从普通的布局排版中拿走，其他盒子定位的时候，就当没看到他，两者位置重叠也是可以的。 脱离文档流的方式：浮动和定位。 1. 定位脱离文档 Read More
posted @ 2017-11-10 11:44 孟丽媛 Views(455) Comments(0) Diggs(0) Edit
2017年11月8日
margin负值的作用
一、左右负margin改变自身宽度 当元素不存在width或者width:auto的时候，负margin会增加元素的宽度。 html css 效果图 可以看到，div1多出了100px的宽度，正是因为加了负的margin。事实上，margin-left和margin-right都可以增加宽度。 2、 Read More
posted @ 2017-11-08 12:42 孟丽媛 Views(2672) Comments(0) Diggs(0) Edit
浅谈BFC
一、BFC定义 “块级格式化上下文”，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。 二、BFC布局规则 内部的Box会在垂直方向，一个接一个的放置； Box垂直方向上的距离由margin决定，属于 Read More
posted @ 2017-11-08 11:34 孟丽媛 Views(166) Comments(0) Diggs(0) Edit
2017年11月6日
css多列布局
一、左侧定宽，右侧自适应 1. 使用float和margin实现 html css 效果图 2. 使用float+margin(fix)实现 html css 3. 使用float+overflow实现 html css 效果图 如何实现两侧等高？ html css 效果图 parent设置over Read More
posted @ 2017-11-06 18:07 孟丽媛 Views(339) Comments(0) Diggs(0) Edit
css布局--水平垂直居中
1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html css 2. 使用positon实现水平垂直居中 html css 3. 使用flex实现水平垂直居中 html css Read More
posted @ 2017-11-06 16:33 孟丽媛 Views(293) Comments(0) Diggs(0) Edit
css布局--垂直居中
1. 使用table-cell和vertical-align实现垂直居中 html css 效果 2. 使用line-height和vertical-align实现垂直居中 html css 效果图 3. 使用position实现垂直居中 html css 4. 使用flex实现垂直居中 html Read More
posted @ 2017-11-06 16:14 孟丽媛 Views(148) Comments(0) Diggs(0) Edit
css布局--水平居中
一、水平居中 1. 使用text-align和display:inline-block实现水平居中 html css 2. 使用margin：0 auto并设置宽度实现水平居中 html css 3. 使用margin:0 auto和display:table实现水平居中 html css 4. 使 Read More
posted @ 2017-11-06 15:53 孟丽媛 Views(136) Comments(0) Diggs(0) Edit