CSS的flex布局(转载)
摘要:我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了。 flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布局的改变,最后再对属性做一个汇总 先看一下flex的基本模型,如下图所示: container父容器
阅读全文
CSS背景图拉伸自适应尺寸,全浏览器兼容
摘要:突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效。思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代。 当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云.... 对于IE而言网上常见的方法是使用CSS滤镜,但那时Fi
阅读全文
HTML标签CSS默认值研究
摘要:最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现html标签在不同浏览器里面是有默认的css样式的,要去掉默认样式,在样式表里添加 *{margin:0;
阅读全文
position:absolute、float、display:inline-block 区别
摘要:position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并
阅读全文
position:absolute和float会隐式的改变display类型
摘要:position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算
阅读全文
html中的块元素(Block)和内联元素(Inline)(转)
摘要:我们首先要了解,所有的html元素,都要么是块元素(block)、要么是内联元素(inline)。下面了解一下块元素、内联元素各自的特点: 块元素(block)的特点:1、总是在新行上开始;2、高度,行高以及顶和底边距都可控制;3、宽度缺省是它的容器的100%,除非设定一个宽度。 内联元素(inli
阅读全文
css中width和height默认值
摘要:width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最小值,以td为准,td没设宽度的话,就以td的内容自动撑开width;那这个div的width就是1...
阅读全文
css sprite demo
摘要:一张图片,用CSS分割成多个小图标。css样式:[css]view plaincopy.icon{background:url(../images/tabicons.png)no-repeat;width:18px;line-height:18px;display:inline-block;}.tu...
阅读全文
css垂直居中和水平居中
摘要:一、CSS 居中 — 水平居中DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题。可是这个方法有时候完全不起作用,而且对于布局是非常不科学的方法。正确的的设置写法如下(对页面构造没有影响):div {margin-...
阅读全文
inline-block 前世今生(转)
摘要:曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inl...
阅读全文
display:block什么时候使用
摘要:所有的块级元素不需要再在使用display:block定义,块级元素本身的默认属性就是blockdisplay:block;比较常用于这两个标签,因为他们不是块级元素,定义display:block属性后,定义width、height等和长宽相关的css属性才会生效。之前曾对div设置过displa...
阅读全文
INLINE-BLOCK和FLOAT(二)(转)
摘要:一、一抹前言没有爱的日子,时间如指尖细沙,不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前,然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告。由于自己肚子中的货...
阅读全文
inline-block和float
摘要:CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?浮动通常表现正常,但有时候搞起来会很纠结。特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用...
阅读全文
关于Block Formatting Context--BFC和IE的hasLayout(转)
摘要:转文请标明 --- 出处:穆乙http://www.cnblogs.com/pigtail/一、BFC是什么?BFC(Block Formatting Context)直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互...
阅读全文
css layout入门(转)
摘要:元素与盒在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的。元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为none的元素则不生成盒。除了元素之外,HTML中的文本节点也可能会生成盒。盒模型一个盒包括了内容(co...
阅读全文
CSS box-flex属性,然后弹性盒子模型简介(转)
摘要:一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下C...
阅读全文