CSS前端基础知识

一、CSS中隐藏元素的几种方法

1.display:none;

2.visibility:hidden;

3.position设置到屏幕外面

4.opacity:0;透明

二、常见的做成水平居中布局样式的方法

1.行内元素：text-align:center;

2.块级元素：

（1）已知宽度：

① margin-left:auto;    margin-right: auto;

② position:absolute;    left:50%;    margin-left:-(块级元素宽度/2);

（2）未知宽度：

① 利用CSS3的flex布局，将块级元素的父元素的样式设置为 display:flex;    justify-content:center;

②将需要居中的块级元素的样式设置为display: inline-block;    并将其父元素的样式设置为text-align: center;

③利用float+relative实现元素水平居中

首先，将需要居中的块级元素设置为float布局，采用相对定位方式（position:relative)，并相对现在的位置向左移动50%（right:50%;）

然后，将需要居中的块级元素的父元素设置为float布局，采用相对定位方式（position:relative)，并相对现在的位置向右（即其子元素移动的反方向）移动50%（left:50%;）。

④利用float+absolute实现元素居中

首先，将需要居中的块级元素设置为float布局，采用相对定位方式（position:relative)，并相对现在的位置向左移动50%（right:50%;）

然后需要居中的块级元素的父元素应采用绝对定位方式（position:absolute）、向其子元素移动的反方向移动50%，并将文本对齐方式设置为居中（text-align: center）。

三、清除浮动解决的问题，有几种方式清除浮动

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题

有三种方式：①额外标签法：在浮动元素末尾添加一个空的标签<div style="clear:both"></div>

②给父元素添加overflow：hidden;属性，就可以解决浮动带来的影响

③使用 before和after伪元素清除浮动：这种方式也是使用额外标签方式达到效果，只是变相的使用了元素after/before，使得页面结构更简洁，也是常用的清除浮动的方式

四、CSS预处理器LESS和SASS的区别

css预处理器就是用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用 ，sass和less都属于css预处理器。

less和sass的区别：

①less环境比sass简单：sass的安装需要安装ruby环境，less基于javascript，是需要引入less.js来处理代码输出css到浏览器，也可以在开发环节使用less，然后编译成css文件，直接放在项目里。

②less使用比sass简单：less并没有裁剪css原有的特性，而是在现有css语法的基础上，为css加入程序式语言的特性，很容易上手

③sass功能比sass略强大一点：sass有变量和作用域，sass有函数的概念

④less和sass处理机制不同：less是通过客户端处理的，sass是通过服务端处理，相比之下less解析会更慢一点

⑤在定义变量方面，less用@，sass用$

五、css3新特性

动画animation、变换transform、过渡transition、阴影shadow、平移translate、旋转rotate，弹性布局flex，新增了一些css的选择器（伪元素选择器）等等

六、css2D变换、平移、旋转和过渡

① transform（变换）：缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值

② translate（平移）：移动translate(x, y) 可以改变元素的位置，x、y可为负值；x 在水平方向移动，y 在垂直方向移动。

③ rotate（旋转）： rotate(deg)可以堆元素进行旋转，正值为顺时针，负值为逆时针

④ transition（过渡）：transition:param1 param2   param1 要过渡的属性 param2 过渡的时间. transition-property设置过渡属性 transition-duration设置过渡时间  transition-timing-function设置过渡速度 用来控制速度linear(匀速)  ease-in ( 加速)  transition-delay设置过渡延时 超过时间后执行动画.

七、css动画

anmition:

动画设置：

 @keyframes 动画名{
    0%{
     }

    100%{

    }

    或者
    from{}
    to{}
}

动画调用：
    animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向；
        infinite: 无限次
        alternate: 反向执行
        forwards: 保持结束后的状态
        backwards: 保持动起开始前的状态
        steps(5): 让动画分步执行；

八、css的position属性

①static：静态定位，默认值，文档流

②absolute：绝对定位，使用后不占据原来的位置（脱标）。元素使用绝对定位，位置是从浏览器出发。嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

③relative：相对定位，元素使用相对定位，位置从自身出发，还占据原来的位置。子绝父相

