# homework-01-02 **Repository Path**: sfljskeprim_admin/homework-01-02 ## Basic Information - **Project Name**: homework-01-02 - **Description**: No description available - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-10-27 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 简答 1. 描述一下相对定位与绝对定位的区别 - 相对定位： - 相对定位的元素不脱离文档流，不脱离标签的原始状态，不会让出原有的位置。原位留坑，形影分离。 - 相对定位的参考元素是标签的原始位置进行定位 - 相对定位元素可以作为后期绝对定位元素的参考 - 定位在同一个方向不能设置两个偏移量属性，如果设置了left和right只会加载left属性。 - 绝对定位： - 脱离了文档标准流，会让出标准流位置。 - 绝对定位的参考元素是距离最近的有定位的组先级元素，如果没有有定位的组先级元素参考body进行定位 - 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合会导致绝对定位元素的参考点不同，具有的位移效果不同。如果设置left参考点是窗体的左侧，如果将left改成right,参考点变成了窗体的右侧，这一点和相对定位是不同的 - 根据绝对定位的参考元素的定位类型不同，有三种组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的组先级位置更稳定，大多数子绝父相的情况。 2. 描述一下你了解到的元素等级有哪些，具体介绍每一个元素等级的特点 可以把样式的应用方式分为几个等级，按照等级来计算权重： 1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如：style=””，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类，伪类和属性选择器，如： content、:hover 权重值为10 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 CSS 样式应用于特定的目标元素，需要用到选择器找到目标元素-CSS选择器 CSS基础选择器：标签选择器、id选择器、类选择器、通配符选择器 CSS高级选择器：后代选择器、交集选择器、并集选择器 CSS新增的选择器：子级选择器、兄弟选择器、伪类选择器、伪元素选择器、属性选择器 - 标签选择器 选择范围：选择HTML中所有的同名标签 - id选择器 通过标签上的id属性去选择标签 书写方式:#id 选择范围：只能选中一个标签 每个id属性值必须是唯一的，不能与其他的id同名 - 类选择器 属性方式：.class属性值 选择范围：页面中所有class属性值相同的标签 特点： 多个不同的标签不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中 一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签 - 通配符选择器 选中所有的标签,常用来处理浏览器的默认样式 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作 - 后代选择器 通过标签之间的嵌套关系去选择元素。 空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级 - 交集选择器 交集选择器：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都能被选中 IE6及以前的浏览器不支持这种写法 - 并集选择器 多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法 可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能 - 子级选择器 > 子级选择器用于选取带有特定父元素的元素：`element1 > element2` > > 注意：如果element2元素不是父元素element1的直接子元素，则不会被选择 > > `>` 符号之前写父级的选择器，符号之后写子级选择器，必须满足父子级关系才能选中标签。注意：隔代的元素是无法选中的比如：爷爷级和孙子级就无法选中 - 兄弟选择器 | 选择器 | 简介 | | ------------------- | ------------------------------------------------------ | | element1 + element2 | 匹配同一个父元素中紧跟在element1后面的一个element2元素 | | element1 ~ element2 | 匹配同一个父元素中在element1后面的所有element2元素 | - 结构伪类选择器 | 选择器 | 作用 | | ------------------ | ----------------------------- | | ` E:first-child` | 匹配父元素中的第一个子元素E | | `E:last-child` | 匹配父元素中的最后一个子元素E | | `E:nth-child(n)` | 匹配父元素中的第n个子元素E | | `E:first-of-type` | 指定类型E的第一个元素 | | `E:last-of-type` | 指定类型E的最后一个元素 | | `E:nth-of-type(n)` | 指定类型E的第n个元素 | - 伪元素选择器 | 选择器 | 作用 | | --------------- | ----------------------------- | | E::before | 在E元素内部的前面插入一个元素 | | E::after | 在E元素内部的后面插入一个元素 | | E::first-letter | 选择到了E容器内的第一个字母 | | E::first-line | 选择到了E容器内的第一行文本 | - 属性选择器 | 选择器 | 作用 | | --------------- | ------------------------------------- | | `E[att]` | 选择具有att属性的E元素 | | `E[att="val"]` | 选择具有att属性且属性值等于val的E元素 | | `E[att^="val"]` | 匹配具有att属性、且值以val开头的E元素 | | `E[att$="val"]` | 匹配具有att属性、且值以val结尾的E元素 | | `E[att*="val"]` | 匹配具有att属性、且值中含有val的E元素 | 选择器权重： - 基础选择器：ID选择器 > 类选择器 > 标签选择器 > *(通配符选择器) - 伪类选择器、属性选择器的权重等于类选择器 - 伪元素选择器的权重等于标签选择器 3. 描述一下你所知道的清除浮动的方式（起码三种） 1.height 给标准流的父元素强制给一个合适的高度。(不推荐这种方法) 这样会使父元素高度不是自适应的，一旦子元素发生变化就会有问题 2. clear 属性：清除标签元素自身受到的前面的浮动元素的影响 1. 1. left 清除前面左浮动带来的影响 2. right 清除前面右浮动带来的影响 3. both 清除前面所有浮动带来的影响 4. 给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置 5. 但是设置clear属性还会存在一个问题，就是父元素不能高度自适应，两个父元素之间如果有margin效果不正确的 3. 隔墙法：在两个父盒子之间，添加一个空的div标签. 但是这种方法并没有解决问题 4. 内墙法：在父元素内部，所有浮动子元素后面添加一个空的div元素(注意必须是块级元素)，标签高度为0，添加clear属性 1. 浮动是css样式属性带来的问题，内墙法使用HTML结果去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结果的冗余。 5. 伪类(推荐使用)：利用css中的伪类模拟一堵内墙 通过选中的标签添加伪类，去选中标签的某个状态或位置 `:after:` 表示选中的是某个标签内部的最后的位置 ```css .clearfix:after{ content: ''; clear: both; display: block; height: 0; visibility: hidden;/*会保留原来占有的位置*/ } ``` 6. 添加溢出隐藏的属性也可以解决`overflow: hidden;` 给父元素添加这一行属性就可以解决浮动的所有问题。 这是来源于overflow：hidden的特性，如果不设置高度那么这个属性就会自适应高度。 > 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。 > > 那么父元素有了高度后，可以管理内部所有浮动元素，不会延伸到后面标签中影响贴边 1. 4. 描述一下你所知道的视频标签属性的属性名、属性值、以及作用（起码四种） | 属性 | 值 | 描述 | | -------- | --------------------------------------------- | ------------------------------------------------------------ | | autoplay | autoplay | 视频就绪自动播放，谷歌浏览器需要添加muted属性来解决自动播放问题 | | controls | controls | 显示播放控件 | | loop | loop | 循环播放 | | preload | auto(预先加载视频) none(不预先加载视频默认值) | 规定是否预加载视频(如果设置了autoplay会忽略该属性) | | src | Url | 视频URL地址 | | width | pixels 像素 | 设置播放器宽度 | | height | pixels 像素 | 设置播放器高度 | | poster | Imgurl | 加载等待的图片，也可以是视频的封面图 | | muted | muted | 静音播放 | 5. CSS3新增了伪元素选择器中双冒号与单冒号有什么区别，并阐述一下伪元素的注意事项 在CSS3中明确规定了伪类偏向于动作用单冒号，伪元素偏向于属性用双冒号，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的，网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用`CSS2的单冒号写法比较安全` 伪元素的注意事项： - 伪元素只能给双标签添加，不能单标签添加 - 伪元素的冒号前不能有空格。如：` E ::before` 这样是错误的 - 伪元素里面必须写上属性:` content:""` - before和after创建的是行内元素,如果要变成块级元素需要`display: block;` - 在DOM里面看不见刚才创建的元素，所以称为伪元素 6. 标准盒模型与怪异盒模型的区别 box-sizing属性设置标准盒模型和怪异盒模型 | 属性值 | 作用 | | | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | content-box | 默认值，标准盒子模型，盒模型是外扩的，width和height只包括内容的宽和高。在width和height之外绘制元素的内边距和边框 | ![image.png](README.assets/1603756655266-2a229fb1-6b07-4aad-91b0-3c909fd17d5a.png) | | border-box(在手机端会经常使用) | 怪异模式，盒模型是内减的width和height属性包括内容、内边距和边框，但不包括外边距为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制 | ![image.png](README.assets/1603756857118-261301e0-81b5-4379-8726-4da4bd1f3282.png) |