css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分。也可以区分为替换元素与非替换元素。替换元素:浏览器根据标签的元素与属性来判断显示具体的内容。如 input标签,根据type显示内容。img标签,根据src显示内容。textarea、sel.....
分类:
Web程序 时间:
2015-05-29 21:31:29
阅读次数:
146
引子:
在谈到css定位问题的时候先来看一个小问题:
已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应.
效果如下图:
这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.
第一种实现方法,是借助css3的新属性calc,实现代码如下:
body {
margin: 0;
padding: 0;...
分类:
Web程序 时间:
2015-05-27 22:51:26
阅读次数:
294
1.前言我们都知道,IE对盒模型的渲染在StandardsMode和QuirksMode是有很大差别的,在StandardsMode下对于盒模型的解释和其他的标准浏览器是一样,但在QuirksMode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是QuirksMode。所以为兼容性...
分类:
其他好文 时间:
2015-05-26 18:38:55
阅读次数:
95
学一点前端很有必要,简单总结下。 在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model)。既然是模型,必定有矩可循,如果各不相同就不能叫模型了。 使用Chrome(当然FireFox也行)的右键->审查元...
分类:
其他好文 时间:
2015-05-26 06:45:12
阅读次数:
119
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使...
分类:
其他好文 时间:
2015-05-22 17:03:26
阅读次数:
100
1 outline属性不同于border属性,它绘制于元素框之上,但他不会占据空间。p{ outline:#00ff00 solid thick }p{ border:1px solid #00ff00 }2 盒模型表示一个元素所要占据的空间大小,其中元素的内容,内边距,边框粗细,外边距一起...
分类:
其他好文 时间:
2015-05-22 15:08:24
阅读次数:
138
由于平时不太用到,所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档,总算是对盒模型的浮动、定位有了比较深刻的理解。我们在实...
分类:
Web程序 时间:
2015-05-21 19:03:54
阅读次数:
110
概念和术语虽然现在我们可以使用 Flexbox 轻松创建布局,而不会像以前那样难以理解,但我们仍然需要花一些时间去熟悉到底如何使用 Flexbox。新的术语和概念可能会是我们使用 Flexbox 时的一个障碍,所以让我们先来了解以下它们。Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的dis...
分类:
其他好文 时间:
2015-05-20 18:04:32
阅读次数:
150