任何元素，任何时间，任何地点？CSS-Tricks 有篇好文 讲到了各种居中的技巧。 注意： IE11 对 flexbox 的支持有点 bug。...使用 SVG 图标 没有理由不使用 SVG 图标： .logo { background: url("logo.svg");} SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器...{ max-height: 600px; overflow-y: scroll;} 鼠标移入滑块元素时增大它的 max-height 值，便可以显示溢出部分。...利用 Flexbox 去除多余的外边距 与其使用 nth-， first-， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性： .list...{ display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;} 列之间的间隙总是均匀相等。
1.3 没有宽度的时候，内容撑开宽度 （得到内联元素的属性） 1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性） ...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。...important 1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题 解决办法：给li加上 *vertical-align... （得到块的属性） 1.3 没有宽度的时候，内容撑开宽度 （得到内联元素的属性） 1.4 标签之间的换行间隙被解析（问题） ...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。
各中关系 内容会自适应 效果有局限性，行内块之间有缝隙 1.1.浮动布局（Float） 值 描述 left 元素向左浮动。...元素内容超出时会使其显示导致样式错乱。...它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。 ...1.3.设置表格布局display:table 设置display:table的元素会被以作为块级表格来显示，前后自带换行符。...注：被设置inline-block的元素与元素之间会产生微小的间隙 例：因为有间隙，导致父元素的宽度放不下两个宽度为50%的子元素，被挤到下方 ? 。 将子元素宽度调整为49%时。 ?
常见的布局属性 （1）display 确定元素的显示类型： block：块级元素。 inline：行内元素。...float 所带来的影响 1、对自身的影响： 形成“块”（BFC） 位置尽量靠上 位置尽量靠左/右 下面这两个并列的div1和div2，设置为浮动之后的效果：（都是尽量靠左显示的） ?...inline-block 布局 对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。 思路：像文本一样去排列 block 元素，没有清除浮动等问题。 存在的问题：需要处理间隙。...问题一：如果设置div2的宽度为 200px 之后，div2 掉下来。 问题二：div1和div2设置为 inline-block之后，这两个盒子之间存在了间隙。...这是因为，此时的 div1和div2 已经被当成文本了。文本和文本之间，本身就会存在间隙。
每个浏览器不同的内核，不同的处理引擎，不同的渲染引擎就会导致写同一条样式的时候出现差异 这个现象叫做做兼容 浏览器：Ie（6 7 8 9 10 11） 谷歌 火狐 苹果 Ie6 7的常见的兼容性的问题...（js文件引入） 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; （第二块元素也float） IE6下子元素超出父级宽高，会把父级的宽高撑开 (绕过) p 包含块元素嵌套规则...zoom:1) IE6 最小高度问题 (overflow:hidden) IE6 双边距 （*display: inline;） li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题...（*vertical-align: top;） IE6 7 父级元素的overflow:hidden 是包不住子级的relative （*position: relative; ） IE6下绝对定位元素父级宽高是奇数...,绝对定位元素的right和bottom值会有1px的偏差 （设为偶数） IE6 下input的空隙 （*float: left;） IE6 下 输入类型表单控件背景问题 （background-attachment
(4)超强显示效果 SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。...标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。...(2)浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到...(7)浏览器兼容问题七：透明度的兼容CSS设置 一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
通过盒模型的外边距 margin 拉开各元素之间的间隙、距离，使用 padding 来撑开自身的宽高 IE 盒模型 在低版本 IE 里，若不添加 display 属性 display 属性，元素的显示方式，规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型 值 描述 none 让元素隐藏、消失，不占据空间位置...block 让元素呈现块属性特点 inline 让元素呈现行属性特点 inline-block 行内块元素，让元素呈现行元素跟块元素的特性a.块元素的宽度默认由内容决定，不再是100%；b.行元素可以设置宽高...隐藏区域 显示区域 居中 让有宽度【非宽度100%】的块元素水平居中：margin:0 auto; 设置单行文本的竖直居中
虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷： 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。...，可以水平显示，不过 div 之间有间隙，不方便处理 */ /* display: inline-block; */ /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */...注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐 小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。...特 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 浮动(float)的应用（重要） 浮动和标准流的父盒子搭配 我们知道，浮动是脱标的，会影响下面的标准流元素...优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
说明他们的作用 block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。...inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...，如果没对CSS初始化往往会出现浏览器之间的页面显示差异 对BFC规范(块级格式化上下文：block formatting context)的理解？...，但是应该避免这种情况出现 display:inline-block 什么时候会显示间隙？...当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC 产生原因：当样式表晚于结构性html
transition 和 animate 属性 只要不使用 inline-block ，可以换行 只要不使用 text-shadow ，可以适用于任意背景 缺点 下划线距离文本较远，难以定位 需要很多不想关的属性才能正确显示...、浏览器及缩放级别下可能大小不同 SVG filters 我一直在考虑使用 SVG 滤镜的方法。...可以创建一个行内 SVG 滤镜元素画一条线，通过扩展文本边界遮盖下行字母附近的下划线。然后给滤镜一个 id ，通过 filter: url(‘#svg-underline’) 在 CSS 中引用它。...以下是在 Chrome 和 Firefox 中的效果： ? 在 IE、Edge 和 Safari 上的浏览器支持有问题。很难在 CSS 中测试 SVG 滤镜的支持情况。...如果你正在使用 Normalize.css ，需要知道当前版本为了浏览器之间的一致性而禁用了该属性。如果你想要这个优秀的下划线样式，你需要自己设置一下。
因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。 分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。...> 在 SVG 文档中嵌入 CSS 让我们可以为同一文档中的多个元素重用这些样式，但它会阻止 CSS 在多个文档之间共享。...偶数值确定间隙长度。甲stroke-dasharray的值5, 10的装置，该行程将5px长带的间隙10px每一划线之间。5, 5, 10交替5px和10px短划线长度的值，5px中间有间隙。...我们可以stroke-dasharray通过从零虚线长度和大间隙开始，并以大虚线长度和零虚线间隙结束来创建绘图效果。然后我们将在两者之间过渡。...您现在应该知道如何： 使用 CSS 设置 SVG 元素的样式 动画 SVG 属性 使用 CSS 媒体查询和matchMediaAPI 来显示和隐藏部分 SVG 文档
* 像文本一样 排列block元素 * 没有 清除浮动 等问题，简单易用 * 但是需要 处理间隙 多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。...不管使用什么字体，两个字之间 始终是有间隙的。 所以 间隙就出现在了 inline-block上面。 解决办法： 1....(因为 字体大小为0了 文字之间的间隙也就为0了) 为了显示inline-block内的文字, 要重新设置inline-block的font-size. 2....把inline-block元素 之间的 空隙注释掉，就可以了。 还是推荐使用 设置字体 的方式，来处理inline-block之间的间隙。...间隙原因：字符间距 解决方案：1.消灭空白字符：注释掉 标签之间的空白字符 2.消灭字符间距：把父级元素的字体大小设置为0，再设置元素自身的字体大小。 4.
假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了...在CSS中，html中的标签元素大体被分为三种不同的类型：块级元素、行级元素和行内块元素。...常用的块级元素有： 、、......、、 设置display:block转换 特征：1.一个块级元素独占一行； 2.元素的高度、宽度、行高以及顶和底边距都可设置； 3、元素宽度在不设置的情况下，是它本身父容器的...4、内联元素之间的间距问题：当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法：写在一行，之间不要有空格之类的符号。
如何实现盒子的左右对齐？ ? 虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷： 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。...，可以水平显示，不过 div 之间有间隙，不方便处理 */ /* display: inline-block; */ /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */...注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐 1.4 浮动(float)小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。...特 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 1.5 浮动(float)的应用（重要） 浮动和标准流的父盒子搭配 我们知道，浮动是脱标的，会影响下面的标准流元素...优点： 代码简洁 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行. block（块级元素）: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下...，块级元素会默认填满父级元素的宽度. ...inline-block（融合行内于块级）: 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点. 用通俗的话讲，就是不独占一行的块级元素。...两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。...c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下： 在ie6/7下： 对于行内元素直接使用{dislplay:inline-block;}
、CSS继承 CSS一直贯穿整个CSS设计的始终，每个标记都遵守继承 5、段落水平对齐使用text-align(有左对齐，右对齐，两端对齐，居中对齐),垂直对齐使用vertical-align（注意不能对块级元素起作用...来设置图片符号（浏览器兼容性有问题，建议使用list-style-type设置为none然后增加li的背景图设置padding-left的值来调整图片和文字的间隔），如果需要li水平显示需要li设置float...8、定位 div和span的区别在于div是块级标记可以包含span但是span不可以包含div，span是行内元素 float定位：可以向左靠紧float：left、float：right向右靠紧...，内容与边框的距离)、间隔（margin块和块的距离） 注意：设置的width和height的大小都指的是width+padding的值，IE不支持border-style，而且设置背景ie影响的是内容和间隙...注意margin如果设置行内元素就是相加，如果块级元素就是最大值，还有就是子块的margin将以父块的内容做参考就是实际大小就成了父块的padding加上子块的margin。
important关键字过滤器 它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法） 语法：选择符{属性：属性值！...1）、图片有边框bug 描素:当图片加在ie上会出现边框 hack:给图片加border：0；或者border：0 none； 2）图片间隙 描素:div中的图片间隙bug 在div中插入图片时图片将...转换为块级元素，给? 添加声明display：block； 3）双倍浮向（双倍边距）（只有ie6出现） 描素: 当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。...7）百分比bug 描素：在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。...（2）当li中的a转成block；并且有height 并有float的li没设置浮动会出现阶梯显示 hack：同时给li加float 9）当前元素（父元素里面的第一个子元素）与父元素没有设置任何浮动的情况下
说明他们的作用? inline（默认）–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-block 8 position的值？...*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE
，就可以清除浮动，解释一下，在.cf之前和之后，都会生成了一个“”，就是空，而display:table;，让生成的东西，当做块级表格来显示，这样就可以触发BFC，（Block formatting context...这次再看，蓝色块的上外边距没有到红色块外边，这样就解决外边距溢出的问题了，同样解决外边距溢出的问题，还可以用，边框和内边距来解决，比如，上面的代码中，如果给红色块设置了border，或者padding同样可以解决问题...注意：生成的东西（content:"";），是在元素内部，算是元素的子元素，不是同级元素，不是兄弟元素，这点要记住。...#iefix') format('embedded-opentype'), /* IE6-IE8 */ format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别 IE 6-8 是不支持...format() 这种格式说明的，只会读取类似 src:url() 这样的格式，所以 IE 6-8 会把第一个引号到最后一个引号之间的内容都当做字体的 URL，结果就会返回一个 404。
通常在IE6中出现的BUG。非常可能是由于布局的缘故而产生的，因而修复IE中BUG的时候，第一件事就是尝试通过规则迫使元素拥有布局来看是否能修复。...3）max-width：none之外的不论什么值 在IE6中由于布局而常出现的问题包含： 1）拥有布局的元素不会收缩：即是假设元素设定了尺寸，而元素内容超过元素尺寸时，通常是内容溢出到元素外，而IE6...3）相对定位的元素没有布局 4）在拥有布局的元素之间外边距不会叠加 5）在没有布局的块级链接上，单击区域仅仅覆盖文本 6）在滚动中。...列表项上的背景图片间歇性的显示和消失 2、hack和过滤器 1）IE条件凝视 a）适用于IE5及其更高版本号 <!...两个元素之间会自己主动加入一个3像素的间隙 修复：方法一：将非浮动元素设置为浮动；方法二：为非浮动元素设置规则：_zoom: 1; margin-left: value; _margin-left: value
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
