1-css 中的 px em rem 长度单位的区别?
1、概念
px:绝对单位,页面按精确像素展示。
em:相对单位,基准点为父节点字体的大小,如果自身bai定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
2、特点
PX特点:
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
EM特点 :
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
rem特点:
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
2-css3 新增伪类有哪些?并说明
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中
:first-child/:last-child/:nth-child()/:nth-last-child() 选择第几个子元素
:first-of-type/:last-of-type/:nth-of-type()/:nth-last-of-type() 选择兄弟节点中的元素
:root HTML 根元素
:not() 否定选择器
:only-child 只有一个子元素时才生效
:empty 选择连空格都没有的元素
3-说明 css 选择器优先级顺序及判定标准
优先级
类选择器的权重高于标签选择器
id选择器的权重高于类选择器
权重
!important 权重最高
行内样式:(style)1,0,0,0
id选择器:0,1,0,0
类选择器:0,0,1,0
标签选择器:0,0,0,1
继承的样式:0,0,0,0
4-position 几个属性的作用?
5-绝对定位和固定定位的区别?
主要用于页面特效,尤其是后期的一些js效果
定位:包括定位模式和边偏移
#### [定位模式:position]()
static 没有定位 默认
fixed 固定定位
relative 相对定位
absolute 绝对定位
#### [边偏移:top bottom left right]()
---相对于父元素的某个边的偏移
### 固定定位:fixed
脱离标准文档流 隐式模式转换,块级元素变为行内块,需要自己设置宽度,[相对视口进行定位的]()
### 相对定位:relative
不脱标,仍然占据位置
元素相对[本身原来的位置]()进行定位的
### 绝对定位:absolute
脱离标准文档流, 隐式模式转换,块级元素变为行内块,影响后面元素的布局
如果父级元素没有定位,根据当前浏览器窗口进行偏移
距离它本身最近的,已经定位的,祖先元素进行定位(范围padding+contain(边框之内))
轮播图案例
子绝父相
子元素为什么不用相对定位?
相对定位元素原来的位置仍然占据,页面会出现空白,影响页面布局
### 粘性定位:sticty(不会脱离标准文档流)
6-浮动的作用和影响
normal flow:普通流,文档流,标准流
标准流:页面中的内容,从上往下显示,排列在一起
使用inline-block盒子之间有间隙,间隙大小与浏览器有关
浮动:主要解决页面布局问题
设置了浮动属性的元素会脱离标准文档流,移动到父元素中的指定位置的过程
语法:
选择器{
float:属性值
}
属性值:left, right,none(默认值)
1,浮动的元素会脱离标准文档流,不占位置,会影响标准文档流(范围padding之内的conent)
2,浮动只有左右浮动
3,浮动的元素找离他最近的父元素对齐,浮动不会超出父元素内边距的距离
浮动的元素排列位置,跟上一个元素有关系
如果上一个元素浮动,浮动元素的顶部和上一个元素的顶部对齐
如果上一个元素是标准流,浮动元素的顶部和上一个元素的底部对齐
4,浮动有隐式模式模式转换,由块元素或行内元素转化为行内块(宽度靠内容撑起来)
5,浮动不会影响前面元素的布局