随笔分类 - css相关
摘要：1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 <![endif]--> 3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> 4. <!--[if IE 5]> 仅
阅读全文
摘要：有两种解决方式： 一种是用js直接给目标元素设置样式，来更改iframe里的样式； 第二种是动态给iframe加入你设计好的css文件，通过文件里的样式来达到更改目标元素的样式。 1、用js实现 1）原生js 1 var ifra = document.getElementById('iframe-
阅读全文
摘要：IE8支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得
阅读全文
摘要：一、box-flex 定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素 1 #p1 2 { 3 -moz-box-flex:1.0; /* Firefox */ 4 -webkit-box-flex:1.0; /*
阅读全文
摘要：经常会碰到，问一个 CSS 属性，例如 position 有多少取值。 通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个极少人了解的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值： initial inherit unset
阅读全文
摘要：实现一个三列布局的左右宽度固定，中间自适应。可以使用传统的css布局，也可以使用css3的新特性flex布局实现。 1.使用自身浮动法： 自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用m
阅读全文
摘要：一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，position（absolut
阅读全文
摘要：一、不确定宽高的盒子垂直水平居中 1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px; height: 500px; } .child { display: inline-
阅读全文
摘要：Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充
阅读全文
