html5与css3阶段复习题

techstay 发布于2019-08-30 15:44 / 968人阅读

摘要：将超出对象尺寸的内容进行裁剪，不会出现滚动条。过渡效果使用动画使用需要触发一个事件才会随着时间改变其属性在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素属性，达到一种动画的效果动画不需要事件触发，过渡需要。

1.请列出核心选择器、层次选择器有哪些 (5)

核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器

层次选择器：子代选择器、后代选择器、下一个兄弟选择器、之后所有兄弟选择器

2.块级元素的显示与隐藏，写出两种方法，并说明区别 (5)

display:none/block 元素隐藏之后，不占用原来的位置
visibility:hidden/visible 元素隐藏之后，占用原来的位置

3.line-height与text-align，font-size与font-weight分别是设置什么的 (5)

line-height：行高
text-align：文本位置
    center 居中
    left 居左
    right 居右
font-size：字体大小
font-weight：字体粗细
     width

4.写出表单元素的三个布尔属性 (5)
reversed 反转 open 打开
checked 默认选中，用于单选或者多选
disabled 禁止选中状态
readonly 只读
multiple 是否可以多选
selected 默认选中下拉框中的某个值
autofocus 默认提醒
required 必须输入不能为空
controls 显示控制条
autoplay 自动播放
loop 循环
5.css的引入方式有哪些 (5)

外部导入(link标签)
style标签
标签内部添加style属性

6.html的核心属性有哪些？特有属性有哪些？ (5)

核心属性：id、class、style、title
特有属性：a标签的href、target；img标签的src、alt

7.选择器的优先级是什么？请按权重列出选择器的先后顺序 (5)

选择器优先级：
    1）是否具有!important声明
    2）选择器权重
        1000  定义在标签style属性中
        100   id选择器
        10   类选择器，伪类选择器，属性选择器
        1     元素选择器,伪元素选择器
    3）选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
顺序：
    !important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器

8.请说出overflow的三种取值，并说明具体含义 (5)

auto：自适应，在需要时剪切内容并添加滚动条。
scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条。

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

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

10.父子级的div，父级样式：width:300px;height:300px;background-color:pink;
子级样式：width:100px;height:100px;background-color:teal;
若给子元素div添加margin-top会出现什么现象，怎么解决这个现象 (5)

现象：父子级元素都会有上边距
解决方法：
            给父级加边框属性
           给父级加padding
           给子级或父级一方添加浮动
           给子级或父级一方添加绝对定位
           给子级或父级一方添加display:inline-block;
           给父级元素添加overflow：hidden;

11.块级元素在父元素中水平垂直居中的方法有哪些 (10)

可以给父级使用相对定位，子级使用绝对定位并margin:auto;，将top、left、right、bottom为0

给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）left：calc（50% - 子级元素宽度一半）

给父级相对定位,子级绝对定位：left：50%；top：50%；
                              margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半

给父级一个display：flex； align-items：center；再给子级添加：margin：0 auto；

12.盒子模型有哪些，简述它们的概念、宽度的计算方式，并说明通过什么属性可以改变盒模型 (10)

内容盒子：content-box   width = content + padding + border
边框盒子：border-box   width = width
通过box-sizing可以改变盒模型

13.清除浮动的方式，请从父子级和兄弟级两方面进行描述 (10)

1）、使用额外的标签clear:both
      在浮动元素下面添加一个空标签，在这个标签中设置clear：both；
2）、使用overflow：hidden属性
      父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；
3）、使用伪元素:after清除浮动
      .parent:after{
      // 定义元素前后的生成内容，这里是定义元素后的空内容
      content: "";
      display: block;
      clear: both;
      }
      在元素最后定义一个空的内容，然后让该空的内容来清除浮动；

14.块级元素与行内元素的特性，并举例哪些是块级元素与行内元素 (5)

块级元素：div、h1~h3、p、ul、html、body
    1) 独占一行空间
    2) 默认宽度为100%，默认高度由子元素或者内容决定 
    3) 可以为其指定宽高 style="width:;height:;" 
行内元素：a、span、img
    1) 与其他行内元素共享一行空间
    2) 默认宽高由内容决定
    3) 不能为其指定宽和高
    4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

15.简述css3动画与过度效果 (5)

动画：
    动画的定义、动画的使用
过渡：
    CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
过渡效果使用transition,动画使用animation

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。

16.如何理解响应式布局 (5)

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
方法：
    媒体查询

17.请说明一下选择器的权重 (5)

ul.products::after    1 + 10 + 1 = 12
form > input[type="text"]  1 + 1 + 10 = 12
#first p  100 + 1 = 101

18.一个满屏品字布局如何设计 (5)


Document

19.使用代码实现图片轮播 (10)

服务器托管混合云 html5与css3 htmlcss与html5css3 html5前端css3 html5前端开发css3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116214.html

HTML5+CSS3整体回顾

摘要：设置文字的描边制表符的长度当前行超过指定容器的边界时是否断开转行规定自动换行的处理方法是否使用一个省略标记标示对象内文本的溢出默认值无省略号当对象内文本溢出时显示省略标记。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。转载请声明原文链接这篇文章主要总结H5的一些新增的功能以及一些基础归纳，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考...

xingqiba 2019-08-05 10:16 评论0 收藏0
jsliang 的 2019 面试准备

Create by jsliang on 2019-2-11 15:30:34 Recently revised in 2019-3-17 21:30:36 Hello 小伙伴们，如果觉得本文还不错，记得给个 star ，小伙伴们的 star 是我持续更新的动力！GitHub 地址并不是只有特定的季节才能跑路，只因为人跑得多了，这条路就定下来了。金三银四跳槽季，jsliang 于 2019...

PascalXie 2019-05-23 17:31 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

JerryWangSAP 2019-08-02 15:21 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

shadajin 2019-08-19 11:45 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

lewif 2019-08-05 17:24 评论0 收藏0