html 基础测试

1.请列出核心选择器、层次选择器有哪些 ？
答： 核心选择器：id、class、标签、逗号、普遍选择器
层次选择器：子代、后代、下一个兄弟、之后所有兄弟选择器

2.块级元素的显示与隐藏，并说明区别 。
答：display：none（隐藏）/black（显示）元素隐藏后，不占用原来位置
visibility:hidden（隐藏）/visible（显示）元素隐藏之后，占用原来的位置
opacity：0（隐藏）/<=1(透明度) 元素隐藏之后，占用原来的位置

3.line-height与text-align，font-size与font-weight分别是设置什么？
line-height：行高；
text-align：文本位置、center 居中、left 居左、right 居右；
font-size：字体大小；
font-weight：字体粗细；

4.写出表单元素的三个布尔属性 。
布尔属性是控制元素的某一个状态，是一种比较特别的属性。它主要出现在表单元素上，常见的有radio,checkbox上的checked属性，option元素的selected属性以及所有表单元素都支持的disabled属性。
disable::disabled 选择器匹配每个被禁用的元素；
checked:单值属性，默认选址；
selected ：建单选或者多选的菜单。

5.css的引入方式有哪些 ？比较优先级。
1）外部导入(link标签)；
2）内嵌style标签；
3）行内部添加style属性。
行内>内嵌>链接

6.html的核心属性有哪些？特有属性有哪些？
核心属性：id、class、style、title
特有属性： a标签的href、target ；img标签的src、alt

7.选择器的优先级是什么？请按权重列出选择器的先后顺序。
1）是否具有！important声明
2）选择器权重

  • 1000 定义在标签style属性中
  • 100 id选择器
  • 10 类选择器、伪类选择器、属性选择器
  • 1 元素选择器、伪元素选择器

3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
顺序： !important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器

8.请说出overflow的三种取值，并说明具体含义。
auto：自适应，在需要时剪切内容并添加滚动条。
scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条。

9.说明几种定位，并说明它们是否脱离了文档流、相对于谁来定位。

position：static、relative、absolute、fixed

static：默认值，没有定位，正常文档流之中。
relative：元素相对于原本位置的定位，并没有脱离文档流。
absolute：给元素设置绝对的定位，脱离文档流。
1）设置了absolute的元素，如果有祖先级元素级元素设置了position为relative或absolute，此时元素定位的对象为祖先级元素。
2）设置了absolute的元素，如果没有祖先级设置position，则此时元素相对于body定位，即浏览器窗口。
fixed：固定定位，脱离文档流，相对于浏览器视口进行定位。

10.块级元素与行内元素的特性，并举例哪些是块级元素与行内元素 。

块级元素：div、h1~h3、p、ul、html、body

  1. 独占一行空间
  2. 默认宽度为100%，默认高度由子元素或者内容决定
  3. 可以为其指定宽高 style=“width:;height:;”

行内元素：a、span、img

  1. 与其他行内元素共享一行空间
  2. 默认宽高由内容决定
  3. 不能为其指定宽和高
  4. 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

11.清除浮动的方式，请从父子级和兄弟级两方面进行描述 。
父元素：
1）浮动元素的父元素设置高度
2）浮动的父级元素设置overflow:hidden;
3）浮动元素的父元素使用::after{clear:both;content:'';display:block} 兄弟元素：
在使用浮动的最后一个兄弟元素后面，添加一个标签，该标签使用clear:both;

12.盒子模型有哪些，简述它们的概念、宽度的计算方式，并说明通过什么属性可以改变盒模型
内容盒子：content-box width = content
边框盒子：border-box width = content+ padding + border
通过box-sizing可以改变盒模型。