首页 > 国际新闻

CSS 面试总结

文章作者:来源:www.guiavv.com时间:2020-03-12



1.CSS盒子模型

CSS盒子模型本质上是一个封装了周围的HTML元素的盒子。包括:边距边框填充内容

标准框模型:块的总宽度=宽度(内容填充边框

ie框模型:块的总宽度=宽度(内容填充边框)边距

框大小:

内容框:高度和宽度分别应用于元素的内容框。也就是说,标准框模型

border-box:content padding border

inherit:box-size

2。visibility=hidden opacity=0 display=none(隐藏页面中元素的方法)

display:none//隐藏元素并更改布局。从网页

visibility:hidden中删除该元素是可以理解的;//隐藏元素,但不更改页面布局或触发元素绑定到的事件

opacity:0。//可见度为0

位置:移出可视区域

z-index:使用其他元素屏蔽涂层以覆盖

3。position属性

fixed

可以设置为窗口相对于窗口的置顶坐标,可以通过left、top、Right属性设置来定位

relative

可以将其移动到相对于其正常位置

的位置,无论元素是否被移动,元素仍然占据原始空间。移动元素将导致它覆盖其他可定位的

absolute

框的指定坐标,并且相对于包含它的元素(如果不是最近定位的父元素,则相对于)。左和上等属性可以指定

元素的位置独立于文档流,因此不会占用空间。定位的元素与其他元素

static

重叠,并且总是在页面流给定的位置。任何顶部、按钮、左侧、右侧或z-index声明

sticky

元素将首先根据正常的文档流定位,然后相对于流中元素的流根(BFC)和包含块(最近的块级祖先元素)。然后,元素定位被显示为在越过某个阈值之前的相对定位,然后是绝对定位。

inheritbi

规定position属性值从父元素

4继承。浮动清理

5。css3新功能

布局:flex布局

选择器:添加了第一个类型。第n个子选择器

盒模型:盒大小更改盒模型

动画:动画,2d变换,3d变换

颜色:透明,Rgba等

字体:允许嵌入字体和设置字体阴影

和媒体查询

6。css选择器及其优先级

id选择器

class选择器

label选择器

pseudo class选择器

link pseudo class选择器: hover : active 3336 visited 3360 link

structure(bit Set)选择器: first-child : last-child 3360 th-child(n): th-last-child(n )

target pseudo class选择器“target”在:之前只有一个

pseudo元素选择器:3360进口的贡献值是无限的

7。css动画实现以及js动画和css动画

8的区别。BFC是什么

9。z-index定位方法

z-index属性设置元素的堆叠顺序,堆叠顺序较高的元素将位于顺序较低的元素之前。Z-index可以是负数,z-index只能用于定位元素。更改属性以设置定位元素沿Z轴的位置。

属性值为:

auto:默认情况下,堆叠顺序与父元素

以将对象呈现为内联对象,但对象的内容呈现为block对象,然后内联对象排列在同一行中。该元素可以同时具有块的宽度和高度特征以及内联对等体特征。

inherit相同:从父元素

10继承z-index属性值。display attribute

block元素将占据一个单独的行,多个block元素将各自开始一个新行。默认情况下:块元素宽度将自动填充其父元素宽度。您可以设置高度、宽度(换行符)、边距、填充属性

以将对象呈现为内联对象,但对象的内容呈现为block对象,然后内联对象排列在同一行中。该元素可以同时具有块的宽度和高度特征以及内联对等体特征。

内联元素不会占据一行。多个相邻的内联元素将排列在同一行中。在一行无法排列之前,不会更改新行。宽度会因内容而异。设置宽度和高度无效。水平方向上的向左填充、向右填充、向左边距、向右边距产生边距思想,而垂直方向上没有边距效果。

flex

flex(灵活框)布局,灵活布局,将容器显示:flex指定为

Flex-Direction

Flex-Wrap

Flex-Flow

Justify-Content

Align-Items

11。垂直居中

父元素固定宽度和高度,使用定位并将子元素边距值设置为自身的一半。

父元素固定宽度和高度,子元素设置位置:绝对;边距:自动均匀分布边距

利用转换属性。子元素集位置:绝对;左边:50%;转换:转换(-50%,-50%)

将父元素设置为程序显示:表格;子元素设置为单元格显示:table-cell

flex布局显示:flex。设置对齐项目:居中;证明-内容:中心