前端进阶试题-CSS篇

人呐都不知道，自己不可以预料。
一个人的命运啊，当然要靠自我奋斗。但是也要考虑历史的行程。
我绝对想不到我一个学设计的，怎么就开始写代码了呢？
但是经理同志对我讲：公司已经研究决定了。
后来我念了两首诗叫“苟利国家生死以，岂因祸福避趋之”。所以我就写起了代码。

---

记得似乎是想进一个交流群，于是下载了做做看。
结果题断断续续地做了一半，群是哪个也忘了。
想来不如发表在这里，权当是记录一下自己的姿势水平吧。

什么是盒模型？

网页中的每个元素都是长方形的“盒子”。标准的盒模型有如下属性：
Width：盒模型内容块从最左到最右的距离。
Height：盒模型内容块从最上到最下的距离。
Border：盒模型的边界。
Padding：盒模型内容边界到盒模型border内缘的距离。
Margin：盒模型border的外缘到父容器或兄弟容器的距离。
width、height的值不包含padding和border。也就是说一个标准的盒模型其最终占位宽度/高度为width/height、padding、border之和。而元素之间的margin是可共享的。

Doctype的几种类型？

HTML 4.01中有三种Doctype，分别引用Strict，Traditional以及Frameset三种DTD。通常我们引用Traditional类型。
HTML 5中只有一种Doctype。

如何布局左不动右边自适应的两列布局？
方法一：

   <style>
        .container {
            margin: 0 auto;
            width: 80%;
            min-width: 300px;
            overflow: hidden;
        }

        .column1 {
            float: left;
            width: 300px;
            background: #c3ebeb;
        }

        .column2 {
            margin: 0;
            min-width: 0;
            background: #e2b9b9;
            clear: right;
        }
    style>
    <div class="container">
        <div class="column1">1div>
        <div class="column2">2v>
div>  

方法二：

<style>
    .row {
        display: table;
    }
    .row div {
        display: table-cell;
    }
    .col-fixed {
        width: 200px;
    }
style>
<div class="row">
    <div class="col-fixed">1div>
    <div>2div>
div>

如何布局两列等高？

    <style>
        .container {
            margin: 0 auto;
            width: 80%;
            min-width: 300px;
            overflow: hidden;
        }

        .column1 {
            float: left;
            margin-bottom: -100%;
            width: 300px;
            padding-bottom: 100%;
            background: #c3ebeb;
            clear: right;
        }

        .column2 {
            margin-left: 300px;
            margin-bottom: -100%;
            min-width: 0;
            padding-bottom: 100%;
            background: #e2b9b9;
        }
    style>
    <div class="container">
       <div class="column1">1<br />3div>
       <div class="cocolumn2">2div>
div>

方法二：

<style>
    .row {
        display: table;
    }
    .row div {
        display: table-cell;
    }
    .col-fixed {
        width: 200px;
    }
style>
<div class="row">
    <div class="col-fixed">1<br />div>
    <div>2div>
div>

如何布局右侧定宽，左侧或中间自适应？

<style>
        .container {
            margin: 0 auto;
            width: 80%;
            min-width: 300px;
            overflow: hidden;
        }

        .column1 {
            float: right;
            width: 300px;
            background: #c3ebeb;
        }

        .column2 {
            margin: 0;
            min-width: 0;
            background: #e2b9b9;
            clear: left;
        }
    style>
    <div class="container">
        <div class="column1">1div>
        <div class="column2">2div>
    div>  

方法二：

<style>
    .row {
        display: table;
    }
    .row div {
        display: table-cell;
    }
    .col-fixed {
        width: 200px;
    }
style>
<div class="row">
    <div class="col-fixed">1div>
    <div>2div>
    <div class="col-fixed">3div>
div>

如何布局三列自适应？

    <style>
        .container {
            display: table;
        }
        .container div {
            display: table-cell;
        }

    style>
    <div class="container">
        <div>1<br />3div>
        <div>2div>
        <div>3div>

div>

gif, png, jpg的区别？

GIF：无损压缩，多用于网页动画，支持8 bit彩色，支持单一透明色；
PNG：无损压缩，常见格式有PNG-8与PNG-24，支持full-alpha通道（256级可调半透明色），但不支持动画，由于其可支持full - alpha的特性，可以轻松应付各种背景色，在现代浏览器中不需要动画的前提下可以完全替代GIF；
JPG：有损压缩，24 bit真彩色，在照片压缩方面具有其他格式无可比拟的优势，在这方面无可替代。

什么是css sprite?优缺点？

CSS sprite，CSS图像整合技术，又称CSS精灵、CSS贴图定位，是将页面上所有需要的图片都做在同一张大图上，需要时利用CSS clip属性或其他方式显示其中的一部分的技术。
这种技术的优点在于：
1大大减少了http请求的次数，节省资源，明显提高网页的整体性能，这也是该技术被广泛应用和传播的主要原因；
2使用一张大图代替许多小图能够有效地减少图片总字节数；
3解决了网页设计师对单张图片命名的困扰，只需对集合图命名即可；
4易于修改网站整体配色，只需调整集合图片色调即可，省却单张调整时间。
这种技术的缺点在于：
1合并多张图片并有序整理，本身工作精细繁琐、量大；
2对高分屏下自适应页面适用性并不算太好，有时容易出现背景断裂；
3虽然修改配色容易，但是当需要新增图片时，维护不易。

制作细线表格？

<style type="text/css">
Table {
border-collapse: separate;
bor
der-spacing: 1px;
background: #dddddd;
}

table.one td {
background: #ffffff;
}
style>
head>
<body>

position: relative, absolute, fixed区别与联系？

position: relative以元素本来的位置（即position: static状态下的位置）为基准进行定位，且只移动元素显示的位置，实际占位不动。它的位移将使它覆盖其他框或被其他框覆盖，具体取决于z-index值。
Position: absolute 以祖先元素中最近的一个同为绝对定位的元素为基准进行定位，脱离文档流。如果祖先元素中没有绝对定位元素，那么将以浏览器为基准
position: fixed 以浏览器窗口为基准进行定位，脱离文档流，这种定位的元素不会随页面滚动而上下滚动，它永远固定在浏览器窗口的某个位置。

如何居中一个float: left的元素？

element{
float: left;
position: relative;
left: 50%;
}

CSS在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验：

要么放弃IE 6和7，要么我选择狗带

转载于:https://www.cnblogs.com/Emily36107/p/5269186.html