css-从笔试题中看知识

栏目: CSS · 发布时间: 5年前

内容简介:(1) "position: absolute": 'position: absolute;' + 'transform: translate(-50%, -50%)' // 原理是绝对定位是根据左上角,然后让子元素回移50%就居中了(2) "display: flex": 'display: flex;' + 'justify-content: center;' + 'align-items: center;'(3) "margin: 0px auto": // 水平居中,条件是当前元素指定宽和高

常见子元素居中方式

(1) "position: absolute": 'position: absolute;' + 'transform: translate(-50%, -50%)' // 原理是绝对定位是根据左上角,然后让子元素回移50%就居中了

(2) "display: flex": 'display: flex;' + 'justify-content: center;' + 'align-items: center;'

(3) "margin: 0px auto": // 水平居中,条件是当前元素指定宽和高

(4) "margin: auto; position: absolute; top/left/bottom/right: 0px": // 水平 垂直居中

(5)

svg vs canvas

svg:XML 描述 2D 图形的语言;SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器;每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形

canvas :JavaScript 来绘制 2D 图形;逐像素进行渲染的;旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象

面试题:

1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

标准盒模型:整体宽度 = 内容宽度(content) + padding + border + margin

非标准(IE5以下): 整体宽度 = 内容宽度(content + padding + border) + margin

扩展:

  • 1、两种盒模型分别对应css的那个属性?box-sizing: content-box(标准),border-box(非标准)
  • 2、margin的特性(块级元素):垂直叠加,发生于兄弟元素、自身元素、父子元素之间,发生条件是子元素处于 标准文档流

    (1) 兄弟元素,垂直方向上交界都有margin那么取大值舍小值,可以理解两军交战,实力强的把实力弱的团灭了

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
      .big{
        background: red;
        width: 400px;
        height: 400px;
        padding: 20px;
        margin-bottom: 30px; // 显示大的值
      }
      .small{
        background: black;
        width: 400px;
        height: 400px;
        margin-top: 20px; // 小的舍去不显示
      }
    </style>
    </head>
    <body >
    <div class='big'>
    </div>
    <small class='small'>
    </small>
    </body>
    </html>

    (2) 父子元素,垂直方向上边界的上边界取同样是取大值舍小值,发生条件是子元素在 标准文档流 中并且父元素没有border属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
      .parent{
        background: red;
        width: 400px;
        height: 400px;
        margin-top: 50px; // 显示大的值
      }
      .son{
        background: black;
        width: 400px;
        height: 200px;
        margin-top: 40px; // 小的舍去不显示
      }
    </style>
    </head>
    <body >
    <div class='parent'>
      <div class='son'>
      </div>
    </div>
    </body>
    </html>

    (3) 自身元素,如果一个元素没有内容或者高度并且margin-top和margin-bottom均有值,那么取两者之间大的值小的会被舍弃,如果相邻元素中有多个这样de空元素则以自身叠加后大的为这些元素的外边距其余的外边距

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
      .self{
        background: black;
        width: 400px;
        margin-top: 60px; // 按这个外边距
        margin-bottom: 10px; // 这个会被舍弃
      }
    </style>
    </head>
    <body >
      <hr/>
      <div class='self'>
      </div>
      <hr/>
    </body>
    </html>

2、CSS选择器有哪些?哪些属性可以继承?

id选择器、class选择器、标签选择器、相邻选择器往后(+)、子元素器(>)、后代选择器(div p)、通配符选择器( * )、伪类选择器(:hover)、属性选择器([attribute=value]); 可继承属性font-family、font-size、color

3、css 样式优先级?

!important > id > class > 标签,继承的样式优先级最低

4、display有哪些值?说明他们的作用?

inline(默认)–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

4、position的值?

static(默认):按照正常文档流进行排列;
relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;
absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;
fixed(固定定位):所固定的参照对像是可视窗口。

5、CSS3有哪些新特性?

1 RGBA和透明度(opacity)
2 background-image background-origin(content-box/padding-box/      border-box) background-size background-repeat
3 word-wrap(对长的不可分割单词换行)word-wrap:break-word
4 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
5 盒阴影:box-shadow: 10px 10px 5px #888888
6 font-face属性:定义自己的字体
7 圆角(边框半径):border-radius 属性用于创建圆角
8 边框图片:border-image: url(border.png) 30 30 round
9 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

6、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧?

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

零基础学PHP

零基础学PHP

马忠超 / 2008-3 / 56.00元

《零基础学PHP》主要内容:PHP是一种运行于服务器端并完全跨平台的嵌入式脚本编程语言,是目前开发各类Web应用的主流语言之一。PHP因其功能强大、易学易用、可扩展性强、运行速度快和良好的开放性,而成为网站开发者的首选工具,其较高的开发效率,也给开发人员在编写Web应用程序时带来极大的便利。一起来看看 《零基础学PHP》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具