css基础及面试题

最新推荐文章于 2024-07-24 20:42:50 发布

weixin_52090570

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量156

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_52090570/article/details/117468560

版权

前端学习文档css篇

基本知识点
css面试题

基本知识点

1.动画效果

1.1基本知识点

1.1.1 transform

属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 (写在当前元素的css样式里面)

translate() 2d的位移， translate3d() 3d的位移
rotate() 2d的旋转，rotate3d(x,y,z,a) 3d的旋转;
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
scale() 2d的缩放，scale3d() 3d的缩放
skew() 2d的倾斜，skew3d() 3d的倾斜
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) ；

1.1.2 transition （写在当前元素的css样式里）

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property ：规定设置过渡效果的 CSS 属性的名称，列如宽或者高改变。
transition-duration ：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function ：规定速度效果的速度曲线（运行速度，列如匀速linear）。
transition-delay ：定义过渡效果何时开始。

<style> 
div
{
width:100px;
height:100px;
background:blue;
transition-property:width;
transition-duration:5s;
transition-delay:2s;

/* Firefox 4 */
-moz-transition-property:width; 
-moz-transition-duration:5s;
-moz-transition-delay:2s;

/* Safari and Chrome */
-webkit-transition-property:width; 
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;

/* Opera */
-o-transition-property:width;
-o-transition-duration:5s;
-o-transition-delay:2s;
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>过渡效果会在开始前等待两秒钟。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

1.1.3 animation （写在当前元素的css样式里）

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称(动画帧)。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>

<div></div>

</body>

2.flex布局

2.1flex的基本语法介绍

2.1.1 display：flex；该div的局部为flex布局(写父元素css样式里)

2.1.2 flex-direction 定义主轴的方向(写父元素css样式里)

row为默认值，代表主轴为水平轴，方向为从左到右。
row-reverse代表主轴为水平轴，方向为从右到左。
column代表主轴为垂直轴，方向为从上到下。
column-reverse代表主轴为垂直轴，方向为从下到上。

2.1.3 flex-wrap定义flex项目是否换行显示(写父元素css样式里)

nowrap为默认值，代表不换行。
wrap代表换行，但默认为第一行在上方。
wrap-reverse代表换行，但默认为第一行在下方。

2.1.4 flex-flow(写父元素css样式里)

flex-flow是flex-direction和flex-wrap的合并写法，它同时定义了主轴方向与容器内项目的换行方式，其默认值为row nowarp

2.1.5 justify-content 定义了项目在主轴上的对齐方式(写父元素css样式里)

flex-start为默认值，代表项目在主轴上向起始方向对齐。
flex-end代表项目在主轴上向结束方向对齐。
center代表项目在主轴上居中对齐。
space-between代表项目在主轴上两端对齐，但第一个项目在主轴的起始位置，最后一个项目在主轴的结束位置。
space-around代表项目在主轴上等分间距，但第一个项目与最后一个项目距离主轴的两端保持一定的距离，这个距离为项目之间间距的1/2。

2.1.6 align-items 定义了项目在交叉轴上的对齐方式 (写父元素css样式里)

flex-start代表项目在交叉轴上向起始方向对齐。
flex-end代表项目在交叉轴上向结束方向对齐。
center代表项目在交叉轴上居中对齐。
baseline代表项目在交叉轴上向项目的第一行文字的基线对齐。
stretch代表项目在交叉轴上拉伸对齐。

2.1.7 flex-basis

定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为auto （写在当前元素的css样式里）
-相当于给div定一个固定的宽或者高，这个需要配合 flex-grow: 0;一起使用才有效果

2.1.8 flex-grow

定义了项目的放大比例，默认值是0。（写在当前元素的css样式里）

2…1.9 flex-shrink

定义了项目的缩小比例。其默认值为1，当空间不足时，等比例缩小。（写在当前元素的css样式里）

2.1.10 order

定义元素的排列顺序，值越小越靠前（写在当前元素的css样式里）

2.2 flex的相关应用

2.2.1 水平/垂直居中

<body>
<div class="box">
    <div class="content">我是子元素，我要垂直居中</div>
</div>
</body>
<style>
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 500px;
    background-color: green;
}
.content {
    height: 200px;
    width: 200px;
    background-color: yellow;
    line-height: 200px;
    text-align: center;
}
</style>

