css3新增伪类、优先级、定位、浮动

 

 
1-css 中的 px em rem 长度单位的区别？
　　PX

　　px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

　　PX特点

  • 1. IE无法调整那些使用px作为单位的字体大小；
  • 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  • 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

　　EM

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

　　EM特点

  • 1. em的值并不是固定的；
  • 2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是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作为单位就行了。

所以我们在写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,或者两者同时使用。

 

　　px与rem的区别：

　　对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

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

  • :root 选择文档的根元素，等同于 html 元素

  • :empty 选择没有子元素的元素

  • :target 选取当前活动的目标元素

  • :not(selector) 选择除 selector 元素意外的元素

  • :enabled 选择可用的表单元素

  • :disabled 选择禁用的表单元素

  • :checked 选择被选中的表单元素

  • :after 在元素内部最前添加内容

  • :before 在元素内部最后添加内容

  • :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

  • :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

  • :nth-child(odd)

  • :nth-child(even)

  • :nth-child(3n+1)

  • :first-child

  • :last-child

  • :only-child

  • :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

  • :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

  • :nth-of-type(odd)

  • :nth-of-type(even)

  • :nth-of-type(3n+1)

  • :first-of-type

  • :last-of-type

  • :only-of-type

  • ::selection 选择被用户选取的元素部分

  • :first-line 选择元素中的第一行

  • :first-letter 选择元素中的第一个字符

3-说明 css 选择器优先级顺序及判定标准
　　1.id选择器（#myid）

　　2.类选择器（.myclassname）

　　3.标签选择器（div,h1,p）

　　4.子选择器（ul < li）

　　5.后代选择器（li a）

　　6.伪类选择（a:hover,li:nth-child）

　　最后，需要注意的是：　　

  • !important的优先级是最高的，但出现冲突时则需比较”四位数“;
    优先级相同时，则采用就近原则，选择最后出现的样式;
    继承得来的属性，其优先级最低。
4-position 几个属性的作用？
　　1.static:默认位置
 　　
　　2.relative:相对的
　　　　配合top,left,right,bottom来使用
　　　　a.相对盒子原本的位置发生偏移
　　　　b.如果没有trbl会以标准流显示
　　　　c.在原来的位置占了位置
 　　3.absolute:绝对的
　　　　配合 trbl使用
　　　　a.如果没有父元素，那么trbl是相对body来定位
　　　　b.如果有父元素，但父元素没有定位，那么还是相对body定位
　　　　c.如果有父元素且父元素有定位，那以父元素为基础
　　　　d.绝对定位之后的元素在页面不会占据位置
 
　　子绝父相
　　如果一个小盒子在大盒子中药定位且水平居中
　　1.先left：50%,（将小盒子在大盒子平移大盒子的一半）
　　2.再设置margin-left（小盒子宽度的一半），一定是负数
 
　　4.fixed：固定
　　　　配合trbl使用
　　　　a.不管页面有多大，trbl永远是相对于浏览器的边框来的
5-绝对定位和固定定位的区别？

　　1、相对定位：
　　　　a、不影响元素本身的特性；
　　　　b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
　　　　c、相对于其正常位置进行定位。如果没有定位偏移量，对元素本身没有任何影响；
　　　　d、提升层级

　　2、绝对定位：
　　　　a、使元素完全脱离文档流；
　　　　b、使内嵌支持宽高；
　　　　c、块属性标签内容撑开宽度；
　　　　d、如果有定位父级相对于第一个定位父级发生偏移，没有定位父级相对于document发生偏移；
　　　　e、相对定位一般都是配合绝对定位元素使用；
　　　　f、提升层级

 
6-浮动的作用和影响
　作用:解决盒子并排问题

　　标准流: 一行一个 从左侧边界开始放置

　　浮动带来一个现象, 盒子并排放置 —> 脱离标准流 ,成为浮动流—> 不占界面位置　　float:left / right / none(默认值) ;


　　left: 找父元素的左边界停靠
　　right: 找父元素的右边界停靠
　　none: 保持原有的位置 标准流
　　每一个并排的盒子身上都要加浮动属性
　

　　影响:

　　　　脱离标准流 ,成为浮动流—> 不占界面位置—> 导致其他盒子向上移动

　　　　父盒子的高度塌陷: 父盒子高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的, 现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度就他塌陷了.

 













            

            
posted @ 
2021-01-29 16:16 
指尖陌凉 
阅读(100) 
评论(0) 
 
收藏 
举报