font-size

inline-block 前世今生

冷暖自知 提交于 2019-12-06 15:30:17
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-block。(本文约定 display:inline-block 简写为 inline-block) 开篇我们来看几个问题: IE6、7 真的不支持 display:inline-block 吗? display:inline-block 后的元素为什么会产生水平空隙,这真的是 bug 吗? 如何更好的解决 display:inline-block 元素间产生的水平空隙? 一、inline-block 前世 1.认知 也许有人问你为何要写「 display:inline-block; *display:inline; *zoom:1; 」 来兼容 IE6、7 时,你会立马答道:因为 IE6、7 不支持 display:inline-block 呗!不知道何时起,惯性思维给开发者带来了这样一个可怕的概念。万物都是辩证的,当你写下这些的时候,可曾怀疑过大众观点真的可靠吗?也许你认为这些无关

CSS - Is it Possible to “Shrink Wrap” a Bounding Block to a Font's Cap and Baseline?

时光总嘲笑我的痴心妄想 提交于 2019-12-06 15:28:51
I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing? I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we want. Ex. Right-click a <p> tag on this page and hover the element in the dev console to notice that the

rem

可紊 提交于 2019-12-06 14:16:06
1 目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。 就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 使用%单位方便使用 css中的body中先全局声明font-size=62.5%,这里的%的算法和rem一样。 因为100%=16px,1px=6.25%,所以10px=62.5%, 这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来,很方便了吧! 使用方法 注意,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可; /*16px * 312.5% = 50px;*/ html{font-size: 312.5%;} /*50px * 0.5 = 25px;*/ body{ font-size: 0.5rem; font-size\0:25px; } @media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125%

click a button to change text font-size of <body> in javascript/css

限于喜欢 提交于 2019-12-06 12:43:02
问题 To get a clear picture of what i am doing check this example or check the following code This example is to change text size of h1, h2, p. Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text? $(document).ready(function() { $("#small").click(function(event) { event.preventDefault(); $("h1").animate({ "font-size": "24px" }); $("h2").animate({ "font-size": "16px" }); $("p").animate({ "font-size": "12px", "line-height": "16px" }); }); $("

MSWord: Change font and font-size

纵然是瞬间 提交于 2019-12-06 12:19:20
问题 Why does this VBA code not work?: Sub AllToGeorgia12() Selection.Font.Size = 12 Selection.WholeStory Selection.Font.Name = "Georgia" End Sub This code is meant to turn all the text into Georgia font of size 12 Edit 1 : (This edit is my answer to supporters Froeschli and Foole ): I am sorry: I didn't notice right away that the code with the first two lines swapped (just as you have suggested) works fine on its own. However, it doesn't change the font and size when I attach it to another piece

博客园主题美化

风格不统一 提交于 2019-12-06 10:14:12
主题作者的博客:https://www.cnblogs.com/Dy1an/,感谢作者! 本博客就是使用当前主题,具体效果如下: 页面定制 CSS 代码 * { margin: 0; padding: 0 } a { text-decoration: none; color: #1c2b36 } body { background-color: #fff; font-size: 13px; letter-spacing: 1px } #header { background-image: url(https://img2018.cnblogs.com/blog/979767/201911/979767-20191115092708101-1793403956.jpg); background-size: cover; min-height: 600px; } #header::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .8; background: #1C1D21; height: 600px; } #header a, h1, img { z-index: 1; color: white; position: relative; } #header

Change Font Size on rCharts Sankey Diagram

一世执手 提交于 2019-12-06 09:21:49
I'm using the following code to create a Sankey Diagram using rCharts. I wish to increase the font size of the text printed on the Sankey Diagram. I can't find a manual to show me how to do this. Thoughts? rm(list = ls()) require(reshape) require(rCharts) require(rjson) target <- c('TMF', 'TMF', 'TMF','Evaporation','Mill Reclaim','Void Losses','Seepage') source <- c('Precipitation & Run Off','Slurry','Other','TMF','TMF','TMF','TMF') value <- c(638,1610,755,118,1430,466,2) x <- data.frame(target,source,value) sankeyPlot <- rCharts$new() sankeyPlot$set( data = x, nodeWidth = 10, nodePadding = 10

css命名和书写规范

陌路散爱 提交于 2019-12-06 08:44:12
前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下... 1.命名规则说明 所有的命名最好都小写 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5" 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等 给每一个表格和表单加上一个唯一的、结构标记id 给图片加上alt标签 尽量不缩写,除非一看就明白的单词,不知道的用翻译软件翻译一下 无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名 如果名字过长可以用中横线但是拒绝使用下划线(IE6以可能出现解析错误,为了区分JavaScript变量名) bad .miantitle { color: #e3c; } .mian_title { color: #e3c; } good .mian-title { color: #e3c; } 11

【干货】前端rem单位的正确使用姿势

泪湿孤枕 提交于 2019-12-06 07:58:59
简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。 先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。 em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。 rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。 以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。 下面来说说怎么更方便的使用rem和自己开文处提到的坑! 之前遇到的坑是这样的。浏览器默认的字体大小都是16px(注意这里),所以要使1rem=10px

理解css中的长度单位

旧巷老猫 提交于 2019-12-06 07:58:46
很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~ css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米 mm——毫米 pt——point,大约1/72寸; pc——pica,大约6pt,1/6寸; px——屏幕的一个像素点; em——元素的font-size; ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。 我们常用的有px、%、em,px就不多说了,em和%多说点儿: 1 2 3 .box { line-height : 1.3em ; } 元素的行高是当前元素继承的font-size的1.3倍, 1 2 3 .box { font-size : 1.3em ; } 当前元素的字体大小是其继承的font-size的1.3倍。 1 2 3 .box { line-height : 130% ; } 元素的行高是当前元素继承的font-size的130%倍,等同于1.3em。 1 2 3 .box { font-size : 130% ; } 当前元素的字体大小是其继承的font-size的130%倍,等同于1.3em。 恩,迷惑了吗? em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。 而%对于font