CSS
文章平均质量分 73
奋斗中的小黄鸡
衣带渐宽终不悔,为伊消得人憔悴。
展开
-
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格,因转载 2014-09-10 19:56:01 · 618 阅读 · 0 评论 -
CSS概念之分层z-index
原文请参考:http://www.w3help.org/zh-cn/kb/013/层叠级别( Stack level )概述在前面的文章中已将 CSS 核心布局基础讲解完毕。主要涉及到3种布局方式,既:常规流,浮动和绝对定位1。使用这 3 种定位方式, 可以把框放到任何需要的地方。为了说明方便,我们把浏览器的可视窗口看作二维的坐标系,以左上角为原点。 假设两个元素分别形成了转载 2014-09-02 18:39:54 · 2237 阅读 · 0 评论 -
CSS概念之常规流( 块级格式化上下文/行内格式化上下文/行框/相对定位)
原文qingcan格式化上下文( Formatting context )格式化上下文指的是初始化元素定义的环境。包含两个要点,一个是元素定义的环境,一个是初始化。在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。 这两种上下转载 2014-09-02 18:33:38 · 1184 阅读 · 0 评论 -
CSS概念之定位体系(绝对定位position/浮动float/display)
原文摘自:三种定位体系简介框( box )布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。CSS2.1 中,一个框可以根据三种定位体系布局。CSS2.1 中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果。常规流( Normal flow )常规流,是对 "normal flow" 的直译。转载 2014-08-31 21:36:17 · 2990 阅读 · 0 评论 -
CSS概念之包含块(containing block)
原文摘自:http://www.w3help.org/zh-cn/kb/008/转载 2014-08-31 21:04:00 · 3235 阅读 · 1 评论 -
CSS概念之浮动float与clear
原文请参考:http://www.w3help.org/zh-cn/kb/011/#addtional_rule浮动( Float )概述浮动和文字环绕浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中,浮动框由浮动元素的框组成。 浮动框( 'float', 'floated' or 'floating' box )最有趣的特性是内容(Line Box转载 2014-09-02 18:41:57 · 982 阅读 · 0 评论 -
CSS中的框模型(box model)/margin、padding、border介绍/ 外边距层叠collapsing计算
框模型也叫做盒子模型,规定了4个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin),模型图如下所示:原创 2014-08-31 11:40:12 · 1938 阅读 · 0 评论 -
块状元素居中/浮动元素居中/绝对定位元素居中/内容居中
块状元素:margin-left=auto;margin-right=auto;浮动块状元素:外包装块“float:left;position:relative;left:50%”;内部块“float:left;position:relative;right:50%”内容居中方法内联元素:text-align:center;vertical-align:middle块状元素:dis原创 2014-08-31 12:38:44 · 4239 阅读 · 0 评论 -
CSS样式表来源以及“!important”规则
样式表的来源1、Author作者:即开发者 2、user用户:即使用浏览器的人 3、userAgent用户端:即浏览器用户端样式表:称作UA style,是浏览器默认的样式,如div元素浏览器默认其“display“为”block“用户样式表:是使用浏览器的用户自己设置的样式表。方法是:用户先自己定义一个css文件,然后通过浏览器的工具栏导入预先定义好的CSS文件。三种来源的样原创 2014-08-31 11:19:42 · 1339 阅读 · 0 评论 -
CSS特性的取值以及浏览器的对错误CSS特性值的容错处理
特性值分类名称说明整数包括负整数、0、正整数;如z-index属性的值必须为整数实数包括所有整数和小数;长度值+单位(px/em/cm etc.)注意必须要有单位(但0时可有可无)1、 相对长度单位em:相对于作用到该元素上的fon原创 2014-08-31 10:56:24 · 686 阅读 · 0 评论 -
CSS层叠顺序以及选择器特殊性计算
CSS层叠顺序为了找到元素的特性的指定值,用户端即浏览器要经历如下的排列顺序:原创 2014-08-31 11:28:30 · 987 阅读 · 0 评论 -
CSS特性值的计算
某个元素的特性值从开发者为其设置特性值到最后此元素特性值被渲染为最终实际效果,会经过以下4个步骤:步骤说明1、得到指定值即specified value指定值:可以通过多种方式设定1) 开发者手动明确设置2) 开发者没有明确设置,则使用继承值3) 如果以上2种情况都不是,则使用特性的默认值(浏览器默认)原创 2014-08-31 11:11:07 · 952 阅读 · 0 评论 -
CSS中的媒体类型media type
madia type作用首先要明白一点,我们平时写的HTML页面,可能在不同的媒体类型中显示,如可能显示在屏幕sreen上,也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时,需要的样式可能是不一样的。比如,一般在screen上显示时,页面字体要大一些,在纸质媒体显示时,页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢?这就要靠声明media type来实现了。原创 2014-09-11 17:08:23 · 2797 阅读 · 0 评论 -
替换元素(replaced element)与非替换元素(non-replaced element)
所谓替换元素(replaced element),就是元素本身没有实际内容,最终显示内容需要浏览器根据元素某些属性去判断的元素。如<img>元素,其最终的显示内容是由属性src决定的,如<input>元素,其最终显示的效果是由属性type决定的。常见的替换元素还包括:<textarea>、<select>、<object>。原创 2014-09-02 20:45:06 · 3338 阅读 · 0 评论 -
CSS引入方式以及<link>与@import区别
yinruCSS内联样式(直接在标签中用style)嵌入样式(在标签)外部链接样式(用标签或@import url( ))注意:使用@import时,必须保证写在的最前面原创 2014-08-31 11:29:15 · 684 阅读 · 0 评论 -
CSS Overflow使用
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!!根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为,我的意思是当盒子内外的内容改变的时候,它如何处理。比如,如果你没有设置一个盒子的高度,该盒子的高度将会根据它容纳内容的需要而增转载 2014-09-10 19:35:31 · 614 阅读 · 0 评论 -
理解display:inline、block、inline-block(兼容性)
要理解display:inline、block、inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素。块级元素总是另起一行开始;高度,行高以及顶、底边距都可以控制;宽度缺省是它所在容器的100%,除非设定一个宽度。块级元素通常作为其他元素的容器,可以容纳内联元素和其他块元素。blo转载 2014-09-17 14:49:23 · 932 阅读 · 0 评论