CSS
WEB_YH
一只会敲代码的猿
展开
-
为什么要清除浮动,什么时候要清除浮动,如何清除浮动
众所周知,CSS中的定位机制分为,文档流,浮动和绝对定位。(今天不谈绝对定位),如果对元素没有进行任何定位处理的话,元素应该处于文档流中,当我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。首先来看一下浮动会带来哪些result.第一:先看代码 效果:result :1、父盒子的margi原创 2016-11-16 14:03:46 · 4692 阅读 · 0 评论 -
margin边界重合问题及解决办法
当一个元素的顶边界与父元素的定边界重合(注意:只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。)看如下代码:HTML代码:CSS代码:我们预想的结果:可实际结果:边界重合带来的远远不止这些,当我们对P元素修饰margin垂直距离时,会导致父元素跟子元素一起进行margin操作。解决办法:原创 2016-11-19 13:36:57 · 1179 阅读 · 0 评论 -
CSS 盒子模型,绝对定位和相对定位
一、盒子模型: 标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。 CSS盒子模型具有内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。我们原创 2016-11-20 10:22:24 · 2731 阅读 · 0 评论 -
块级元素与行内元素的区别
htm元素一般分块级元素和行内元素。 块级元素:块级元素单独一行,可以设置宽度高度,可以设置margin,padding。可以成为其他元素的容器,可以容纳块级元素可行内元素。常见的块级元素有div, p ,h1~h6,ul,table,form,hr等。 行内元素:行内元素设置width无效,height无效(line-height除外),margin上下无效,原创 2016-11-20 10:53:04 · 564 阅读 · 0 评论 -
父子级间的z-index关系
自己经常用z-index改变层级,但从来没有在父子元素上使用。今天一个小伙伴在制作二级菜单的时候就碰到了这个问题,引起了我深深的思考,天啦噜,我竟然不知道!废话少说,先看代码 我们想通过使用z-index改变父子层级,使父亲的层级高于孩子,从而覆盖儿子,然而结果却不是我们想要的,无论我们怎么调高父亲层级,降低儿子层级都没有原创 2016-11-24 23:04:21 · 10361 阅读 · 4 评论 -
redraw(重绘)与reflow(回流)
redraw(重绘)与reflow(回流)重绘当页面元素样式改变时不影响元素在文档流中的位置时(比如background,color等)这时候浏览器只会将新样式赋予元素进行;重新绘制操作重绘不会带来重新布局,不一定回流回流当改变的操作响应文档内容或者结构,或者元素的位置时就会触发回流。主要有以下几种情况DOM操作(对元素的增删改,顺序变化)改变元素的位置内容变化,包括表单区域的文本变化css属性的...原创 2018-02-09 18:06:29 · 572 阅读 · 0 评论