font-size | 易学教程

Why are the font sizes different

阅读更多关于 Why are the font sizes different

问题 I've got the following html and css In Firefox the computed font size is 16.66667px In Chrome the computed font size is 13px Needless to say there is a good bit of difference in these two sizes, one is too small to read, one is nicely sized. I guess one way to work around it is to set the font size to 16.67px but why is this the case. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <style type="text/css"> body { font-family: Arial, sans

前端一些面试汇总

阅读更多关于前端一些面试汇总

要面试了，做了一些汇总 html页面结构 1.结构层：负责语义表达，解决页面内容是什么问题 2.表示层：由css负责创建，解决页面如何显示内容 3.行为层：由脚本负责（js），解决页面上内容应该如何对事件做出反应 css基本语句构成选择符{属性1：值；属性2：值2；} 主流浏览器内核 IE： Trident内核 Mozilla FireFox: Gecko内核 Chrome,Safari:Webkit内核 Opera:Presto内核浏览器兼容性有哪些 1、浏览器默认的margin和padding不同；加全局*{margin：0；padding：0}来统一 2、IE6双边剧BUG：块属性标签float后，有有横的margin情况下，在ie6显示margin比设置的大；可以加上display：inline； 3.在IE6，ie7元素高度超出自己设置高度。原因是IE8以前的浏览器会给元素设置默认的行高导致的。解决可以加上 overflow：hidden 或者是 line-height：；font-size：； 4.min-height：在IE6下不起作用。解决方案是height：auto；！important;height:xxpx;其中 xx就是min-height设置的值 5、透明性IE用filter：Alpha（opacity=60），而其他主流浏览器用opacity：0

学习css常用基本层级伪类属性选择器

阅读更多关于学习css常用基本层级伪类属性选择器

常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{} 基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素，层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b，伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色，属性选择器 [属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title

resset-rem.css

阅读更多关于 resset-rem.css

@charset "utf-8" ; /*=========================Reset_start==========================*/ body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option { margin : 0 ; padding : 0 ; } html,body { font-family : "微软雅黑" , "宋体" ,Arail,Tabhoma ; text-align : left ; } ul,ol { list-style : none ; } img { border : 0 none ; } input,select,textarea { outline : 0 ; } textarea { resize : none ; overflow : auto ; } table { border-collapse : collapse ; border-spacing : 0 ; } th,strong,var,em { font-weight : normal ; font-style : normal ; } a { text

blog主题——樱花

阅读更多关于 blog主题——樱花

贮存一下，blog代码 QAQ 页脚html  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>   <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script> <!-

怎样设置网页中的文字样式

阅读更多关于怎样设置网页中的文字样式

　　网页作为一种信息的载体，文字还是很重要的一部分的，这里就总结一下他的几种设置方法一、font标签　　font使用来设置文字的标准属性，但是由于一系列的原因已经不建议使用font标签来指定属性了，还是用css比较好，但是本文还是会介绍一下这种方法。font中可以设置很多种类的属性，比如(括号里面是效果)：　　1、颜色：设置红色<font color="red">你好</font> （你好）　　2、设置大小：设置字号为2和8<font size=2>字号2</font> <font size=8>字号8</font> （字号2 字号8 ）　 3、字体类型：face属性，可以用来指定字体，可选值有很多，这个属性只支持你机器上存在的字体（宋体楷体）二、css设置　　css设置字体样式远比用font标签更加强大，涉及的面更广。粗略总结如下：　　1、总的属性font，这个属性中可以设置下面的多个属性的值，调用方式（都可以缺省）　　　　 {font:font-style font-variant font-weight font-size font-family} 　　2、字体类型font-family：可以设置多种字体，用逗号分隔，浏览器会在你的电脑上注意寻找看是否能用，能用则选用该字体显示后面的字体无　　　　效

三.CSS层叠机制

阅读更多关于三.CSS层叠机制

概述层叠就是对样式的层叠。是某种样式在样式表中逐层叠加的过程。让浏览器对某个标签特定属性值的多个来源，最终确定使用那个值。层叠是整个CSS的核心机制。 HTML文档样式的来源 1.浏览器默认样式，每个浏览器本身就有一套默认的样式 2.用户样式，这对于视障用户很重要 3.作者样式。也就是Web开发者设计的样式浏览器层叠各个样式的顺序：浏览器会按照上面的顺序，依次检查每个样式的来源，并更新相关标签的设定，当整个检查更新结束后，再将每个标签以最终设定的样式显示出来层叠规则规则一：找到应用给每个元素和属性的所有声明。检查每一条CSS规则,并标记出受到影响的HTML标签规则二：按照顺序和权重排序浏览器依次检查5个来源，匹配并且更新有定义的值，声明也可以通过！important增加权重，例如 a{font-size: 30px;color: red !important;}，这里a的color值会始终被设置成red。而忽略5个样式表规则三：计算选择符特指度进行排序特指度(specificity)即一条规则有多么明确，选择符的特指度由它所包含多少标签、类名和id决定规则四：顺序决定权重在特指度相同的情况下，后声明的规则胜出补充： CSS特指度的计算规则 CSS选择符的特指度，由它选择符中包含标签的多少、class和id决定特指度的计算计分公式：“ I-C-E ”

自适应布局的解决方案

阅读更多关于自适应布局的解决方案

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配？那么趁此 Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。 DEMO 请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于

移动端的东西

阅读更多关于移动端的东西

适配方法： 1.固定高度，宽度自适应。 2. 固定宽度， viewport 缩放。（需要根据屏幕宽度动态生成 viewport ） 3. 用 rem 做宽度和高度。（也是根据屏幕动态生成）。这样可以让页面在不同的移动端都呈现一样的效果。如何实现响应式布局一、@media 媒体查询 <meta name=”viewport” content=”width=device-width.initial-scale=1.0”> @media all and (min-width:640px) and (max-width:740px){} <link type=text/css href> 总结 : 在实现媒体查询的布局中优势就是我们只需写好一个页面一个尺寸的样式以后剩下的就是复制黏贴，但可能要划分多个区间，区间越多改的越多划分区间的时候我们一定要将区间划分的明细从上到下从小到大，区间一定是开区间为什么会被用起来？基于媒体查询实现一套页面，能够适配不同的终端二、弹性盒子三、百分比使用百分比布局的方式就是参考设计图，对设计图规定的任何元素进行百分比换算如果页面存在一些复杂计算会导致计算量巨大，并且全局计算单位不可控四、em 一般使用么、作为响应式的标尺来计算页面中的元素大小只要那个地方用了 font-size 。里面的子元素都会以这个 font-size

HTML第14章：单位和值

阅读更多关于 HTML第14章：单位和值

14-1颜色值在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 1、英文命令颜色前面几个小节中经常用到的就是这种设置方法： p { color : red ; } 2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p { color : rgb ( 133 , 45 , 200 ) ; } 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p { color : rgb ( 20 % , 33 % , 25 % ) ; } 3、十六进制颜色这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 p { color : # 00f fff ; } 配色表：注： color的设置代码要写在head里的style里 14-2 长度值长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1、像素像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）

订阅 font-size