2.2.2 两栏/三栏布局

<body>
<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
</div>
<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
</body>
<style>
.box {
    display: flex;
    height: 200px;
    margin-bottom: 30px;
}
.left {
    background-color: yellow;
    flex-basis: 200px;
    /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
    flex-grow: 0;
    /* flex-grow定义该项目不分配剩余空间 */
}
.main {
    background-color: green;
    flex-grow: 1;
    /* flex-grow定义main占满剩余空间 */
}
.right {
    background-color: blue;
    flex-basis: 100px;
    flex-grow: 0;
}
</style>

2.2.3 等分宽高

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    nav {
    display: flex;
}
a {
    flex-grow: 1;
    font-size: 30px;
    text-decoration: none;/*去除a标签的下划线*/
    text-align: center;
}
    </style>
</head>
<body>
    <nav>
        <a href="#">苟</a>
        <a href="#">利</a>
        <a href="#">国</a>
        <a href="#">家</a>
        <a href="#">生</a>
        <a href="#">死</a>
        <a href="#">以</a>
    </nav>
</body>

2.2.4 圣杯布局

 <style>
	    *{
	        margin: 0;
	        padding: 0;
	        box-sizing: border-box;
	    }
	    body,html{
	        height: 100%;
	    }
	    .box {
	    display: flex;
	    flex-direction: column;
	    width: 100%;
	    height: 100%;
	    background-color: yellow;
	    text-align: center;
	    font-size: 30px;
	}
	header, footer {
	    flex: 0 0 80px;
	    line-height: 80px;
	}
		header {
		    background-color: pink;
		}
		footer {
		    background-color: gray;
		}
		.content {
		    display: flex;
		    flex: 1;
		}
		nav {
		    order: -1;
		    background-color: blue;
		    flex: 0 0 80px;
		}
		aside {
		    background-color: green;
		    flex: 0 0 80px;
		}
		main {
		    flex: 1;
		}
    </style>
</head>
<body>
    <div class="box">
        <header>header</header>
        <div class="content">
            <main>main</main>
            <nav>nav</nav>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>
</body>

2.2.5 流式布局

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
    display: flex;
    flex-flow: row wrap;
    height: 300px;
    width: 400px;
    background-color: yellow;
   }
    .content {
        flex: 0 0 25%;
        background-color: blue;
        border: 2px solid red;
        box-sizing: border-box;
    }
    </style>
</head>
<body>
    <h1>10个</h1>
<div class="box">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
</body>

