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：字体粗细 width4.写出表单元素的三个布尔属性 (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、alt7.选择器的优先级是什么？请按权重列出选择器的先后顺序 (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,动画使用animationtransition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果1）动画不需要事件触发，过渡需要。2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。16.如何理解响应式布局 (5)就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本方法： 媒体查询17.请说明一下选择器的权重 (5)ul.products::after 1 + 10 + 1 = 12form > input[type='text'] 1 + 1 + 10 = 12#first p 100 + 1 = 10118.一个满屏品字布局如何设计 (5)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css"> html,body,.main{ width: 100%; height: 100%; } *{ margin: 0; padding: 0; } .top{ width: 100%; height: 20%; background-color: pink; } .bottom{ width: 100%; height: 80%; background-color: yellow; } .bottom_left{ width: 15%; height: 100%; background-color: green; float: left; } .bottom_right{ width: 85%; height: 100%; background-color: teal; margin-left: 15%; }</style></head><body><div class="main"> <div class="top"></div> <div class="bottom"> <div class="bottom_left"></div> <div class="bottom_right"></div> </div></div></body></html>19.使用代码实现图片轮播 (10)