④fixed：固定定位，元素使用固定定位后，位置从浏览器出发，不占据原来的位置（脱标）。

九、css选择器权重和常见的css选择器

!important > 内联样式（标签内style形式） > id选择器 > 类选择器、属性选择器、伪类选择器 > 元素、伪元素选择器 > 通配符选择器 > 继承

css常见的选择器有：id选择器、标签选择器、通配符选择器、伪类选择器、后代选择器、子代选择器、相邻选择器、并集选择器、交集选择器

十、css3伪类和伪元素选择器

伪类：①:active---向被激活的元素添加样式

②:focus---向拥有键盘输入焦点的元素添加样式

③:hover---当鼠标悬浮在元素上时，向元素添加样式

④:link---向未被访问的链接添加样式

⑤:visited---向已被访问的链接添加样式

⑥:first-child---向元素的第一个子元素添加样式

⑦:lang---向带有指定lang属性的元素添加样式

伪元素：①::first-letter---向文本的第一个字母添加特殊样式

②::first-line---向文本的首行添加特殊样式

③::before---在元素之前添加内容

④::after---在元素之后添加内容

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 伪元素本质上是创建了一个有内容的虚拟容器；可以同时使用多个伪类，而只能同时使用一个伪元素；

十一、visibility:hidden和display:none区别

①作用不同

visibility:hidden---将元素隐藏，但是在网页中还是占位置

display:none---将元素的显示为无，即在网页中不占位置

②使用后html元素有所不同

visibility:hidden，使用该属性后，html元素仅仅是视觉上看不见，它仍然具有高度、宽度等属性值

display：none，使用该属性后，html元素的宽度、高度等各种属性都丢失了

十二、rgba和opacity透明效果有什么区别

rgba是单纯的颜色透明，opacity设置的是整个元素的透明效果

十三、简单说明css的盒子模型以及它们之间的转换

分为w3c盒模型（content-box）和怪异盒模型（border-box），

标准盒模型中width指的是内容区域content的宽度，height指的是内容区域content的高度，标准盒子模型的盒子大小=content+border+padding+margin。

怪异盒模型中width指的是内容、边框、内边距的总宽度（content+border+padding）,height指的是内容、边框、内边距的总高度，怪异盒子模型的大小=width(content+border+padding)+margin。

盒子模型切换通过css属性中的box-sizing:content-box;或者box-sizing:border-box;来实现

十四、flex布局都有哪些属性

容器的属性有flex-direction（控制主轴方向，默认row 主轴水平，起点在左），flex-wrap（控制子元素是否换行，默认nowrap--不换行），flex-flow（flex-direction和flex-wrap的简写形式，默认row nowrap）,justify-content（控制主轴对齐方式，默认flex-start左对齐），align-items（控制侧轴对齐方式，默认stretch，如果项目没有设置高度或者高度为auto就占满整个容器的高度），align-content（控制多根轴线的对齐方式，项目中只有一根轴的时候没有用，默认stretch）。

项目的属性有：flex-grow（控制项目放大的比例，默认为0），flex-shrink（控制项目缩小的比例，默认为1负值无效），flex-basis（定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认为auto，即项目本身的大小），flex（前三项的简写 默认值为0 1 auto 子项目在主轴的缩放比例 （使用后宽高失效）），order（项目的排列顺序，数值越小排列越靠前 默认为0），align-self（交叉轴/侧轴对齐方式 允许单个项目与其它项目有不一样的对齐方式，可以覆盖align-items属性，默认为auto 表示继承父元素的align-items属性，如果没有父元素那就等于stretch）

十五、什么是BFC，BFC的布局规则，如何创建BFC,BFC的作用

BFC直译为块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

BFC的布局规则：

①内部的Box会在垂直方向，一个接一个地放置。

②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

③每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

如何创建BFC:

①float的值不是none。

②position的值不是static或者relative。

③display的值是inline-block、table-cell、flex、table-caption或者inline-flex

④overflow的值不是visible

BFC的作用：①利用BFC避免margin重叠  ②自适应两栏布局  ③清除浮动