前端面试准备(Day1)

1.讲一下盒模型,普通盒模型和怪异盒模型有什么区别?

盒模型:CSS把每个元素视为一个盒子,每个盒子包括分为内容(content)、填充(padding)、边框(border)、边界(margin)四个部分。盒模型是CSS布局的基本单元。

W3C标准盒模型(content-box):(属性width,height只包含内容content,不包含border和padding。)  

IE盒模型(也称怪异盒模型)(border-box):(属性width,height包含content、border和padding)

2.块元素和行内元素区别是什么?常见块元素和行内元素有哪些?

1.常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <dl> <li>等

块元素的特点有:

        1.总是从新的一行开始

        2.宽度(width),高度(heigth),外边距以及内边距都可以控制

        3.宽度默认是父容器的%

        4.可以容纳内联元素或者其他块元素

2. 常见的行内元素有<a>、<strong>、<em>、<i>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素

行内元素的特点有:

        1.和相邻行内元素在一行上

        2.高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效

        3.默认高度就是它本身内容的宽度

        4.内行元素只能容纳文本内容和其他内行元素(<a>比较特殊)

3.行内块元素: <img /><input /><td>

行内块元素的特点:

        1.和相邻行内元素(行内块元素)在一行上,但是之间会有空白缝隙

        2.默认宽度就是它本身内容的宽度

        3.高度、行高、外边距以及内边距都可以控制

3.HTML语义化标签有哪些?

通过使用恰当语义的HTML标签,让页面具有良好的结构与含义.

header网页的头部

main网页的主体部分(只有一个main)

nav  网页的导航

section  一个独立的区块

aside  和主体相关的其他内容(侧边栏)

article独立的文章

footer  网页的底部

4.伪类和伪元素的区别是什么?

伪类(pseudo-class)是一个以冒号作为前缀,被添加到一个选择器末尾的关键字,样式被呈现到指定的元素时。如:(:last-child、:nth-of-type(n)),通过在元素选择器上加入伪类改变元素状态。

伪元素是以两个冒号作为前缀,用于创建一些不在文档树中的元素,并为其添加样式。通过对元素的操作进行对元素的改变。

5.CSS如何实现垂直居中?

1)设定行高(line-height):设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素,行内元素的上下都加上行高的1/2,所以就垂直居中

2)添加伪元素:

 .div0::before{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  position:relative;

  vertical-align:middle;/* vertical-align针对行内元素,div是block*/

  background:#f00;

}

3)calc属性动态计算:top: calc(“50%的外框高度- 50%的div高度”

至于为什么不用margin-top,因为margin相对的是水平宽度,

4)使用表格或假装表格

5)Transform:

position:relative;

top:50%

transform:translateY(-50%);

6)绝对定位

7)用Flexbox

6.水平方向布局

一个元素在父元素中,水平布局满足一下等式:( margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的width)

7 .垂直方向布局

如果子元素超过了父元素大小,则会溢出使用overflow属性设置父元素如何处理溢出

overflow:overflow-x/overflow-y:

            visible(默认值) 会溢出,在父元素外部显示

            hidden 溢出的内容会被裁剪,不会显示

            scroll 生成滚动条

            auto 根据需要生成滚动条

8、CSS常见的选择器有哪些?

1)元素选择器:元素{}

2)id选择器:#id{}

3)类选择器:.class{}

4)复合选择器

  选择器1 选择器2....(交集)

  选择器1,选择器2,...(并集)

5)关系选择器

  5.1 子元素选择器:父元素>子元素{}

  5.2 后代选择器:祖先元素 后代元素{}

  5.3 兄弟选择器:前一个+后一个{}(只会选择一个)

    前一个~后面{}(前面的兄弟不会被选中)

6)属性选择器

  [属性名] 选择含有指定属性的元素

  [属性名=属性值] 选择含有指定属性和指定值的元素

7)伪类选择器(带一个:)

  7.1 :first-child:第一个子元素

  7.2 :last-child :最后一个子元素

  7.3 :nth-child():选中第n个  2n/even偶数个 2n-1/odd奇数

  7.4 :first-of-type

  7.5 :last-of-type

  7.6 :not():除了

8)超链接的伪类

  8.1 :hover 鼠标移入

  8.2 :link 表示一个没访问过的链接

  8.3 :visited 表示一个访问过的链接,只能改变颜色

  8.4 :active 鼠标点击

9)伪元素选择器(特殊的位置)

  9.1 ::after 元素的结束位置

  9.2 ::before 元素的开始位置

    使用9.1 9.2  必须结合content!!!

  9.3 ::first-leter 第一个字母

  9.4 ::first-line  第一行

  9.5 ::selection 选中的内容

9..CSS的优先级如何计算?

对于每一条css规则,生成四元组(内联,id,class,元素)

!important  无穷大   

style 属性      1,0,0,0   

id 选择器      0,1,0,0   

类、伪类、结构伪类、属性选择器    0,0,1,0   

元素、伪元素选择器    0,0,0,1   

通配符选择器       0,0,0,0   

继承的样式    没有权重      

10长度单位px、em和rem,rpx,vw,vh的区别是什么?

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

em :相对与父元素的font-size来计算的

rem:相对于根元素html的font-size

rpx:小程序独有的,论大小屏幕,规定屏幕宽为750rpx

vw:相对于浏览器视口宽度

