CSS面试题准备

最新推荐文章于 2024-04-23 00:30:00 发布

走小爷

最新推荐文章于 2024-04-23 00:30:00 发布

阅读量121

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44452346/article/details/118499015

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写目录标题

1.块级元素和行内元素

块级元素
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>	等

块级元素的特点：

块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素

行内元素
行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等

块级元素的特点：

和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

注意：

--只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素；因为它们都是文字块级标签，里面不能再存放其他的块级标签。
--链接里面不能再存放链接

行内块元素

在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性

行内块元素的特点：

和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
默认的宽度就是本身内容的宽度
高度，行高，内边距和外边距都可以设置

行内块元素
三种元素的相互转换

块转行内：display-inline；

行内转块：display：block；

块，行内元素转换为行内块：display：inline-block

2.常见的居中方法

水平居中

行内元素

看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center；如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center

块级元素

1. 分宽度定不定两种情况

定宽度
需要谁居中，给其设置 margin: 0 auto; （上下，左右；作用：使盒子自己居中）
不定宽度
默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center

2. 使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中

定宽度
设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%)
不定宽度
利用css3新增属性transform: translateX(-50%);

3. 使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;（justify-content属性定义了项目在主轴上的对齐方式。）

垂直居中

行内元素

单行行内元素：只需要设置单行行内元素的"行高等于盒子的高"即可；
多行的行内元素：使用给父元素设置display:table-cell;和vertical-align: middle即可；

块级元素

1. 使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度
设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
不定高度
利用css3新增属性transform: translateY(-50%);

2. 使用flexbox布局实现（高度定不定都可以）

只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center项目在交叉轴上如何对齐。

水平垂直居中

已知高度和宽度的元素

子绝父相
设置父元素为相对定位，给子元素设置绝对定位，
top: 0; right: 0; bottom: 0; left: 0; margin: auto
子绝父相
left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

未知高度和宽度的元素

使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
子绝父相
设置父元素为flex定位，justify-content: center; align-items: center

3.如何清除浮动

使用after伪元素清除浮动(推荐)

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义

额外标签法

在最后一个浮动标签后（必须是块级元素），新加一个标签，给其设置clear：both
优点：通俗易懂，方便；缺点：添加无意义标签，语义化差

BFC方式

父级添加overflow属性（父元素添加overflow:hidden）

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
不推荐使用

4.CSS盒模型

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。盒模型分两种，标准盒模型（W3C的标准）与IE盒子模型。
标准盒模型（W3C的标准）
在这里插入图片描述
IE盒子模型

在这里插入图片描述

5.如何画一条0.5px的线？

1.采用transform: scale( )的方式

<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .half-px {
            width: 300px;
            background-color: #000;
            height: 1px;
            transform: scale(0.5)
        }
    </style>
</head>
<body>
    <div class="half-px"></div>
</body>
</html>

2.采用meta viewport的方式（移动端）

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

6.document.write和innerHTML的区别？

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

7.link标签和import标签的区别？

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

8.transition和animation的区别？

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。

transition是过度属性：强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。

animation是动画属性：他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。

9.Flex布局

flex布局详解

10.BFC

块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则，它丝毫不会影响到外部元素。

BFC特点：

同一个BFC下margin会重叠
计算BFC高度时会算上浮动元素
BFC不会影响到外部元素
BFC内部元素是垂直排列的
BFC区域不会与float元素重叠

如何创建BFC：

position设为absolute或者fixed
float不为none
overflow设置为hidden
display设置为inline-block或者inline-table或flex

11.css选择器有哪些，选择器的权重的优先级

选择器类型
1、ID　　 #id
2、class　　.class
3、标签　　p
4、通用　　*
5、属性　　[type=“text”]
6、伪类　　：hover
7、伪元素　　::first-line
8、子选择器、相邻选择器

权重计算规则
1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。