自省系列-3

发表于 | 分类于 ， ，

优雅降级和渐进增强

  • 优雅降级是优先考虑新版本浏览器可用性,使用最新写法,最后兼容老版本
  • 渐进增强是优先考虑老版本浏览器,最后考虑新版本增强写法

viewport

手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

1
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
属性名 取值 描述
width 正整数 (device-width) 定义视口的宽度，单位为像素
height 正整数 (device-height) 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes | no 定义是否允许用户手动缩放页面，默认值yes

px,em,rem区别

px

  • IE无法调整使用px作为单位的字体大小
  • 相对长度单位,像素px是相对于显示器屏幕分辨率而言的

em

  • 相对长度单位.

  • 如果当前行内文本字体未被设置,则相对于浏览器的默认字体尺寸

  • em的值不固定

  • em会继承父级元素的字体大小

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                font-size: 30px;
            }
            p {
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <span>lorem</span>
        <p>使用浏览器默认大小作为基准</p>
        <div>
            30px大小
            <p>继承div的font-size作为基准</p>
        </div>


    </body>
    </html>

rem

  • CSS3新增的相对单位
  • rem以根元素的font-size大小作为基准来计算大小

浏览器内核

浏览器内核：浏览器核心的部分，即 渲染引擎，负责对网页语法的解释 并渲染（显示）网页。

  • Trident （IE内核）
  • Gecko （FireFox内核）
  • Webkit （Safari内核，Chrome内核原型）
  • Blink （Chrome(28及往后版本)、Opera(15及往后版本)和Yandex）

盒模型

  • 标准模型: 包括margin,border,padding,content,标准模型的content不包括其他部分
  • IE模型: 包括margin,border,padding,content,IE模型的content包含padding,border部分
  • box-sizing: box-sizing|centent-box

伪类和伪元素

  • 伪类不存在文档流中,可以理解为对元素的样式控制
  • 伪元素存在于文档流中
  • 伪类使用:,伪元素使用::

为什么HTML5只要写<!DOCTYPE HTML>就可以了

HTML5和HTML4基于的标准不同.HTML4基于SGML,该标准是通用标记语言的集合.其中包含HTML,XHTML,因此需要DTD指定渲染标准.

CSS让文字变细

影响文字的粗细有三个元素

  • font-weight:字体粗细设置
  • font-family:指定的字体其实是一个系列,当字体变细时,会在系列中寻找细的字体.因此如果字体系列中只有一种,这个时候不管怎么调整都不会变化
  • -webkit-font-smoothing:Chrome 的抗锯齿属性。加上后会显得细一些，但是只针对 webkit 内核的浏览器才有效。

div模拟textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div模拟textarea的实现</title>
    <style>
        .edit {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h3>div模拟textarea的实现</h3>
    <div class="edit" contenteditable="true"></div>
</body>
</html>