标签： em 字体大小 元素 浮动 浏览器 type

1-css中的pxemrem长度单位的区别？

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点 

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

 

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

       也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem特点 

        rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

 

一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 

        选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

2-css3新增伪类有哪些？并说明

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。    
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。  
:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。    
:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。 
:root    :root    选择文档的根元素。  
:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。 
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input> 元素。 
:disabled    input:disabled    选择每个禁用的 <input> 元素 
:checked    input:checked    选择每个被选中的 <input> 元素。 
:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

3-说明css选择器优先级顺序及判定标准

• 不同级别
• 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 元素选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

  总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

• 同一级别

• (1) 同一级别中后写的会覆盖先写的样式

  (2) 同一级别css引入方式不同，优先级不同
  总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

4-position几个属性的作用？

1）Static：

默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略,任何 top、bottom、left 或 right 声明）。一般不常用。 2）Relative： 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管 其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。 3）Absolute： 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父 容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。 4）Fixed： 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。

 

5-绝对定位和固定定位的区别？

绝对定位中当一个DIV块的位置被定义为绝对定位的时候，也就失去了文档流即失去原本的位置，并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找，直到找到body为止)来进行偏移,

固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移

6-浮动的作用和影响

文档流：所有的内容都是占位的，正常情况下：
    块元素：上下显示，独占一行
    内联元素：水平排列，左右显示
  浮动改变块元素的排列方式，让内容从上下排显示成水平显示。
同时了解float的属性值：
    left 左浮动
    right 右浮动
    none 不浮动
  
  注意：
    浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠；
    如果想要内容都水平排列，需要所有的盒子都设置浮动
    如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示
    浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子

 元素类型受浮动的影响
（不占位，脱离文档流）
块元素：
    元素不设置宽，宽度是父元素的宽，如果设置浮动，块元素的宽度由内容撑开
内联元素
    可以设置宽高
    margin和padding可以设置四个方向
    空格的间隙也能取消
父盒子的高度塌陷: 父盒子高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的, 现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度就他塌陷了.

清除浮动的影响

1: 给父盒子定高 height

缺点: 不实际 实际中就是有时侯高度就是auto

2: 给父元素加overflow:hidden属性

触发BFC规则 (私人区域)

处于BFC规则的盒子 其外的元素不会影响到它,它内部的元素也不会影响其外的盒子

BFC规则说:只要是BFC盒子内部子元素浮动了,则父盒子会计算浮动子元素的高度

缺点: 会隐藏掉故意溢出的元素

3:css属性中 空标签法清除浮动影响

 

空标签法 清除浮动影响 放置在所有浮动子元素之后

 

清除浮动影响的元素必须是块元素

 

缺点: 增加了无用(没有用户展示数据)空标签 导致文档树变大 ,结构冗杂

4:双伪元素法清除浮动影响

上面方法增加了空的结构标签 —-> 用css去创造这个空的结构标签

标签：,em,字体大小,元素,浮动,浏览器,type
来源： https://www.cnblogs.com/w-a-r/p/14490332.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。