Html css 面试题

面试题 专栏收录该内容
3 篇文章 0 订阅

Html css 面试题

  • 3.css的旋转

transform:rotate()

4.css的渐变色设置

linear-gradient

1.标准盒模型从内到外的属性

width height padding border margin positon

2.浮动是什么。浮动造成的影响 。 如何清除浮动。

浮动是一种布局方式 浮动脱离文档流

  1. 清除浮动 clear:both;添加空div
  2. 给浮动元素父级别添加高度
  3. 父元素页设置浮动
  4. 父元素display设置成inline-block
  5. 添加overflow:hidden

3.如何变成怪异盒模型

box-sizing:;

4.怎么样取消边框 border:0;

5.行内元素的特性 行内元素能否设置宽度、 行高

两个相邻的行内元素在一行显示 行内元素的宽高设置无效 但是设置的行高不会撑大元素会在上下形成margin pading设置可以撑大元素

6.移动端使用的单位 为什么使用这个单位 如何配置。

rem 为了是方便计算和根元素font-size值强耦合。 如果以iphone6为标准的。 配置 === 窗口宽度。/ iPhone6 的物理宽度

1.在表格中,设置单数行背景色与偶数行不同应该怎么做?

(js方法) 循环for tagname

6.外面给一个大盒子,让里面的小盒子上下居中(使用弹性盒的方法)

Display:flex; aliitem : cent

块级元素居中方法

https://blog.csdn.net/zhang_yu_ling/article/details/90272623

7.前端开发你会如何优化?(哪些方面)、

https://blog.csdn.net/qq_44432090/article/details/86668829

22、如何优化网页加载速度?

1.减少css,js文件数量及大小(减少重复性代码,代码重复利用),压缩CSS和Js代码

2.图片的大小

3.把css样式表放置顶部,把js放置页面底部

4.减少http请求数

5.使用外部 Js 和 CSs

6.利用多个域名来存储网站资源会更有效

5 . css 动画属性几种 ? 应用?

transition : 平衡过渡 animation: 动画. animation 一般通过@keyframes 规则

scale:rotate:skew :

9 . rem px rpx 区别 应用场景

rpx是解决自适应屏幕尺寸的尺寸单位,宽度为固定的750rpx。比如iPhone6的屏幕宽度是375px,那就是 1px=2rpx。

px相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

Rem 也称根em,只修改根元素,就可以调整字体大小,所以浏览器均支持rem,可以避免字体大小逐层复合的连锁反应。使用时 可以和px两者都使用。避免有些用户不兼容。

1.h5新增标签

nav main section headers footer article aside

2.h5画布标签

canvas

3.css选择器有几种

ID选择器 css选择器

4.Flex布局

1.盒模型有哪些?

盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外界区)

2.盒模型里有包括什么?

4.如何实现垂直居中

​ display: flex;

​ align-items: center;

​ position: absolute;

​ top: 50%;

​ transform: translateY(-50%);

5.定位有哪些?

10.为什么要消除浮动?

浮动的元素会脱离文档流

当父元素没有固定高度的时候 会出现高度坍塌现象

11.怎么消除浮动?

clear:both。

为什么不用table布局

  1. table比其它html标记占更多的字节。
  2. 阻挡浏览器渲染引擎的渲染顺序。
  3. 在某些浏览器中,table里的文字的拷贝会出现问题。
  4. ‘table对’对于页面布局来说,从语义上看是不正确的。

BFC是什么?

BFC的布局规则

一、内部的Box会在垂直方向,一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)

三、每个元素的margin box的左边, 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

六、计算BFC的高度时,浮动元素也参与计算

哪些元素或属性能触发BFC

根元素(html)

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

如何实现画一个正方形

如何实现正方行动态缩放

js

border一像素边框问题

transform:scrlopY(0.5)

布局方法有哪些?左边固定宽度,右边可以进行自适应布局,如何实现

.left{、

、、

​ width:200px;

​ height:100%;

​ background:red;

​ float:left;

​ }

​ .right{

​ height:100%;

​ background:blue;

/* 触发BFC */

​ overflow:hidden;

​ }

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

Jar-bui~~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值