Css
理解CSS相对定位和固定定位
一般地，说起定位元素是指position不为static的元素，包括relative、absolute和fixed。前面已经详细介绍过absolute绝对定位的基础和应用，这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识 相对定位定义 可能理解起来最简单的定位机制就是相对定位了。...
CSS绝对定位的应用
之前的博客文章已经详细介绍过绝对定位的基础知识，由于它的用途实在广泛，于是单独为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此 当元素绝对定位后，若该元素的格式化属性不发生变化，则该元素处于静态位置。关于绝对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置，更确切...
深入理解CSS绝对定位absolute
前面已经介绍了定位的偏移和层叠，例子中大量的应用了绝对定位。因为相较于相对定位和固定定位，绝对定位在实际中应用频率更高、应用场景更广泛。本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定位时，会从文档流中完全删除。元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于初...
深入理解CSS中的margin负值
margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。它看似简单，实际上却蛮复杂，本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此 表现 ...
深入理解CSS定位中的堆叠z-index
对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index 定义 利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系...
深入理解CSS定位中的偏移
CSS有三种基本的布局机制：普通流、浮动和绝对定位。利用定位，可以准确地定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left这四个偏移属性。本文就定位中的偏移做详细介绍 pos...
深入理解CSS元素可见性visibility
visibility属性常见于与display属性的比较中。但实际上，该属性有自己的一些有趣的用途。本文就visibility属性做详细整理和说明 定义visibility 值:visible|hidden|collapse|inherit 初始值:visible 应用于:所有元素 继承性:有&n...
CSS滚动条
滚动条在网页中经常见到，却并没有受到足够的重视。只有当因为滚动条的问题需要处理兼容性时，才进行调试操作。本文就滚动条的常见内容进行梳理 条件 滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll，并且元素的内容超出元素区域时，才有可能出现滚动条 默认 ...
CSS拉伸resize
CSS3新增了resize属性，该属性允许用户通过拖动的方式来修改元素的尺寸。本来resize应该翻译为缩放，但在实际测试中通过resize属性只可以在宽高基础上实现拉伸效果，而无法实现缩放到小于宽高的效果。 [注意]IE浏览器不支持resize属性resize resize与overflow关系紧密，只有当元...
深入理解CSS溢出overflow
当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况 定义overflow溢出 值:visible|hidden|scroll|auto|inherit 初始值:visible 应用于:块级元素、替换元素、表单元格 继承性:无 [注意]除了IE7-...
CSS裁剪clip
CSS裁剪clip这个属性平时用的不多，但其实它并不是CSS3的新属性，很早就开始出现了。本文将介绍关于clip属性的相关知识 定义 一个绝对定位或固定定位元素通过使用属性clip可以改变剪裁区域的形状，但并不改变元素本身的宽高属性clip 值:rect(top,right,bottom,left)|...
CSS轮廓outline
轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。利用轮廓，浏览器可以合并部分轮廓，创建一个连续但非矩形的形状。默认地，轮廓是一个动态样式，只有元素获取到焦点或被激活时呈现 [注意]IE7-浏览器不支持轮廓样式 与边框类似，轮廓最基...
CSS光标cursor
在浏览器中，光标对于提供交互反馈很有用。通过在不同的场景中改变光标，就能赋予其不同的含义 定义 cursor光标 值:[<uri>,]*[auto|default|pointer|crosshair|move|e-resize|ne-resize|nw-resize|n-resize|se...
CSS清浮动
人们经常谈起清浮动，其实就是解决浮动元素的包含块高度塌陷的问题 定义clear清除 值:left|right|both|none|inherit 初始值:none 应用于:块级元素(块级元素指block元素，不包括inline-block元素) 继承性:无left:左侧不允许存在浮动元素right...
深入理解CSS浮动
浮动最早的使用是出自<imgsrc="#"align="right">，用于文本环绕图片的排版处理。如今浮动作为CSS中常用的布局方式，本文将就浮动内容做详细介绍和梳理 定义float浮动 浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止 值:...
