css面试题

用纯CSS创建一个三角形的原理是什么?**

​ 使用一个边框实现,

​ 将三个边框设置宽度背景颜色为透明,一个边框设置为有颜色有宽度

absolute的containing block计算方式跟正常流有什么不同?

​ 包裹决定定位元素的父容器必须是具有position属性为absolute或者relative。

​ 父元素为absolute会脱离文档流 ,父元素为relative不会脱离文档流

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

​ collapse 属性可以使元素折叠隐藏起来

不同的浏览器相当于visibility:hidden占据位置 先隐藏再添加伪类不能实现 鼠标放上去的时候不能js不能取到

对BFC规范(块级格式化上下文:block formatting context)的理解?

​ bfc是用来规定块级元素布局

​ 给元素添加float 、visibility等属性时会触发bfc。

块元素 行内块进行布局

html

float:not none

overfloew:not visibility

display:inline-block,table-cell table-caption

position:absolute fixed

为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

​ 添加浮动后,元素会脱离文档流浮动,只有遇到不是static 属性的元素时才会停下来。

​ 子元素浮动会造成父元素高度无法被子元素撑开,当我们需要父元素有高度就需要清除浮动, 重新给父元素计算高度。

​ 清除浮动的方式有给父元素手动添加高度,或者使用伪类清除浮动。

 .clear::before{display: "block";
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;}

CSS优化、提高性能的方法有哪些?

​ 使用外部样式,减少代码重复度。

​ 使用精灵图片等减少加载次数,http请求

浏览器是怎样解析CSS选择器的?

浏览器是通过从右往左从上到下的方式解析css选择器的。

因为如果从左往右解析选择器时,匹配的css tree如果和dom树不匹配需要回溯重新寻找匹配。而从有往左一直遍历到匹配html根节点为止就可以高效匹配不需要回溯操作。

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

标准盒子为内容盒子 宽度=内容的宽度 + paddiing +border +margin

内容盒子设置的宽度就是纯内容的宽度

低版本为边框盒子 宽度=内容的宽度(宽度+padding +border)+margin

边框盒子设置的宽度为内容的宽度 加上 padding 加 border

position的值? 及每个值的作用是什么

position: relative | absolute | fixed

相对定位: 相对自身元素进行定位 ,使用top ,bottom , left,right, 调整元素位置

​ 不会脱离文档流

绝对定位:相对祖籍元素中position属性不为static的元素进行定位 ,使用top ,bottom , left, right, 调整元素位置

​ 会脱离文档流

固定定位 :相对浏览器窗口进行定位 主要用于测边栏 使用top ,bottom , left, right, 调整元素位置

​ 会脱离文档流

<!Doctype html> 的作用

1:声明该文档的类型为html文档

2:!为严格模式 ,严格模式情况下被废弃的标签不能使用

圣杯布局;谈谈你的认识,并说明如何实现??????

圣杯布局主要通过设置margin为负值,使元素达到理想的布局位置。

双飞翼 margin正值

比如 实现一个容器中左右两个div交换位置,给右边的蓝色div添加margin-left:-两倍自身宽度即可

<style>
    .container{
        width: 100%;
        height: 100%;
        padding: 400px;
        background-color: pink;
    }
   
    .left{
        width: 100px;
        height: 100px;
        float: left;
        background-color: red;

    }
    .right{
        width: 100px;
        height: 100px;
        float: left;
        <!-- 右边的到左边 -->
        margin-left: -200px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="left"></div>
        <div class="right"></div>

    </div>
</body>
如何实现背景透明;文字不透明?

线性渐变 linear-granted

​ 默认从上到下渐变 from 起点 to终点 只写一个时,相反方向为另一个

​ 0deg to top

​ 45deg to right top

​ 90deg to right

​ 135deg to right bottom

​ 180deg to bottom

​ 225deg to left bottom

​ 270deg to left

​ 315deg to left top

径向渐变 方形 圆形从里到外渐变

使用rgba设置alpha 透明度即可,opacity会造成子元素都透明的情况

css3新增的伪类有哪些

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一元素
p:nth-child(2) 选择属于其父元素的第二个元素
:enabled :disabled 表单控件的禁用状态。
p:checked
p:focus
:hover
:link
:target
:nth-of-type

html元素的特点有哪些;分别是什么

html 元素分为块元素 、行元素、行内块元素

块元素特点:独占一行 ,不设置宽高,宽度为父元素的宽度,高度为内容的高度

行元素特点:不独占一行,紧跟着前面的元素,不可设置宽高,宽高由内容决定 可以设置padding border值

行内块特点:不独占一行,紧跟着前面的元素,可以设置宽高,margin ,padding

CSS3新特性有哪些?

css3新特性有 transition过渡 keyframe动画 @media 媒体查询 旋转等

box-shadow

text-shadow

2d 3d

背景图片

边框图片

媒体查询

文本效果

特殊字体

字体图标

resize:both (拖拽进行元素大小的改变)

渐变

伪类

伪元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值