第二天

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,浮动不会影响前面元素的布局

上一篇:2021-05-01


下一篇:学习-Python函数之装饰器