css前端面试题（一）

ʚ浅初.ɞ

已于 2022-05-06 09:07:12 修改

阅读量191

点赞数 1

分类专栏：前端面试题文章标签：前端 css css3

于 2022-03-09 16:04:16 首次发布

本文链接：https://blog.csdn.net/qq_61195495/article/details/123361554

版权

前端面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

六、css中link和@import的区别是？

10.1一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化

方法1：

方法2：

一、谈一谈你对css布局的理解

常见的布局方式：

固定布局（宽高等设置固定像素）
流式布局（百分比布局）
弹性布局（Flex伸缩布局）
浮动布局（Float）
定位布局（position）

二、请列举几种可以清楚浮动的方法

2.1额外标签法

使用方法：额外标签法会在浮动元素末尾添加一个空的div标签。

<div style="clear:both"></div>

2.2父级添加overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden

overflow:hidden;

2.3父级添加after伪元素

.clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }

2.4父级添加双伪元素

.clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

三、请列举几种可以隐藏元素的方法？

visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。
display: none；元素会变得不可见，并且不会再占用文档的空间。

四、css什么属性可以继承？

字体以及文本相关的属性可以继承

4.1字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

4.2文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（uppercase全大写、lowercase全小写、capitalize首字母大写）
color：文本颜色

五、css选择器

5.1选择器

元素选择器：* 、标签选择器、id选择器、类选择器
关系选择器：子集选择器和后代选择器
属性选择器：E[att]、E[att="val"]等等
伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等
伪对象选择器：E:before和E:after等

5.2css选择器的优先级

!important>id>类>标签选择器

5.3权重

一个行内样式+1000

一个id+100

一个属性选择器/class类/伪类选择器+10

一个元素名/伪对象选择器+1

六、css中link和@import的区别是？

两者都是外部引用css的方式

link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM改变样式；而@import不支持。

七、定位

只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

定位	代码	参照物
相对定位	positive:relative	参照它在页面中原来的位置进行移动的
绝对定位	position:absolute	相对于距离它最近的有定位的父元素进行移动的
固定定位	position:fixed	相对于页面的位置进行移动的

八、如何让一个盒子水平垂直居中？

第一种方式(已知盒子宽高)

小盒子绝对定位，设置top50%，left50%;margin-top和margin-left分别设置小盒子宽高的一半，大盒子相对定位

<div id="big">
    <div id="small"></div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #big{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 水平居中 */
            margin: 0 auto;
            position: relative;
        }
        /* 子绝父相 */
        #small{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            /*大盒子高度的一半*/
            top: 50%;
            /* margin设置为小盒子高度的一半 */
            margin-top: -50px;
            /*大盒子宽度的一半*/
            left: 50%;
            /* margin设置为小盒子宽度的一半 */
            margin-left: -50px;
        }
</style>

第二种方式

小盒子绝对定位，设置top50%，left50%;css3新属性transform: translate(-50%,-50%);，大盒子相对定位

<div class="a">
    <div class="b"></div>
</div>

.a{
    width: 300px;
    height: 500px;
    background-color: violet;
    /* 相对定位 */
    position: relative;
}
.b{
    width: 100px;
    height: 200px;
    background-color: wheat;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* css3新属性位移 */
    transform: translate(-50%,-50%);
}

第三种方式

小盒子绝对定位，设置top:0;bottom:0;left:0;right:0;margin:auto，大盒子相对定位

<div class="a">
    <div class="b"></div>
</div>

<style>
        .a{
            width: 300px;
            height: 500px;
            background-color: violet;
            /* 相对定位 */
            position: relative;
        }
        .b{
            width: 100px;
            height: 200px;
            background-color: wheat;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
</style>

第四种方式

弹性盒子

<div class="big">
    <div class="small"></div>
</div>

.big{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            /* 设置为弹性盒子 */
            display: flex;
            /* 设置侧轴居中 */
            align-items: center;
            /* 设置主轴居中 */
            justify-content: center;
        }
        .small{
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

九、cookie和session的区别？

	cookie	session
存放地点	数据存放在客户端浏览器上	数据存放在服务器上
安全性	不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗	安全
性能	当访问增多，会比较占用服务器的性能，考虑到减轻服务器性能方面，使用cookie	会在一定时间内保存在服务器上
数据大小	数据大小不能超过4k，很多浏览器都限制一个站点最多保存20个cookie
个人建议	其它需要保留的信息	存储登录信息等重要信息

十、基础页面布局

10.1一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化

方法1：

给左边盒子设置固定宽添加浮动
给右边盒子添加一个margin-left：左边盒子的宽度

<div class="box1"></div>
<div class="box2"></div>

.box1{
    width: 100px;
    height: 200px;
    background-color: aquamarine;
    float: left;
}
.box2{
     height: 200px;
     background-color: blueviolet;
     margin-left: 100px;
}

方法2：

用一个大盒子包住两个小盒子
给大盒子添加弹性布局
给左边的小盒子设置固定宽
给右边的小盒子添加 flex-grow: 1;属性

    <div class="big">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

        .big{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .box1{
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
        .box2{
            height: 200px;
            background-color: blueviolet;
            flex-grow: 1;
        }

ʚ浅初.ɞ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css前端面试题（一）

1.对css布局的理解2.清除浮动的方法3.隐藏元素的方法4.css什么属性可以继承5.css选择器有哪些，优先级，权重6.css中link和@import的区别7.定位8.盒子水平垂直居中9.cookie和session的区别？10.基础页面布局
复制链接

扫一扫