![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
web_hwg
编程路上的蜗牛
展开
-
纯css实现三栏式布局
1.相对定位+float+margin负值(圣杯布局)<div id="parent_rela"> <h3>使用relative:relative定位(圣杯布局)</h3> <div id="center_rela">我是中间</div> <div id = "left_rela">我是左边</div> <div id = "right_rela">我是右边<原创 2017-03-28 15:12:58 · 673 阅读 · 0 评论 -
理解BFC的原理及其作用
一、BFC是什么?在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档转载 2017-11-07 18:15:11 · 843 阅读 · 0 评论 -
三种左边定宽,右边自适应布局方式
css左边定宽,右边自适应原创 2017-08-16 16:54:15 · 537 阅读 · 0 评论 -
三种不定高的div垂直居中方式
css垂直居中原创 2017-08-16 16:47:49 · 3290 阅读 · 0 评论 -
CSS垂直居中的11种实现方式
转载地址[http://www.cnblogs.com/zhouhuan/p/vertical_center.html] ① 使用绝对定位和负外边距对块级元素进行垂直居中:<div id="box"> <div id="child">我是测试DIV</div></div>#box { width: 300px; height: 300px; background:转载 2017-07-25 11:40:08 · 750 阅读 · 0 评论 -
css制作三角形
【转载地址】http://www.cnblogs.com/xiaofeixiang/p/5022570.html 原理:定义空div,宽高为0,看成是两横两竖的盒子,两横在上面,箭头指向哪,哪边边框就为0,两边的边框就会靠在一起,形成一个顶点,两边的边框颜色则透明,三角形就是中间重叠部分切出来的HTML:<ul> <li class="row"> <span>四个三角<转载 2017-05-27 11:33:37 · 448 阅读 · 0 评论 -
详解css中px、em和rem的区别
一.概念1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是原创 2017-04-15 17:43:10 · 502 阅读 · 0 评论 -
:before/:after和::before/::after的区别
以前见过单冒号和双冒号的写法但没太注意,刚好学习css3碰到了::befroe/::after写法,就简单的总结下自己了解到的。 :before/:after这种写法css2中就有,叫伪类;::befroe/::after这种写法是css3中的,叫伪元素,但两种写法的作用是一样的。后者无法兼容IE低版本,如果要求兼容IE低版本请使用前者。注:对于img和input元素两者都不起作用用法:关键是原创 2017-04-13 16:44:28 · 1548 阅读 · 0 评论 -
新闻列表中标题和日期的左右分别对齐的几种处理方法
[链接原地址](http://blog.csdn.net/fungleo/article/details/50315437) 新闻列表中标题和日期的左右分别对齐的几种处理方法前言在新闻列表中,有标题和日期,然后分别对齐,这种应用场景非常广泛。而在前端实践中,其也有很多中布局方式。很多前端新手在入门时,可能会稍微有点迷茫。今天我列举几个常用的布局方法,便于新手学习。 这里只是为了实现转载 2017-03-24 15:01:58 · 1056 阅读 · 0 评论 -
移动端遮罩层滚动时,禁止底部滑动
参考文章关键css:body.modal-open { position: fixed; width: 100%;}关键js:// 解决移动端弹出层滚动穿透问题var ModalHelper = (function(bodyCls) { var scrollTop; return { afterOpen: function() {...原创 2018-05-31 11:02:44 · 3625 阅读 · 0 评论