面试题-css

 css盒子模型

（1）W3C盒子模型(标准盒模型)

 

box-sizing: content-box;  // 默认值

 

大小 = height(content）+ border + padding + margin  

height指的是内容区域content的高度

（2）IE盒子模型(怪异盒模型)

box-sizing: border-box;

 

大小 = height（content + border + padding） + margin

height指的是content + border + padding总的高度

 

 

css中hsl()和颜色值

 

hsl()的基本语法：hsl(H,S,L);

 

H（色调：Hue）：衍生于色盘，其中0和360是红色，接近120的是绿色，240是蓝色；

 

S（饱和度：Saturation）：值为一个百分比数，0%代表灰度，100%代表最高饱和度；

 

L（亮度：Lightness）：值也为一个百分比数，其中0%代表最暗，50%为均值，100%表示最亮。

 

 

CSS有哪些单位?

单位	描述
px	像素px是相对于显示器屏幕分辨率而言的。 IE无法调整那些使用px作为单位的字体大小；
em	相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 一般浏览器字体大小默认为16px，则2em == 32px；
rem	是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
vh	viewpoint height，视窗高度，1vh=视窗高度的1%
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%	相对父元素

*提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

  

css选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css权重计算

1 内联样式style  权重值1000

2 id选择器        权重值100

3 类选择器        权重值10

4 标签&伪元素   权重值1

5 通配符           权重值0

 

css属性可以继承

文字：font-size color  line-height text-align

不可继承：border padding  margin

 

css选择器

通配符(*)    id选择器(#)   类选择器(.)     标签选择器(div p span...) 

后代选择器(空格）  子元素选择器(>)    属性选择器(a[href])

相邻选择器 (+) 

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

ul li+li {
    border-top: 12px solid #acacac;
}

 

伪类选择器

 

p:last-child 匹配父元素中最后一个子元素

p:first-child 匹配属于任意元素的第一个子元素的 <li> 元素

p:nth-child(2) 选择所有p元素的父元素的第二个子元素

 

 

 

line-height和height的区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会变大

height是一个死值，就是盒子的高度

 

 

画一条0.5px的直线？

考查的是css3的transform 

height: 1px;
transform: scale(0.5);
background-color:red

  

用CSS画三角形（用border画）

设置一个没有宽高，只有border的元素，然后其他3边的border变透明

<div></div>

        div {
            width: 0;
            height: 0;
            border-top: 100px solid #ccc;
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
        }

 

 

水平垂直居中---没有宽高

<div class="container">
    <div class="main">居中</div>
</div>

1 使用弹性盒子

       .container {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            display: flex;
        }

        .main {
            background-color: red;
            margin: auto;
        }

       .container {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main {
            background-color: red;
        }

2 使用定位

        .container {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            position: relative;
        }

        .main {
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); // 2D移动X轴Y轴
        }

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

3 使用text-align和vertical-align   兼容IE低版本

       .container {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            text-align: center; // 行内元素的水平居中
        }

        .container:before {
            content: '';
            height: 100%;  // 重点：要先加上伪元素并给设置高度为100%
            display: inline-block;
            vertical-align: middle; // 行内元素的垂直居中
        }

        .main {
            background-color: red;
            display: inline-block; // 行内块级-否则就换行了
            vertical-align: middle;
        }

  

对BFC的理解

定义：格式化上下文

原则：如果一个元素具有bfc，那么内部元素再怎么弄，也不会影响到外面的元素

特性：

        属于同一个BFC的两个相邻容器的上下margin会重叠-把其中一个再包一层，父元素触发bfc

       不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷--清除浮动或父元素触发bfc

       BFC的区域不会与浮动容器发生重叠-可以左右布局

触发:  

        使用float时其浮动的元素

        绝对定位的元素 (包含 position: fixed 或position: sticky)

        使用以下属性的元素 display: inline-block

        块级元素的 overflow 属性不为 visible ---可能有副作用

        元素属性为 display: flow-root 或 display: flow-root list-item --- 无副作用

 

清除浮动

<div class="box">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

.box {
            border: 10px solid red;
            display: flow-root;
            /* overflow: hidden; 触发bfc*/
        }
        /* 方法2 */
        .box::after {
            content: '';
            display: block;
            clear: both;
        }
        .son {
            float: left;
            width: 100px;
            height: 50px;
            border: 10px solid blueviolet;
        }

 

弹性布局

• flex-direction：属性决定主轴的方向（即项目的排列方向）
• flex-wrap：如果一条轴线排不下，如何换行
• flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content：项目在主轴（水平）上的对齐方式
• align-items：在交叉轴上（垂直）如何对齐
• align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

 

overflow有哪些值

规定当内容溢出元素框时发生的事情

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

position有哪些值，有什么作用

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。脱离文档流 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

 

css sprite 有什么作用

雪碧图：把多个小图标合并成一张大图，利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位

优点：减少http请求次数，提升性能

缺点：维护较差（图标位置改变，内容修改等）

 

网页中字体使用偶数还是奇数

偶数： 让文字更好看  UI图一般也是偶数的，开发方便一点

 

margin和padding分别适合什么场景使用？

margin：

• 需要在border外侧添加空白
• 空白处不需要背景色
• 上下相连的两个盒子之间的空白，需要相互抵消时

padding：

• 需要在border内侧添加空白
• 空白处需要背景颜色
• 上下相连的两个盒子的空白，希望为两者之和

 

如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。