CSS经典面试题

1、标准盒模型和低版本IE盒模型(怪异模式)有什么区别?

标准盒模型:内容的宽度(content)+border+padding+margin;

IE低版本盒模型:内容的宽度(content+border+padding)+margin;

最主要的区别在于盒模型的宽度;

 

box-sizing属性是用来控制元素的盒子模型的解析模式,默认为content-box

content-box:w3c标准盒子模型,设置元素的height/width属性指的是content部分的高宽

border-box:IE传统盒子模型,设置元素的height/width属性指的是border+padding+content部分的高宽

2、利用CSS3属性写出一个三角形

<style>

div{

width: 0;

height: 0;

border-top: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid red;

border-left: 40px solid transparent;

}

</style>

</head>

<body>

<!-- 想要改变三角形的方向只需要改变border属性值(即tblr) -->

<div></div>

</body>

 

3、怎样理解HTML5?

 

(1)、在前端领域H5是一个技术集合(技术栈),而不是单纯的一个技术点,所以不能理解是一个html的规范。

(2)、我们可以从html、css、js三个方面进行梳理

            html:语义化标签、新增表单类型、新增表单属性

            css:新增选择器、过渡、转换、动画、媒体查询

            js:canvas绘图、ES6

(3)、从职能理解H5的开发

            移动web的开发

            响应式开发

            单页面应用开发

            混合APP开发

            微信小程序

            微信公众号开发

H5开发泛指对H5技术栈(HTML的提升、css的提升、JavaScript的提升)的综合使用开发网页应用程序

4、CSS3有哪些新的特性?

  (1)、RGBA和透明度

  (2)、background-image、background-origin、background-size、background-repeat

  (3)、word-wrap(对长的不可分割的单词进行换行)word-wrap:break-word;  

  (4)、文字阴影:text-shadow:5px 5px 5px #ccc;(水平阴影,垂直阴影,模糊距离,阴影颜色

  (5)、font-face:自定义自己的字体

  (6)、圆角(边框半径):border-radius 属性用于创建圆角

   (7)、盒阴影box-shadow:5px 5px 5px #ccc;

   (8)、媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

5、为什么移动端项目要使用box-sizing:border-box?

box-sizing:border-box;可以避免宽度溢出,造成横向滚动条(移动端项目都是非固定式宽度)

6、display:none与visibility:hidden的区别?

display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)

visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

重绘:当render-tree中的一些元素需要更新属性,而这些属性只影响元素的外观、风格,而不影响布局,比如是background-color,则就称为重绘。

回流:当页面中的布局和几何属性改变时就需要回流,比如是:

<1>、添加或删除可见的DOM元素

<2>、元素位置的改变

<3>、元素尺寸的改变(边框、尺寸、填充、宽度、高度)

<4>、内容的改变(比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变)

<5>、页面渲染初始化

<6>、浏览器窗口尺寸的改变-resize事件发生时

回流必将引起重绘,重绘不一定会引起回流

7、对BFC(块级格式化上下文block formatting context)的理解?

简单的来说BFC是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

8、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

<1>居中div

 

<style>

div{

width: 200px;

height: 200px;

margin:0 auto;

background-color: pink;

}

</style>

</head>

<body>

<div></div>

</body>

 

<2>居中一个浮动的元素上下左右居中

 

 

<style>

div{

width: 200px;

height: 200px;

background-color: pink;

float: left;

position: absolute;

left: 50%;

top: 50%;

margin: -100px 0 0 -100px;

}

</style>

</head>

<body>

<div></div>

</body>

 

<3>绝对定位水平居中

 

<style>

div{

width: 200px;

height: 200px;

background-color: pink;

position: absolute;

left: 0;

right: 0;

margin: 0 auto;

 

}

</style>

</head>

<body>

<div></div>

</body>

 

9、position的值?

 

static(默认):按照正常文档流进行排列

relative(相对定位)不脱离文档流,参考自身的top、right、bottom、left进行定位

absolute(绝对定位)参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位

fixed(固定定位)所固定的参照对象是可视窗口的位置

10、常见的兼容性问题

<1>不同浏览器标签默认的padding和margin不一样,*{padding:0;margin:0}

<2>chorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入css属性-webkit-text-size-adjust:none;

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

由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。


浮动带来的问题:

<1>父元素的高度无法被撑开

<2>与浮动元素同级的非浮动元素(内联元素)会跟随其后

<3>若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

清除浮动的方式:

<1> 父级div定义高度

<2> 最后一个浮动元素后加空div标签,并添加样式clear:both

<3> 包含浮动元素的父标签添加样式overflow为hidden和auto

<4> 父级定义zoom

 

 

 

 

              

 

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一些关于Vue的经典基础面试题的回答: 1. 前端采用的语言为HTML、CSS和JavaScript,前端采用的框架是Vue.js。后端采用的语言为Golang,后端采用的框架为Gin。 2. Vue-router的动态路由是指根据传递的参数动态生成路由。获取传过来的值可以使用$route对象中的params属性或query属性来获取。 3. Vue-router有三种导航钩子:全局前置守卫、全局解析守卫和全局后置钩子。全局前置守卫通过router.beforeEach()方法来定义,在跳转之前执行。全局解析守卫通过router.beforeResolve()方法来定义, 在解析路由之前执行。全局后置钩子通过router.afterEach()方法来定义,在跳转之后执行。 4. v-model是Vue.js中的指令,用于在表单元素和Vue实例的数据之间建立双向绑定。它可以通过v-model指令将表单输入和Vue实例的数据属性进行双向绑定,实现数据的实时同步。 5. Axios是一个基于Promise的HTTP客户端库,用于发送HTTP请求。使用Axios可以通过发送GET、POST等请求与后端进行数据交互。实现登录功能的流程可以通过发送POST请求向后端发送用户的登录信息,然后根据后端返回的响应进行相应的处理,比如跳转到登录成功页面或者显示登录失败的提示信息。 这些是关于Vue的经典基础面试题的回答。希望对你有帮助!<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue面试题基础面试题](https://download.csdn.net/download/weixin_42979948/88222466)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值