| 失效链接处理 |
|
CSS整合面试知识点 PDF 下载
本站整理下载：
相关截图：
主要内容：
1、说一下 css 盒模型 / 介绍一下盒模型
Css3 盒模型就是用来装页面上的元素的矩形区域（本质上是一个盒子，封装周围的 HTML
元素，它包括边框、边距、填充和实际内容），它包括 IE 盒子模型和标准的 W3C 盒子模型。
使用 box-sizing 属性可以改变盒子模型，默认为 content-box，表示标准盒子模型；
box-sizing : border-box 表示的则是 IE 盒子模型；最后，还有 box-sizing : padding-box,这个属性
值的宽度包含了左右 padding + width，也很好理解记忆，包含什么，width 就从什么开始算
起。
区别：这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width
指 content 部分的宽度，在 IE 盒子模型中，width 表示 content + padding + border 这三个部分
的宽度，故这使得在计算整个盒子的宽度时存在着差异：
w3c 盒子，设置的宽高是内容区的宽高
内容区的宽高
宽：width，
高：height
盒子的宽高
宽：width+左右 border+左右 padding
高：height+上下 border+上下 padding
所占屏幕空间的宽高
宽：width+左右 border+左右 padding+左右 margin
高：height+上下 border+上下 padding+上下 margin
IE 盒子，设置的宽高就是盒子的宽高
内容区的宽高
宽：width-左右 padding-左右 border
高：height-上下 padding-上下 border
盒子的宽高
宽：width
高：height
所占屏幕空间宽高
宽：width+左右 margin
高：height+上下 margin
2、box-sizing 的语法和基本用处
box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边
距和边框;
border-box：为元素设定的宽度和高度决定了元素的边框盒，
inherit：继承父元素的 box-sizing
3、画一条 0.5px 的线
1）采用 meta viewport 的方式,该方法只只针对于移动端，只在移动端上才能看到效果
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
2）采用 border-image 的方式
3）采用 transform: scale()的方式
• transform: scaleY(0.5);
• transform-origin: 50% 100%; 4）直接设置
5）采用 boxshadow box-shadow: 0 0.5px 0 #000; 4、link 标签和 import 标签的区别
1）Link 属于 html 标签，而@import 是 CSS 提供的； 2）页面被加载时，link 会被同时加载，而@import 引用的 css 要等到页面加载结束后才
会被加载； 3）Link 是 html 标签，因此没有兼容性问题，而@import 只有在 IE5 以上才能被识别； 4）Link 方式的样式的权重高于@import。 5）link 是属于 XHTML 的，除了可以加载 css，还可以定义 RSS 等其他事务，而@import
是属于 css 范畴，只能加载 css
5、transition 和 animation 的区别
Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值；他们
的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件
的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from……to，而 animation 可以
是一帧一帧的。 6、Flex 布局
Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖于 display 属性+position 属性+float 属性，它
对于那些特殊布局非常不方便，比如：垂直居中就不容易实现。
简单的分为容器属性和元素属性
容器的属性： flex-direction: row | row-reverse | column | column-reverse;决定主轴的方向（即子
item 的排列方式）
flex-wrap: nowrap | wrap | wrap-reverse;决定换行规则
flex-flow: <flex-direction> | <flex-wrap>
justify-content: 对齐方式，水平主轴对齐方式
align-items: 对齐方式，竖直轴线方向
项目的属性（元素的属性） order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，
如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默
认属性为 auto，表示继承父元素的 align-items
比如说，用 flex 实现圣杯布局
7、BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）/ 什么是 BFC？
BFC 直译成块级格式化上下文，用于清除浮动，并且有一定的布局规则。
BFC 区域不会与 float box 重叠；它是页面上的一个独立容器，子元素不会影响到外面；
计算 BFC 的高度时，浮动元素也会参与计算。 （BFC 也就是常说的块级格式化上下文，这是一个独立的渲染区域，规定了内部如何布
局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box
垂直放置，计算 BFC 的高度的时候，浮动元素也会参与计算。）
哪些元素会生成 BFC：根元素，float 不位 none 的元素（浮动元素），position 为 fixed
和 absolute 的元素，display 为 inline-block、table-cell、table-caption、flex、inline-flex 的元素，
overflow 不为 visible 的元素
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
