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
- 独占一行空间
- 默认宽度为100%,默认高度由子元素或者内容决定
- 可以为其指定宽高 style=“width:;height:;”
行内元素:a、span、img
- 与其他行内元素共享一行空间
- 默认宽高由内容决定
- 不能为其指定宽和高
- 行内元素中不可以嵌套块元素,但块元素中可以嵌套行内元素
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
可以改变盒模型。