css3与页面布局-概要，选择器，特殊性，刻度单位

Q1：选择器

1.id选择器(#):以#开始，引用时使用id，如id="div1"

2.类选择器(.):以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"

3.标签选择器:以标签名称开始，如p,span,div,*

4.伪类选择器:a:hover，a:link，a:visted，a:active。

Q2：在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

2.关系选择器

包含选择器：E F：选择所有被E元素包含的F元素（与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...）

<style>
    /* 包含选择符(E F) */
    .demo div { border:1px solid #f00; }
    /* 子选择符(E>F) */
    .demo > div { border:1px solid #f00; }
</style>
<div class="demo">
    <div>0
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；

子选择器:E>F：选择所有作为E元素的子元素F。(与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。)

.demo > div {
    position: relative;
}

<div class="demo">
    <div class="a">
        <div class="b">子选择符</div>
    </div>
</div>

此例只有 .a 会被命中，因为它是 .demo 的子元素；

相邻选择器：E+F：选择紧贴在E元素之后F元素。（与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。）

兄弟选择符:E~F:选择E元素后面的所有兄弟元素F。(与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。)

<style>
    /* 相邻选择符(E+F) */
    p+p{color:#f00;}
    /* 兄弟选择符(E~F) */
    p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

//实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            <span>span1</span>
            <div id="div2">
                <span>span2</span>
            </div>
        </div>
        <span>span3</span>
    </body>
</html>

结果：

如上面所示，我们用到的是后代选择器，所以span1和span2变颜色

3.属性选择器

E[att]:选择具有att属性的E元素。

E[att="val"]:选择具有att属性且属性值等于val的E元素

E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

<style>
div[class~="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

<style>
div[class|="a"] {
    border: 2px solid #000;
}
</style>

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头

伪类选择器

E:link:设置超链接a在未被访问前的样式

E:visited:设置超链接a在其链接地址已被访问过时的样式。

E:hover:设置元素在其鼠标悬停时的样式。

E:active:设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

超链接状态顺序：a:link{},a:visited{},a:hover{},a:active{}

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te,
即用喜欢(love)和讨厌(hate)两个词来概括

E:focus:设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        input:focus{
            width: 200px;
        }
    </style>
    <body>
        <input type="text"/>
    </body>
</html>

E:lang(fr):匹配使用特殊语言的E元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>lang</title>
<meta charset="utf-8"/>
<style>
p:lang(zh-cmn-Hans) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}
</style>
</head>
<body>
<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">english</p>
</body>
</html>

E:not(s):匹配不含有s选择符的元素E。

有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线

.demo li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线

E:root:匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
html:root {
    color: #f00;
}
</style>
</head>
<body>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>
</body>
</html>

结果:

颜色都改变

E:first-child:匹配父元素的第一个子元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

这个需要好好讲解一下:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
    ul:first-child{
        color: red;
    }
</style>
</head>
<body>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>
</body>
</html>

当为ul:first-child是，你会看到li全部变色

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
    li:first-child{
        color: red;
    }
</style>
</head>
<body>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>
</body>
</html>

当为li：first-child是只有第一个变色

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
    p:first-child{
        color: red;
    }
</style>
</head>
<body>
<div>
    <p>第一个</p>
    <span>第二个</span>
</div>
</body>
</html>

当p为第一个位置是，变色

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>root</title>
<meta charset="utf-8" />
<style>
    p:first-child{
        color: red;
    }
</style>
</head>
<body>
<div>
    <span>第二个</span>
    <p>第一个</p>
</div>
</body>
</html>

当p为第二个位置时，不变色

总结:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

E:last-child:匹配父元素的最后一个子元素E。

E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素

E:only-child：匹配父元素仅有的一个子元素E。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>only</title>
<meta charset="utf-8" />
<style>
h1 {
    font-size: 16px;
}
li:only-child {
    color: #f00;
}
</style>
</head>
<body>
<h1>只有唯一一个子元素</h1>
<ul>
    <li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
</ul>
</body>
</html>

E:nth-child(n):匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)

使用E:nth-child(n)实现奇偶：

<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

该选择符允许使用一些关键字，比如：odd, even

<style>
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
</style>

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
</ul>

关键字odd代表奇数，even代表偶数

有一点需要注意的是：

<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
    <p>第4个p</p>
    <p>第5个p</p>
</div>
p:nth-child(2){color:#f00;}

很明显第2个p会被命中然后变成红色

p:nth-child(3){color:#f00;}

这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

p:nth-child(4){color:#f00;}

这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

总结:E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：

p:first-of-type{color:#f00;}

或者这样写：

p:nth-of-type(1){color:#f00;}

E:nth-last-child(n):匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)

其余与上面相反

E:first-of-type：匹配同类型中的第一个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

E:last-of-type：匹配同类型中的最后一个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E

E:only-of-type：匹配同类型中的唯一的一个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>only-of-type</title>
<meta name=charset="urf-8" />
<style>
p:only-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div class="test">
    <p>结构性伪类选择符 E:only-of-type</p>
</div>
</body>
</html>

E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

E:empty:匹配没有任何子元素（包括text节点）的元素E。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:empty_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
<style>
p:empty {
    height: 25px;
    border: 1px solid #ddd;
    background: #eee;
}
</style>
</head>
<body>
<div class="test">
    <p>结构性伪类选择符 E:empty</p>
    <p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
    <p>结构性伪类选择符 E:empty</p>
</div>
</body>
</html>

E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
<style>
input:checked + span {
    background: #f00;
}
input:checked + span:after {
    content: " 我被选中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
    <legend>选中下面的项试试</legend>
    <ul>
        <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
        <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
        <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
    </ul>
</fieldset>
<fieldset>
    <legend>选中下面的项试试</legend>
    <ul>
        <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
        <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
        <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
    </ul>
</fieldset>
</form>
</body>
</html>

E:enabled:匹配用户界面上处于可用状态的元素E。

E:disabled:匹配用户界面上处于禁用状态的元素E。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:enabled_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
<style>
li {
    padding: 3px;
}
input[type="text"]:enabled {
    border: 1px solid #090;
    background: #fff;
    color: #000;
}
input[type="text"]:disabled {
    border: 1px solid #ccc;
    background: #eee;
    color: #ccc;
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
    <legend>E:enabled与E:disabled</legend>
    <ul>
        <li><input type="text" value="可用状态" /></li>
        <li><input type="text" value="可用状态" /></li>
        <li><input type="text" value="禁用状态" disabled="disabled" /></li>
        <li><input type="text" value="禁用状态" disabled="disabled" /></li>
    </ul>
</fieldset>
</form>
</body>
</html>

E:target:匹配相关URL指向的E元素。

Q3:

特殊性:

a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式：内嵌在元素中，<span style="color:red">span</span>

内部样式表：在页面中的样式，写在<style></style>中的样式

外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高

计算特殊性值：

内嵌>ID>类|属性|伪类>标签

1.如果样式是行内样式（通过Style=“”定义），那么a=1,0,0,0
2.b为ID选择器的总数 0,1,0,0
3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0

4.d为标签、伪元素选择器的数量 0,0,0,1

5.!important 权重最高，比 inline style 还要高(就好比它为11000)

举个例子:

html body:0002

html body #a:0102

html body div#a:0103

html .a:0011

Q4:刻度

刻度非常强大，被称为是适应布局的神器

在CSS中刻度是用于设置元素尺寸的单位。

特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

em:

相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div2{
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

如上：父元素未设置，所以它相对的是默认大小，div2的大小为80px

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

如上：设置了父元素的大小，所以div2是相对于父元素，最后div2结果为100px

rem

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小

rem（font size of the root
element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of
the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

如上所示，只设置了父元素，根元素并没有发生变化，因此div2的结果为5*16=80px

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            html {
                font-size: 10px;
            }
            body {
                font-size: 16px;
            }
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

如上：设置了根元素（html）大小为10px,本应该div2的大小为5*10=50px,但结果并不是，是因为谷歌限制了最小的大小为12px，所以结果为5*12=60px

为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rem phone test</title>
        <!--
            描述：视口
        -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                height: 100%;
                width: 100%;
                font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘;
                font-size: 20px;
                overflow: hidden;
                outline: 0;
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                -ms-text-size-adjust: none;
            }
            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                -webkit-user-select: none;
                /*取消用户选择*/

                width: 100%;
            }
            header,
            footer {
                width: 100%;
                line-height: 1.5rem;
                font-size: 1rem;
                color: #000;
                border: 1px solid #ccc;
                text-align: center;
                background-color: #ccc;
            }
            .bd {
                margin-top: 1rem;
                margin-bottom: .5rem;
                margin-right: -.5rem;
                font-size: 0;
            }
            .bd:after {
                clear: both;
            }
            .box {
                width: 5rem;
                height: 5rem;
                display: inline-block;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }
            .blue-box {
                background-color: #06c;
            }
            .org-box {
                background-color: #1fc195;
            }
        </style>

    </head>
    <body>
        <header>我是头部</header>
        <div class="bd">
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
        </div>

        <footer>我是页脚</footer>

        <script>
           /*
           ;(function(win){
              win.alert("Hello IIEF");
           })(window);
           */

             //定义一个方法并执行
            (function(doc, win) {
                //获得文档的根节点html
                var docEl = doc.documentElement;
                //如果window中存在orientationchange对象，则取orientationchange,否则取resize
                //为了事件绑定
                resizeEvt = ‘orientationchange‘ in win ? ‘orientationchange‘ : ‘resize‘;
                //定义一个方法，重新计算font-size大小
                var recalc = function() {
                    //页面的宽度
                    var clientWidth = docEl.clientWidth;
                    //如果没有宽度则退出
                    if (!clientWidth) return;
                    //重新计算font-size大小，假定320的宽度时字体大小为20;，当页面变化时重新设置字体大小
                    docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;
                };
                //如果浏览器不支持添加事件监听则结束
                if (!doc.addEventListener) return;
                //添加事件监听，指定事件处理函数的时期或阶段(boolean)true表示在捕获事件执行，false表示冒泡时执行
                win.addEventListener(resizeEvt, recalc, false);
                //当Dom树加载完成时执行计算，DOMContentLoaded事件要在window.onload之前执行
                doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
            })(document, window);
        </script>
    </body>

</html>

一个简单的实现代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        html{
            font-size: 20px;
        }
        .div1{
            border: 1px solid red;
            width: 5rem;
            height: 5rem;
            background: red;
            font-size: 1rem;
            float: left;
            margin-left: 1rem;
            margin-top: 1rem;
        }
    </style>
    <body>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <div class="div1">老张</div><div class="div1">老张</div>
        <script>
            //load页面所有资源加载完成
            //JavaScript同步加载
            //图片异步加载
            /*window.addEventListener("resize",function(){
                var w = document.documentElement.clientWidth;
                 document.documentElement.style.fontSize = (w * 20) / 500 + "px";
            },false);*/
            ;(function(win){
                var doc=win.document.documentElement;
                var changfont=function(){
                    doc.style.fontSize=(doc.clientWidth*20)/500+"px";
                };
                window.addEventListener("resize",changfont,false);
            })(window);
        </script>
    </body>
</html>

结果:

窗口变小，div大小也随之变化

原文地址：https://www.cnblogs.com/zywds/p/9473463.html

时间： 2024-10-16 02:09:43

css3与页面布局-概要，选择器，特殊性，刻度单位的相关文章

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)--概要.选择器.特殊性与刻度单位 目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先级) 3.2.计算特殊性值 四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

CSS3与页面布局学习笔记（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结（五）——Web Font与Sprite

CSS3与页面布局学习总结(五)--Web Font与Sprite 目录 一.web font 1.1.什么是font-face 1.2.font-face优点 1.3.字体格式 1.4.使用@font-face 1.4.1.下载字体 1.4.2.使用font-face将字体引入web中 1.4.3.应用字体 1.4.4.字体格式转换 1.4.5.查看字体编码 1.4.6.base64内嵌字体 二.CSS Sprite 2.1.将小图片合并 2.2.使用CSS分离图片 2.3.小结 三.示例下载

玩转CSS3(一)----CSS3实现页面布局

摘要: CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的布局方式. DIV+CSS其实是错误的叫法 关于当前的页面布局,很多人都习惯于叫做DIV+CSS,其实这是一种错误的叫法,标准叫法应该叫做XHTML+CSS. 这是为什么呢?传统的页面布局采用的是Table布局,即Table+CSS,后来出现了使用DIV的布局方式,所以人们就把它叫做DIV+CSS,而且有些人认为用DIV+CSS制作的页面才是标准页面,其实这句话

CSS3与页面布局学习总结（四）——页面布局的多种方法

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结——多种页面布局

一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见用法如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: 示例代码: <!DOCTYPE html> <html> <he