vh:相对于浏览器视口高度

11.讲一下flex弹性盒布局?

    弹性容器

           1)display:

                  flex:块级弹性容器

                  inline-flex:行内的弹性容器(不会独占一行)

           2)flex-direction:设置主轴的方向

                   row:默认值,水平排列

                   主轴:右——>左

                   row-reverse:反向水平排列

                   主轴:左——>右

                   column:垂直排列

                   主轴:上——>下

                   column-reverse:反向垂直排列

                   主轴:下——>上

                主轴:弹性元素的排列方向

                侧轴:与主轴垂直

            3)flex-wrap:弹性元素是否自动换行

                     nowrap:不换行

                     wrap:换行

                     wrap-reverse:辅轴反方向换行

            4)flex-flow:flex-direction和flex-wrap的简写,无顺序要求

            5)jusitify-content:主轴上的元素如何排列

                    flex-start:沿主轴开始

                    flex-end:沿主轴终边

                    center:元素居中排列

                    space-around:空白分布在元素两侧

                    space-evenly:空白分布在元素单侧

                    space-between:空白均匀分布到元素两侧

            6)align-items:元素在辅轴上如何对齐

                         strench:默认值,将同一行的元素设置成相同高度

                         flex-start:元素不会拉伸,沿辅轴起边对齐

                         flex-end:元素不会拉伸,沿辅轴终边对齐

                         center:垂直居中

                         baseline:基线对齐

            7)align-content:辅轴空白的如何分配

                    flex-start:沿主轴开始

                    flex-end:沿主轴终边

                    center:元素居中排列

                    space-around:空白分布在元素两侧

                    space-evenly:空白分布在元素单侧

                    space-between:空白均匀分布到元素两侧

    弹性元素

             弹性容器的子元素,是弹性元素,一个元素可以同时是弹性容器,元素  

            1)flex-grow:

                    指定弹性元素的伸长系数,默认是0

                    父元素的剩余空间,按比例分配

            2)flex-shrink:

                      指定弹性元素的收缩系数,默认时1

                      父元素的空间容纳不下时,对子元素进行收缩

            3)align-self:用来覆盖align-items

            4)flex-basis:元素在主轴上基础长度

            5)flex:增长 缩减 基础长度

                  initial:0 1 auto

                  auto:1 1 auto

                  none:0 0 auto

            6)order:元素的排列顺序

12.float:设置浮动,

float:none /left/right在其父元素内, 设置浮动后,水平等式不需要强制满足

浮动的特点:

        1)完全从文档流脱离,不再占用文档流的位置,下边的元素会向上移动

       2)通过浮动,可以使一个元素向其父元素的左侧或右侧移动,不会超过其他浮动元素,不会从父元素中移出

        3)如果上边是一个无浮动的元素,浮动元素无法上移

        4 )浮动元素不会盖文字,文字会环绕图片

        脱离文档流特点!!

          --块元素不再独占一行  宽 高被内容撑 开

          --行内元素可以设置宽高(变为块元素)

13.清除浮动有3种办法:

1)在浮动元素后面增加一个元素,设置clear: both;

2)父元素设置伪元素,给伪元素设置clear: both,设置clear的元素不受前面浮动元素影响,位置会放在浮动元素后面,因此可以把父元素撑开。

3)父元素设置overflow: hidden。overflow: hidden让父元素形成一个BFC,所以可以清除浮动。

13.浮动塌陷问题解决方法是什么?(bug)

高度塌陷:元素的高度默认是被子元素撑开的,但子元素设置浮动后,脱离文档流,导致父元素高度丢失,导致下面元素向上移,导致页面混乱     

开启BFC:

   1)设置浮动 flaot=left/right

   2)display: flex/inline-flex/

3)overflow:hidden/auto/scroll

4)position:absolute/fixed

/* 解决外边距重叠和高度塌陷 */

clearfix::before,

clearfix::after{

    content: '';

    display: table;

    clear: both;

}

14.BFC、IFC是什么?

BFCBlock Formatting Contexts)直译为块级格式化上下文” BFC就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响外面的元素,反之也是如此。

IFC  (Inline Formatting Context) 内敛格式化上下文。

       隐含属性,开启BFC后,变成独立的布局区域

       特点:

           1)开启BFC元素后,不会被浮动元素覆盖

           2)子与父元素外边距不会重叠

           3)可以包含浮动的子元素

15.position属性的值有哪些?各个值是什么含义?

position:left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素内容区的width

            static:默认值

            relative:相对定位

                   1) 参照自身在文档流中的位置

                   2) 会提升元素层级

                   3)不会脱离文档流

                   4)不会改变元素性质

                   5)不设置偏移量,没有变化

            absolute:绝对定位

                   1)不设置偏移量,位置没有变化

                   2)脱离文档流

                   3)会改变元素性质(变为块元素)

                   4)会提升元素层级

                   5)开启了定位的祖先元素,没有则是根元素

                  position: absolute;

                  left: 0;

                  right: 0;

                top: 0;

                bottom: o;

                margin: auto; //实现水平垂直居中

            fixed:固定定位

                   1)不设置偏移量,位置没有变化

                   2)脱离文档流

                   3)会改变元素性质(变为块元素)

                   4)会提升元素层级

                   5)参考于浏览器视口

            sticky:粘滞定位

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值