各大厂前端面试题合集 — css（二）小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。文字环绕图片的实现 1

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

文字环绕图片的实现

1、给img添加属性align：right图片居右，left图片居左

<div style="width: 500px">
    <img src="images/bkjj.png" align="right" width="120" hspace="5" vspace="5" />
    <p>HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局</p>
</div>

2、给图片添加属性 float:left

盒子居中对齐

1、没有定位的盒子水平居中

=>让盒子的文字内容居中对齐：text-align:center

外边距实现盒子水平居中对齐，需要满足两个条件

a、必须是块级元素

b、盒子必须指定了宽度

eg：weight：500px;

margin：0 auto;

2、绝对定位的盒子居中对齐

水平居中：

position: absolute

a、首先让盒子left：50%

b、然后向左走自己盒子的一半的大小：margin-left:- px

垂直居中：......

3、不知道盒子的宽度和高度时

①transform(css3)

transform:translate(-50%,-50%)

transform:translateX(-50%)

transform:translateY(-50%)

②flex实现居中对齐

display:flex;

justify-content:center;

align-items:center;

css三种引入方式

一、行内样式

使用style属性引入CSS样式。

<h1 style="color:red;">style属性的应用</h1> 
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

二、内部样式

在style标签中书写CSS代码。style标签写在head标签中。

<head>
    <style type="text/css">
        h3{             
            color:red;          
        }
    </style>
</head>

三、外部样式

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">
    @import url("css文件路径");
</style>

如何画一个三角形

div{
    width:0px;
    height:0px;
    border-top:10px solid red;
    border-right:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:10px solid transparent;
}

🌟重排、重绘、节流

重排

改变构成渲染树的信息，导致部分渲染树节点或全部渲染树需要重新分析并计算尺寸位置，叫做重排

重绘

改变元素的非尺寸位置样式，如color、visibility等，导致需要重新绘制新的样式到页面元素上，叫重绘。

重绘重排的代价

耗时，导致浏览器卡慢。

优化：　　

1、浏览器自己的优化：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2、我们要注意的优化：我们要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。

（1）集中改变样式法:直接改变元素的className

（2）离线执行dom的操作，display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；

（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；

（4）用变量存储

如果你要获取某个上述罗列的属性，需要多次用到的话，建议用变量存储起来

（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；

（6）用documentFragment创建文档片段

通过new DocumentFragment() 创建文档片段，然后所有DOM操作都在这个片段上执行，然后再插入回文档中，只会触发一次重排

(7)减少对table的使用

table布局跟标准的文档流处理不一样，重排所花费的时间更

描述css hack技巧

条件注释：仅适用于IE
特定符号：适用于能识别特定符号的浏览器
内核符号：针对不同浏览器内核

🌟dispaly、visibility、opacity的区别

display :none 表示彻底消失，不在文本流
visibility :hidden, 视觉消失，透明度为0，click 事件不会触发绑定的事件
opacity :0:透明度为0，不会改变布局，click事件会触发绑定的事件

css中可以继承的属性

字体

font
font-family
font-weight
font-size
font-style

文本

text-indent。文本缩进
text-align。文本对齐
line-height
word-spacing。字间距
text-transform
letter-spancing。字符间距
color

元素可见性

visibility

表格布局

caption-side
border-collapse
border-spacing
empty-cells
table-layout

列表布局

list-style-type
list-style-image
liat-style-position
list-style

光标属性

cursor

🌟position的几种属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

display的属性

none：隐藏对象，不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素

block：指定对象为块元素

list-item：指定对象为列表项目

inline-block：指定对象为内联块元素

table指定对象作为块级元素的表格

inline-table：指定对象作为内联元素级的表格

table-caption：指定对象作为表格的标题

table-cell：指定对象作为表格单元格

table-row：指定对象作为表格行

table-row-group：指定对象作为表格表格行组

table-column：指定对象作为表格列

table-column-group：指定对象作为表格列组

table-header-group：指定对象作为表格标题组

table-footer-group：指定对象作为表格脚注组

compact：分配对象为块级对象或基于内容之上的内联对象

run-in：分配对象为块对象或基于内容之上的内联对象

ruby：将对象作为表格的脚注组显示

ruby-base：将对象作为表格脚注组显示

ruby-text：将对象作为表格脚注组显示

ruby-base-group：将对象作为表格脚注组显示

ruby-text-group：将对象作为表格脚注组显示

box：将对象作为弹性盒模型显示

inline-box：将对象作为内联块级弹性盒模型显示

css中link和@import的区别

link属于HTML标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
link是HTML标签，无兼容问题，而@import只在IE5以上才能识别
link方式的样式的权重高于@import的权重

静态布局、自适应布局、流式布局、响应式布局、弹性布局的区别

静态布局（Static Layout）--- px

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

流式布局（Liquid Layout）--- % （相似设备，不同分辨率）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

自适应布局（Adaptive Layout）--- @media （不同分辨率）一个一样的页面根据屏幕变大变小！！！

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

响应式布局 --- @media + % （不同设备，不同分辨率）根据屏幕有不用的页面！！！

通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

弹性布局 --- flex + rem

改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

自适应：所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

流式：采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

各大厂前端面试题合集 — css（二）