码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2018-08-14 14:47:55      阅读：204      评论：0      收藏：0      [点我收藏+]

标签：首字母   有一个   nload   alc   递增   jquer   选择器   let   结束   

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(飘零雾雨), dooyoe@gmail.com, 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(飘零雾雨), dooyoe@gmail.com, 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(飘零雾雨), dooyoe@gmail.com, 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大小也随之变化

技术分享图片

 

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

标签：首字母   有一个   nload   alc   递增   jquer   选择器   let   结束   

原文地址：https://www.cnblogs.com/zywds/p/9473463.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！