![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS 笔记
文章平均质量分 54
CSS 的学习与总结
蓝色清晨_
不经一番寒彻骨,怎得梅花扑鼻香。
展开
-
vertical-align
为什么设置了vertical-align却没有任何作用?因为 vertical-align 起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display值为table-cell的元素。换句话说 vertical-align 属性只能作用在 display 计算值 为inline、inline-block、inline-table或 table-cell 的元素上。因此,默认情况下,、、等内联元素,、、等替换 元素,非 HTML 规范的自定义标签元素,以及单元格,都是支持 vertica原创 2021-03-09 15:19:29 · 100 阅读 · 0 评论 -
居中对齐的4中方式:Demo
兼容性不错的主流css绝对定位居中的用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-03-05 15:48:38 · 100 阅读 · 0 评论 -
translate与绝对定位、相对定位的区别
在表现上看,使用 CSS3 translate 函数和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移。实际上它们还是有不少的区别。一:元素视图属性中的 offsetLeft 和 offsetTop 属性。我们分别用相对定位和 translate 的方法来使元素产生位移:1.使用相对定位使元素产生位移 *{ margin:0; padding:0; } ...翻译 2019-07-14 20:02:19 · 3219 阅读 · 1 评论 -
利用CSS3属性实现元素的垂直水平居中
垂直水平居中是日常前端开发当中一个常见的需求,在支持 CSS3 属性的现代浏览器当中,有一个利用 CSS3 属性的垂直水平居中方法: .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -...翻译 2019-07-14 18:31:05 · 500 阅读 · 0 评论 -
ul高度显示为0的问题
当一个元素只包含浮动元素的时候,它会出现高度折叠,即元素的上下底边重合,和高度为0效果一样,为了解决这种情况,需要清除浮动。下面是具体的问题和方法。 代码:<div id="box"> <ul> <li style="background: #3CB371;"></li> <li style原创 2018-06-22 16:07:28 · 6202 阅读 · 0 评论 -
网页常用重置样式代码
html, body { height: 100%; }html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, s...原创 2018-05-10 17:49:16 · 2259 阅读 · 0 评论 -
彻底搞清楚rgba与opacity/filter的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rgba与opacity/filter的区别</title> <style> *{margin:原创 2018-04-19 14:16:13 · 275 阅读 · 0 评论 -
区分rgba()和opacity
R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数 | 百分数A:Alpha透明度。取值0~1之间。取值 为0表示完全透明,取值为1时表示完全不透明。rgba()和opacity都能实现透明效果,但区别在于rgba()只作用于元素自身的颜色或背景色,对元素的内容没有影响;opacity在作用于元素自身的颜色或背景色的同时,也作用于元素内的内容的透...原创 2018-04-17 13:56:43 · 996 阅读 · 0 评论 -
区分letter-spacing与word-spacing
letter-spacing 字符间隔:字母和字母之间的空白 对中文有效word-spacing 字间隔 :单词和单词之间的间隔 对中文无效<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&g原创 2018-04-17 13:47:25 · 405 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
inline-block元素主要包括: 、 、 、 、拥有内在尺寸,可设置宽高和内外边距,但是不会自动换行;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>去除inline-block元素间间距的N种方法 &原创 2018-04-17 13:41:38 · 239 阅读 · 0 评论 -
详解px与em的区别
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而国外,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部...原创 2018-04-17 13:22:04 · 1818 阅读 · 0 评论 -
IE6的双编剧BUG
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类:是精确按照设计图开发的前端开发人员,可以说是精确到1...原创 2018-04-17 13:14:47 · 200 阅读 · 0 评论 -
为什么我的背景图片加载不出来
曾经在html中编写网页的时候, 将外部的css样式表链接到网页中,其它像:background-color . padding , margin 等都可以正常起作用,但就是background-image不起作用,而且有时一气之下将background-image:url(“”绝对路径“”) ;就可以显示了,但是我们非常不提倡这种绝对路径的写法,那么出现这个现象的原因到底是什么呢? **...原创 2018-04-17 11:13:38 · 7369 阅读 · 0 评论 -
如何消除div之间的空隙
问题描述:三个div,变成行内块(display:inline-block)之后,div之间会产生空隙;如图所示: 产生的原因:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小div在大div中居中的方法&原创 2018-04-17 10:56:43 · 20542 阅读 · 4 评论 -
小div在大div中居中的方法
案例前提:大小div均有固定宽高方法一:.parent { width:800px; height:500px; border:2px solid #000; position:relative;}.child { width:200px; height:...原创 2018-04-17 10:35:47 · 717 阅读 · 0 评论 -
css折叠外边距
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则:1.两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时,它们会自动合成一个单独的外边距,取...原创 2018-04-17 10:24:18 · 229 阅读 · 0 评论