css
文章平均质量分 66
小章鱼哥
这个作者很懒,什么都没留下…
展开
-
css负边距可以实现的布局(上)左固定右自适应,多行多列,等高布局
css负边距原来有这么大的妙用。 今天看了一篇大大的博文: css的负边距(margin负值)的绝招负边距可以做的事有很多。 可以增大元素的宽度 可以实现多列多行布局 左侧固定右侧自适应布局 等高布局 圣杯布局 双飞翼布局 1.左侧固定,右侧自适应布局实现效果:左侧200px宽,右侧自适应,中间间隔10px。请用两种方法来实现。先不考虑兼容性<div class="parent"> <d原创 2016-08-02 13:18:12 · 2319 阅读 · 0 评论 -
CSS水平居中,浮动水平居中,绝对定位水平居中
1.level0–行内元素水平居中body{ text-align:center; }思路:body或父容器设置text-align:center;即可。2.level1–水平居中以下都是对块状元素而言。 <style> .basic{ width:200px; height:200px; background-color:red;原创 2016-07-25 14:14:39 · 603 阅读 · 0 评论 -
各种各样的水平垂直居中
1.垂直居中1.高度固定 单行文本思路:使用line-height = height。html:<!--父元素高度确定,单行文本--> <div class="wrap"> <div class="num">你好呀</div> </div>css: *{ margin: 0; padding: 0; } .wr原创 2016-08-14 16:30:32 · 444 阅读 · 0 评论 -
多元素水平居中+小三角布局
做完公司的活啦。写俩题。1.多元素居中布局需求:实现多个方块水平居中。每个方块中文字水平垂直居中。思路: 如何实现多div水平居中呢? display:inline-block 如何实现文字水平居中呢? text-align:center 如何实现文字垂直居中呢? line-height等于height源码: <div class="wrap"> <div class原创 2016-07-26 16:36:50 · 943 阅读 · 0 评论 -
display:table-cell实现左侧浮动右侧自适应+等高布局
1.display:table-cell实现左侧浮动右侧自适应实现效果: 实现代码: <!--使用table-ceil实现左侧浮动右侧自适应--> <div class="container"> <a class="fl"><img width="150px" height="200px" src="http://img4.duitang.com/uploads原创 2016-07-25 16:56:44 · 7022 阅读 · 0 评论 -
【css进阶】从css的position开始
1.css的几种position我们知道css的position有以下几种值 - absolute - relative - fixed - staticabsolute:绝对定位。可以使用left,right,top,bottom定位。对象脱离常规流,偏移参照离自身最近的已定位祖先元素,如果没有定位的父元素,则一直回溯到html。偏移之后,会产生塌陷,并且在文档流中不占有位置。re原创 2016-08-20 21:39:32 · 687 阅读 · 1 评论 -
postcss插件开发:全局添加namespace
文章目录postcss开发postcss插件单元测试结语 好久不见~ 话不多说 postcss 一款css处理的平台,官方文档提供非常全面的api,可以对css的定义,修饰,语句进行定制。 常见很多postcss基础的插件,在官方git仓库中都有提到:https://github.com/postcss/postcss 开发postcss插件 我这边有一个需求,是希望可以全局添加一个namesp...原创 2018-12-16 13:33:30 · 4783 阅读 · 0 评论