2.2.6 结合响应式布局的综合运用

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box div{
    width: 150px;
    padding: 20px;
   }
    .box1 {
        height: 120px;
        background-color: red;
    }
    .box2 {
        height: 100px;
        background-color: blue;
    }
    .box3 {
        height: 40px;
        background-color: pink;
    }
    .box4 {
        height: 200px;
        background-color: yellow;
    }
    @media (min-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
    @media (max-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .box4 {
            order: -1;
        }
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

3. 文本超出打点和文本超出换行

3.1 一行文本超出打点

  {
   white-space: nowrap; //禁止换行
   text-overflow: ellipsis;//超出打点
    overflow: hidden;//超出隐藏
  }

3.2 多行文本超出打点

{
overflow : hidden;//超出隐藏
text-overflow: ellipsis;//超出内容打点
display: -webkit-box;//作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2;//显示几行
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
}

3.3 文本超出换行

word-break: break-word;

4. 如何让div水平垂直居中

有固定宽高

{
position: absolute;  
left:0;
top:0;
right: 0;
bottom: 0;
margin: auto;
}

没有固定宽高

{
position: absolute;  
left:50%;
top:50%;
transform: translate(-50%,-50%);
background-color: brown;
}

flex布局

{//父元素的样式
display: flex;
justify-content: center;
align-items: center;
}

5. 两栏布局、双飞翼布局、圣杯布局

两栏布局

<style>
.a{
	float: left;
	width: 200px;
	height: 200px;
	background: darkcyan
}
.b{
	margin-left: 200px;
	height: 200px;
	background: salmon
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>

双飞翼布局

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
     //清除浮动 
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .left{
        float: left;
        width: 200px;
        min-height: 300px;
        /* 将.left拉到最左边，原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        /* .left、.right各占了200px，因此需要将其抵消掉 */
        padding: 0 200px;
        background-color: #c32228;
    }
    .right{
        float: left;
        width: 200px;
        /* 将.right拉到最右边，原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
     
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="main">
            <div class="main-inner">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

3.圣杯布局

<style>
   *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   //清除浮动 
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .container{
        padding: 0 200px;
    }
    .left{
        position: relative;
        /* 2、将.left再次拉到最左边，否则.main的左侧会有200px的空白 */
        left: -200px;
        float: left;
        width: 200px;
        min-height: 300px;
        /* 1、将.left拉到最左边，原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        position: relative;
        /* 2、将.right再次拉到最右边，否则.main的右侧会有200px的空白 */
        right: -200px;
        float: left;
        width: 200px;
        /*/1、将.right拉到最右边，原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

6. 布局类型

6.1 流体布局（宽度设置百分比，一般适用于pc端）

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

在这里插入图片描述

6.2 响应式布局（媒体查询）

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

@media (max-width:960px){
    .left_con{width:58%;}
    .right_con{width:38%;}
}
@media (max-width:768px){
    .left_con{width:100%;}
    .right_con{width:100%;}
}

6.3 rem布局

1.安装lib-flexible：npm i lib-flexible --save；在项目的入口main.js文件中引入lib-flexible: import ‘lib-flexible’
2.安装postcss-px2rem ：npm install postcss-px2rem --save-dev
3.移除public中index.html中关于viewport的meta标签
4.vue.config.js中加入配置项 (如果没有vue.config.js就直接根目录(package.json同级)新建一个)，写入一下代码

module.exports = {
    css: {
        loaderOptions: {
               css: {
                       // options here will be passed to css-loader
               },
         postcss: {
                    // options here will be passed to postcss-loader
                    plugins: [require('postcss-px2rem')({
                              remUnit: 37.5,//设计稿的 十分之一
                              "exclude": /node_modules/i
                    })]
               }
          }
      }


};

7. 解决margin重叠问题

8. 浮动造成的问题

当一个元素的所有子元素全部浮动后，其父元素的高度将会变成0
如果我们在浮动元素的后面添加了内容后，由于前面的元素浮动了，所以后面的元素将自动到前面来

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .div1{background:#000080;border:1px solid red;}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
     
    </style>
</head>
<body>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        </div>
        <div class="div2">
        div2
        </div>
</body>

8.1 清楚浮动的方法

父盒子设置高度（弊端：必须知道父元素的高是多少）

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
     
    </style>
</head>
<body>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        </div>
        <div class="div2">
        div2
        </div>
</body>

父元素样式设置overflow:hidden（弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏）

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

父元素也浮动（弊端：对后续元素有影响）

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

在父盒子底部设置一个空div，该div的样式中添加clear:both

在这里插入代码片

父元素样式设置display:table（改变盒模型属性，会造成其他问题）

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

给父元素设置伪类样式 :after{ content:""; display: block; clear:both; }

<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

9. css3实现滚动同时隐藏滚动条

 <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul{
        width: 400px;
        height: 400px;
        margin:50px auto;
        padding: 0;
        border: 2px solid #000;
        list-style: none;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    ul::-webkit-scrollbar{
        display: none;
    }
    li{
        /* line-height: 48px; */
        background-color: darkorange;
        word-break: break-word
    }
     
    </style>
</head>
<body>
    <div class="div1">
       <ul>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
           <li>gggggfdfsdfdsfsdfyyydfsdfdretertffdsdsdsgfgdfsdfd</li>
       </ul>
        </div>
</body>

10. 遇到overflow: scroll不能平滑滚动怎么用css解决？

-webkit-overflow-scrolling: touch;  /*ipone 上解决方法是这样的*/

11. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法（css解决）？

11.1 产生原因

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码

换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
11.2 解决方法
1. 把li写成一排，避免产生换行字符
2. ul{font-size:0px;}
3. ul{letter-spacing: -5px;}；ul li{letter-spacing: normal;}
12. 常用的 css的属性列表汇总

13. css选择器

13.1 基本选择器

1.通配符选择器（＊）
2.id选择器（#ID）
3.类选择器（.className）
4.元素选择器(E)
5.后代选择器（ＥＦ）
6.子元素选择器(E>F)
7.相邻兄弟元素选择器(E + F)
8.群组选择器（selector1,selector2,…,selectorN）
9.属性选择器（ E[attr] ）
10.伪类选择器（：after ，：link ，：hover ，：active ）

13.2 CSS3的:nth选择器

1.fist-child: 选择某个元素的第一个子元素；
2.last-child: 选择某个元素的最后一个子元素；
3.nth-child(): 选择某个元素的一个或多个特定的子元素；

14. css3新增特性

14.1 @Font-face 特性

加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
```
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

div
{
	font-family:myFirstFont;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>

<div>
使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>

</body>
```
14.2 Word-wrap & Text-overflow 样式
- Word-wrap：设置或检索当当前行超过指定容器的边界时是否断开转行（break-word是断开转行）
- Text-overflow：设置或检索当当前行超过指定容器的边界时如何显示，“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接切割，"ellipsis"表示用省略号代替。
14.3 CSS3文字效果（文本阴影/边框阴影）
- text-shadow：可向文本应用阴影。text-shadow: 10px 10px 10px #6AAFCF; 参数依次意义水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
- word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
14.4 CSS3边框
- border-radius 属性用于创建圆角。
- box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;参数依次意义水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
- border-image：可以使用图片来创建边框。border-image：url(border.png) 30 30 round，参数依次意义边框的图片的路径，边框向内偏移，图片边框的宽度，边框图像区域超出边框的量;
  
  border-image-source 用在边框的图片的路径。
  border-image-slice 图片边框向内偏移。
  border-image-width 图片边框的宽度。
  border-image-outset 边框图像区域超出边框的量。
  border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
14.5 CSS3背景
- background-size：该属性规定背景图片的尺寸。background-size: 100px 40px;
- background-color：属性设置元素的背景颜色。
- background-position：属性设置背景图像的起始位置。background-position:X% Y% （第一个值是水平位置，第二个值是垂直位置。）;
- background-repeat：属性设置是否及如何重复背景图像。可能的值repeat默认值（水平垂直方向都重复），repeat-x（水平方向重复），repeat-y（垂直方向重复），no-repeat(背景图像将仅显示一次)，inherit(继承父元素的 background-repeat属性)
- background-origin：属性规定 background-position 属性相对于什么位置来定位。如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。可能的值padding-box默认值（背景图像相对于内边距框来定位），border-box（背景图像相对于边框盒来定位），content-box（背景图像相对于内容框来定位）
- background-attachment ：属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值scroll默认值（背景图像会随着页面其余部分的滚动而移动），fixed（当页面的其余部分滚动时，背景图像不会移动），inherit（规定应该从父元素继承 background-attachment 属性的设置）
14.6 多列
- column-count ：指定元素的列数
- column-gap ：指定的列之间的差距
- column-rule ：设置列之间的宽度，样式和颜色，column-rule ： column-rule-width column-rule-style column-rule-color （设置列之间的宽度规则，设置列之间的样式规则，设置列之间的颜色规则）;
14.7 CSS3用户界面
- resize 属性指定一个元素是否应该由用户去调整大小。可以使用 resize:both， resize:vertical 或者 resize:horizontal，用来分别设置元素是可以水平、垂直调整，垂直调整，水平调整。
```
<style> 
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>

<div>resize 属性规定是否可由用户调整元素尺寸。</div>

<p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>

</body>
```
- box-sizing 允许您以确切的方式定义适应某个区域的具体内容。box-sizing: content-box(标准盒模型)|border-box（IE盒子模型）|inherit （规定应从父元素继承 box-sizing 属性的值）;
- outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
```
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;

} 
</style>
</head>
<body>

<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>

<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

</body>
```
css面试题

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

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2、 box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
- context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
- border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding +content部分的高/宽
3、 CSS3有哪些新特性？
- RGBA和透明度
- background-image
- background-origin(content-box/padding-box/border-box) background-size
- background-repeat
- word-wrap（对长的不可分割单词换行）word-wrap：break-word
- 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
- font-face属性：定义自己的字体
- 圆角（边框半径）：border-radius 属性用于创建圆角
- 边框图片：border-image: url(border.png) 30 30 round
- 盒阴影：box-shadow: 10px 10px 5px #888888
- 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
4. 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
- 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；
- 而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
- 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
5.用纯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;
```
6.一个满屏品字布局如何设计?
```
 <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
           
        }
     .container{
        height: 50%;
        border: 2px solid red;
        box-sizing: border-box;
        width: 50%;
        margin: 0 auto;
        background-color: seagreen;
     }
     .nav{
         width: 100%;
         height: 50%;
         background-color: violet;
     }
     .left,.right{
         width: 50%;
         height: 100%;
         float: left;
         border: 2px solid black;
         background-color: chartreuse;
         box-sizing: border-box;
     }

    </style>
</head>
<body>
    <div class="container"></div>
    <div class="nav">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
```
方法二
```
    <style type="text/css">
        body{  
          height: 1200px;  
      }  
      .main {  
          position: fixed;  /*此步解决元素相对窗口的定位问题*/
          left: 0;  
          top: 0;  
          height: 100%;  
          width: 100%;  
      }  
      .wrapper-up {  
          height: 50%;  
      }  

      .wrapper-down {  
          height: 50%;  
          position: relative;  
      }  
      .div-square-up {  
          width: 50%;  
          margin: 0 auto;  
          border: 2px solid red;  
          height: 96%;  
          box-sizing: border-box;  
      }  

      .div-square-left {  
          position: absolute;  /*此步解决元素左右定位问题*/
          left: 0;  
          width: 48%;  
          height: 100%;  
          box-sizing: border-box;  
          border: 2px solid red;  
      }  

      .div-square-right {  
          position: absolute;   /*此步解决元素左右定位问题*/
          right: 0;  
          width: 48%;  
          height: 100%;  
          border: 2px solid red;  
          box-sizing: border-box;  
      }  
    </style>
</head>
<body>
    <div class="main">  
         <div class="wrapper-up">  
           <div class="div-square-up"></div>  
         </div>  
         <div class="wrapper-down">  
           <div class="div-square-left"></div>  
           <div class="div-square-right"></div>  
         </div>  
    </div> 
</body>
</html>
```
7.常见的兼容性问题？
- 不同浏览器的标签默认的margin和padding不一样。解决方法*{margin:0;padding:0;}
- IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
- 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```
{background-color:#f1ee18;
/*所有识别*/
.background-color:#00deff\9; 
/*IE6、7、8识别*/
+background-color:#a200ff;
/*IE6、7识别*/
_background-color:#1e0bd1;
/*IE6识别*/}
```
- 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
- 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。
- 解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
8.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

9. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
- chrome中，使用collapse值和使用hidden没有区别。
- firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
10. display:none与visibility：hidden的区别？
- display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
- visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
11.position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

12.上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。
```
<div class="aside"></div>
<div class="text">
 <div class="main"></div>
</div>
 
.aside {            
  margin-bottom: 100px;  
 width: 100px;            
  height: 150px;            
  background: #f66;
        }        
.main {           
    margin-top: 100px;            
    height: 200px;            
    background: #fcc;
        }
.text{            
/*盒子main的外面包一个div，
通过改变此div的属性使两个
盒子分属于两个不同的BFC，
以此来阻止margin重叠*/overflow: hidden;  
//此时已经触发了BFC属性。
        }
```
13.设置元素浮动后，该元素的display值是多少？

自动变成display:block

14.css性能优化

14.1 慎重选择高消耗的样式

高消耗属性在绘制前需要浏览器进行大量计算：
- box-shadows
- border-radius
- transparency
- transforms
- CSS filters（性能杀手）
14.2 避免过分重排(当发生重排的时候，浏览器需要重新计算布局位置与大小)
- width
- height
- padding
- margin
- display
- border-width
- position
- top
- left
- right
- bottom
- float
- text-align
- overflow-y
- font-weight
- overflow
- font-family
- line-height
- vertical-align
- clear
- white-space
- min-height
14.3 正确使用 Display 的属性

Display 属性会影响页面的渲染，请合理使用。
- display: inline后不应该再使用 width、height、margin、padding 以及 float
- display: inline-block 后不应该再使用 float；
- display: block 后不应该再使用 vertical-align；
- display: table-* 后不应该再使用 margin 或者 float；
14.4 不滥用 Float

Float在渲染时计算量比较大，尽量减少使用。

14.5动画性能优化

动画的实现原理，是利用了人眼的“视觉暂留”现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在“动”。

动画的基本概念：
- 帧：在动画过程中，每一幅静止画面即为一“帧”;
- 帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second);
- 帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒);
- 跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。
一般浏览器的渲染刷新频率是 60 fps，所以在网页当中，帧率如果达到 50-60 fps 的动画将会相当流畅，让人感到舒适。
- 如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame. 避免使用 setTimeout,setInterval.
- 避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS声明动画会得到更好的浏览器优化。
- 使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。
15.浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

16.在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

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

17.1 何时使用margin
- 需要在border外侧添加空白
- 空白处不需要背景色
- 上下相连的两个盒子之间的空白，需要相互抵消时。
17.1 何时使用padding
- 需要在border内侧添加空白
- 空白处需要背景颜色
- 上下相连的两个盒子的空白，希望为两者之和。
注意：兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

18.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

19.全屏滚动的原理是什么？用到了CSS的哪些属性？
- 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
- overflow：hidden；transition：all 1000ms ease；
20.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
- 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
- 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
- 页面头部必须有meta声明的viewport。
```
<meta name=’viewport’ 
content=”width=device-width, 
initial-scale=1. maximum-scale=1,
user-scalable=no”>
@media screen and (条件) {
    选择器......
}
```
21.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
- :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
22.你对line-height是如何理解的？
- 行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
- 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
- 多行文本垂直居中：需要设置display属性为inline-block。
23.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

24.position:fixed;在android下无效怎么处理?
```
<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, 
minimum-scale=1.0, 
user-scalable=no"/>
```
25.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

26.display:inline-block 什么时候会显示间隙？
- 有空格时候会有间隙解决：移除空格
- margin正值的时候解决：margin使用负值
- 使用font-size时候解决：font-size:0、letter-spacing、word-spacing
27.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

28.style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

29.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
- 参数是scroll时候，必会出现滚动条。
- 参数是auto时候，子元素内容大于父元素时出现滚动条。
- 参数是visible时候，溢出的内容出现在父元素之外。
- 参数是hidden时候，溢出隐藏。
30.阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

weixin_52090570

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础及面试题

前端学习文档css篇动画效果基本知识点flex布局文本超出打点一行文本超出打点多行文本超出打点如何让div水平垂直居中两栏布局、双飞翼布局、圣杯布局布局类型流体布局（宽度设置百分比，一般适用于pc端）响应式布局（媒体查询）rem布局css篇动画效果基本知识点transform：flex布局文本超出打点一行文本超出打点 { white-space: nowrap; //禁止换行 text-overflow: ellipsis;//超出打点 overflow: hidd
复制链接

扫一扫