触发条件 (以下任意一条) float的值不为none overflow的值不为visible display的值为table-cell、tabble-caption和inline-block之一 position...的值不为static或则releative中的任何一个 在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别: BFC布局规则: 浮动的元素会被父级计算高度(父级元素触发了...文本阴影 FF 3.5, Opera 10, Safari 4, Chrome 3 border-colors 为边框设置多种颜色 FF3+ boder-image 图片边框 FF 3.5, Safari...开发中为什么要初始化css样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 10....CSS优化、提高性能的方法有哪些 尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处： 内容和样式分离，易于管理和维护 减少页面体积 css文件可以被缓存、重用
opera下的垂直居中，但是对ie系列无效 holder的 position:relative; holder div的 *position:absolute; top:50%; left:0;....holder p的 position: relative; top:-50%; 通过控制绝对层的位置实现ie6，7下的垂直居中 holder div中的*position:absolute是只给...ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中 <!...:table-cell; vertical-align:middle; 就可以实现在ff，safari和opera下的垂直居中，但是对ie系列无效 holder的 position:relative;...ie6，7下的垂直居中 holder div中的*position:absolute是只给ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%，在ie7
{ text-align:center; } 并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。...是CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。 Flexbox 已经被浏览器快速支持。...Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已经支持了本文中所描述的 Flexbox。...通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。...flexbox 的支持情况如下： Chrome 29+ Firefox 28+ Internet Explorer 11+ Opera 17+ Safari 6.1+ (prefixed with -webkit
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 用户体验：例如title、alt用于解释名词 有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别 方便其他设备解析（如屏幕阅读器...9.position属性和值的含义 position 属性规定元素的定位类型。 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...static 默认值。没有定位，元素出现在正常的流中 10.display:inline-block 什么时候不会显示间隙？...将子元素放置在同一行 为父元素中设置font-size: 0，在子元素上重置正确的font-size 为inline-block元素添加样式float:left 设置子元素margin值为负数 11.你对...创建BFC body根元素 设置浮动,float的值是left或者right 设置定位 position不是static或者relative 是absoulte或者fixed display的值是inline-block
在修改模板的过程中，需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。 未来，本文将持续更新。 1.... 首先，将大容器的定位为relative。 ...div#big{ position:relative; height:480px; } 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top...CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。 17....第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。
在修改模板的过程中，需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。 未来，本文将持续更新。 ? 1.... 首先，将大容器的定位为relative。 ...div#big{ position:relative; height:480px; } 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top...CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。 17....第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。
[Opera 内核原为：Presto，现为：Blink;] Webkit 内核：Safari，Chrome 等。...没有定位，元素出现在正常的流中 relative（相对定位）：生成相对定位的元素，相对于其正常（原先本身）位置进行定位 absolute（绝对定位）：生成绝对定位的元素，相对于 static...CSS 中 link 和@import 的区别 link 属于 XHTML 标签，@import 完全是 CSS 提供的一种方式，只能加载 CSS 加载顺序的差别，当一个页面被加载的时候，link...::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。...（伪元素由双冒号和伪元素名称组成）, 双冒号是在当前规范中引入的，用于区分伪类和伪元素 12.
当offsetParent为body时情况比较特殊: 在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body...总的来说两条规则： 1、如果当前元素的父级元素没有进行CSS定位(position为absolute或relative)，offsetParent为body。...2、如果当前元素的父级元素中有CSS定位(position为absolute或relative)，offsetParent取最近的那个父级元素。...准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5则弹出“undefined”。...getComputedStyle(oAbc,false).width); } 一个空白页面中body的id=”abc”，测试以上代码，IE和Opera弹出“auto”，其它三款浏览器则弹出“***px”
更新于2016年1月9日 这种特性底层原理是层叠上下文，具体可参见“深入理解CSS中的层叠上下文和层叠顺序”一文。...2transform限制position:fixed的跟随效果 我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative...可以看到，当页面滚动时候，只有中间的妹子被滚走了： 注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed还是fixed的表现。...visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。...4transform限制absolute的100%宽度大小 以前，我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算，没有就window.
static 或 relative 与 absolute 或 fixed 之间的主要区别在于它们在DOM流中占用的空间。...static 和 relative 保留其在文档流中的自然空间，而 absolute 和 fixed 则不保留空间，它们具有浮动行为。而新的sticky定位具有所有类型的相似性。...Stick 探索 在尝试使用 sticky 定位的过程中，我很快发现，当一个具有sticky定位样式的元素被包裹起来，并且它是包裹元素内唯一的元素时，这个被定义为sticky定位的元素并不会"粘"住。...让我来解释一下： Relative 定位（或Static定位）- 粘性定位元素类似于相对定位和静态定位，因为它保持DOM中的自然间隙（保持在流中）。...这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。
1 2 3 4 复制 首先，将大容器的定位为relative。...div#big{ position:relative; height:480px; } 1 2 3 4 复制 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它...CSS重置 CSS重置用于取消浏览器的内置样式，请参考YUI 和Eric Meyer 的样式表。 # 17....第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。...在IE6中设置PNG图片的透明效果 .classname { background: url(image.png); _background: none; _filter
百分比来设置 它们都有四个值，你可以单个设置，也可以一起设置，顺序为top-right-bottom-left 9).定位Position 1)).相对定位relative 相对于其正常位置进行定位 div...{ position:relative } 2)).绝对定位absolute 相对于 static 定位以外的第一个父元素进行定位 div{ position:absolute } 3)).静态定位...static 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） div{ position:static } 4)).固定定位fixed...: width 1s; /* Safari 和 Chrome */ -o-transition: width 1s; /* Opera */ } transition-property:应用过渡的Css...在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
dom 改变有高频低频之分，比如动画就要高频改变样式，而且现代浏览器都支持通过 GPU 做计算来加速渲染（硬件加速），怎么综合高频计算和低频计算、CPU 渲染和 GPU 渲染呢？...Safari Devtools 的图层分析工具 首先，Safari 的 Devtools 要手动开启下： 打开 Devtools，这个层就是今天的主角： 以掘金为例： 中间区域展示的就是页面中的图层...侧边栏是因为有 z-index 为负值的子元素所以创建的图层。 导航栏是因为 3 个原因创建的图层：元素有 3D 转换，有 position:fixed 的样式，元素可能有其他元素重叠。...3D 转换会创建图层是因为会用 GPU 做计算和渲染；position：fixed 会创建图层是因为脱离了文档流，而与其他元素重叠会创建图层也很好理解，重叠了嘛，一个图层渲染不了，所以在单独的图层渲染。...，也不能直接跳到元素，这点不如 Safari Devtools： 对比下 safari 的： 最重要的是图层创建的原因显示的不行： 显示的信息不够友好： 有的甚至都没显示原因： 综合看下来，在图层调试工具上
; height: 500px; background: #222222; position: relative; } .child{ width: 150px; height: 200px;...; } 2.使用transform属性实现【浏览器兼容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE10+】 同上，设置好定位...其中的translateX(-50%)表示将此元素在X轴上向左移50%元素宽度的距离，同理translateY(-50%)将元素在Y轴上向上移50%元素高度的距离。...; height: 500px; background: #222222; position: relative; } .child{ width: 150px; height: 200px;...(-50%); } 3.使用flex布局实现【浏览器兼容性：Safari 9+、 Chrome 29+、Firefox 28+、Opera 17+、IE10+】 首先给父元素设置
IE6 列表背景颜色失效的问题 问题： 当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效 解决： ul、ol、dl 都设置为position:relative...32. li中的内容以省略号显示 问题： li中内容超过长度时，想以省略号显示， 此方法适用于ie6-7-8、opera、safari浏览器 ff浏览器不支持 解决： li{width:200px;white-space...去除链接虚线边框的问题 问题： 当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框 解决： ie6/7中 设置为a {blr:expression_r(this.onFocus...css滤镜只在ie中有效，Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。...41. ff、chrome绝对定位无效 问题： 在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以
如图： css画桃心 .heart-body { width: 500px; margin: 100px auto; position: relative; } .heart-shape {...position: relative; width: 100px; height: 100px; background-color: #f70e0e; } 第二步： 将利用伪元素before和 :after...，在正方形的左边和上边各画一个正方形，然后再利用border-radius: 50%;属性，修饰下这两个正方形，然后就得到了两个圆,如图所示： .heart-shape:before, .heart-shape...); 属性将他们旋转45度，如图所示： .heart-shape { position: relative; width: 100px; height: 100px; background-color...: #f70e0e; -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /*
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。...1.垂直对齐 如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题： .vc{ position: relative; top: 50%..., opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+,...多边框 元素必须是相对定位，且具有足够的padding来显示多余的边框： #borders { position:relative; z-index:1; padding:30px;...移除IE中textarea的滚动条 textarea { overflow: auto; } 23.
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。...垂直对齐 如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题： .vc{ position: relative; top: 50%;.../* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9...多边框 元素必须是相对定位，且具有足够的padding来显示多余的边框： #borders { position:relative; z-index:1; padding:30px;...移除IE中textarea的滚动条 textarea { overflow: auto; } 23.
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。...# 二、static 属性值 static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。...如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。 注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。...div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。
{ position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这...下面就来了解下这个处于实验性的取值的具体功能及实用场景。 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。...元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。...SHIT，这么好的属性支持性居然这么惨淡。 ? IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早开始就支持 position:sticky 了。...如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
