day02

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

　　px是固定长度单位，不随其它元素的变化而变化；

　　em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化；

　　rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化；

　　px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位

　　一般来说：1em = 1rem = 100% = 16 px

 

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，单选框或复选框被选中。

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

　　

style="color: red"	1, 0, 0, 0	1000
#id {}	0, 1, 0, 0	100
#id #aid	0, 2, 0, 0	200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] {}	0, 0, 2, 0	20
p:hover {}	0, 0, 1, 0	10
p {}	0, 0, 0, 1	1
ul::after {}	0, 0, 0, 1	1
div p {}	0, 0, 0, 2	2

 

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-绝对定位和固定定位的区别？

　　1、相对定位(position: relative)，对于body或相对体整体进行位置的挪动，脱离文本流，原来位置占位

　　2、绝对定位(position: absolute)，相对于父级定位挪动（子绝父相）， 脱离文本流，原来位置不占位

　　3、固定定位(position: fixed)做广告的技术呀(一般都在右下角加图片链接)。滚动条浮动，但盒子不动

6-浮动的作用和影响

　　作用：解决盒子排列问题

　　元素类型受浮动的影响
　　（不占位，脱离文档流）
　　块元素：
　　    元素不设置宽，宽度是父元素的宽，如果设置浮动，块元素的宽度由内容撑开
　　内联元素
　　    可以设置宽高
  　　  margin和padding可以设置四个方向
   　　 空格的间隙也能取消

　　高度塌陷

  　　首先要了解什么是高度塌陷，以及产生高度塌陷的原因:
    　　如果父元素不设置高，或者设置最小高，高度由内容撑开，一旦内容浮动后哦不占位，就会出现高度塌陷，图下是由于没设置父元素的高度，高度由内容撑开，一旦发生浮动，就会产生塌陷现象：