1, 为什么要初始化 CSS 样式?
答案: 因为浏览器的兼容问题, 不同浏览器对有些标签的默认值是不同的, 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异.
当然, 初始化样式会对 SEO 有一定的影响, 但鱼和熊掌不可兼得, 但力求影响最小的情况下初始化.
2, 浮动元素引起的问题?
答案: a. 父元素的高度无法被撑开, 影响与父元素同级的元素
b. 与浮动元素同级的非浮动元素会跟随其后
c. 若非第一个元素浮动, 则该元素之前的元素也需要浮动, 否则会影响页面显示的结构
3,line-height 三种赋值方式有何区别?(带单位, 纯数字, 百分比)?
答案: 带单位: px 不用计算, em 则会使元素以其父元素 font-size 值为参考来计算自己的行高
纯数字: 把比例传递给后代, 例如父级行高为 1.5, 子元素字体为 18px, 则子元素行高为 1.5*18=27px
百分比: 将计算后的值传递给后代
4,:link,:visited,:hover,:active 的执行顺序是怎么样的?
答案: L-V-H-A,l(link)ov(visited)e h(hover)a(active)te, 即用喜欢和讨厌两个词来概括
5,CSS 属性 content 有什么作用? 有什么应用?
答案: CSS 的 content 属性专门应用在 before/after 伪元素上, 用于来插入生成内容, 可以配合自定义字体显示特殊符号..
6, 文字超出显示为省略号?
答案:// 单行:
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- // 多行:
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
7,html5 有哪些新增的表单元素?
答案: datalist datetime output date month week time color number range email url
8, 用纯 CSS 创建一个三角形的原理是什么?
答案: 首先, 需要把元素的宽度, 高度设为 0. 然后设置边框样式.
- width: 0;
- height: 0;
- border-top: 40px solid transparent;
- border-left: 40px solid transparent;
- border-right: 40px solid transparent;
- border-bottom: 40px solid #ff0000;
9, 什么时候可以触发 BFC?
答案: 根元素, 即 HTML
float 的值不为 none(默认)
overflow 的值不为 visible(默认)
display 的值为 inline-block,table-cell,table-caption
position 的值为 absolute 或 fixed
10,style 标签写在 body 后与 body 前有什么区别?
答案: 页面加载自上而下 当然是先加载样式.
写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析, 当解析到写在尾部的样式表 (外联或写在 style 标签) 会导致浏览器停止之前的渲染, 等待加载且解析样式表完成之后重新渲染, 在 Windows 的 IE 下可能会出现 FOUC 现象(即样式失效导致的页面闪烁问题)
来源: http://www.bubuko.com/infodetail-3201568.html