目录
display：none；和visibility：hidden；的区别是什么？
超链接访问过后hover样式就不出现的问题是什么？如何解决？
CSS是层叠样式表（ Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。
内联 内嵌 外联 导入
link 属于 HTML，通过 标签中的 href 属性来引入外部文件
@import 属于 CSS，所以导入语句 应写在 CSS中，要注意的是导入语句应写 在样式表的开头，否 则无法正确导入外部文件；
@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。
相比之下link兼容性较好，且dom元素的样式可以被js动态修改，又因为link的权重高于@import，所以 @import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
使用LINK标签将样式表放在文档HEAD中。
在CSS的长度单位分为两种：绝对长度 和 相对长度。
绝对长度：px、in、cm、mm、pt、pc
相对长度：em、rem、ex、vh、vw、vmin、vmax、%、fr
1.px是固定的，指定多少就是多少,是绝对长度单位， 相对于显示器屏幕分辨率而言的,无法用浏览器字体放大功能
2.em是根据父级元素的大小变化的。是相对长度单位， 相对于当前对象内文本的字体尺寸；em的值并不是固定，会继承父级元素的字体大小
不使用@import 避免使用复杂的选择器，层级越少越好
利用CSS继承减少代码量 提取重复样式
内联首屏关键CSS 异步加载CSS
文件压缩 去除无用CSS
！important 优先级10000
内联选择器 优先级1000
ID选择器 优先级100
类别选择器 优先级10
属性选择器 优先级10
伪类 优先级10
元素选择器 优先级1
通配符选择器 优先级0
继承选择器 没有优先级
!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。
在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。
最简单的初始化方法就是*{padding: 0; margin: 0;}
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的， 如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
使当前元素脱离普通流， 相当于浮动起来一样，浮动的框可以左右移动， 直至它 的外边缘遇到包含框或者另一个浮动框的边缘
清除浮动
弹性盒模型 display: flex
border-radius：实现圆角 border-color边框颜色
box-shadow阴影 animation动画 transform变换 transition过渡
text-shadow对文字加特效 渐变 background:linear-gradient
多背景rgba border-image 图片边框
1.静态布局：设计简单，但对于不同尺寸屏幕的兼容性不好，特别是移动端
2.流式布局：页面元素宽高可以自适应调整，但屏幕尺度跨度过大的情况下，页面 不能正常显示。 比如我们以百分比设置了按钮的宽度，但按钮上文字的大小是用px 来设置的，当屏幕尺寸 变大时，按钮被拉宽而字体大小没变，这样就会显得很不协调。
3.自适应布局：屏幕尺寸或分辨率变化时，页面元素会跟着变化；但页面元素不会随着窗口大 小的调整而发生变化。
4.弹性布局：弹性布局又称为盒子布局或flex布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。
5.响应式布局：是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
通过 媒体查询检测 不同的 设备 屏幕 尺寸 做处理。
页面头部必须有meta声明的viewport
传统布局，基于盒模型，依赖display属性，position属性，float属性。对于哪些特殊布局非常不方便，比如垂直居中，如果屏幕尺寸发生变化，传统布局的页面样式就会发生变化
弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各布局区域的显示方式，即实现非常灵活的布局处理
弹性盒子默认有两条轴：默认水平显示的主轴和始终要垂直于主轴的侧轴（也叫交叉轴），在弹性盒子中所有的子元素都是沿着主轴方向显示。
需要有规则的排列对齐时，使用弹性布局
标准盒子模型，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型，width 和 height 指的是内容区域+border+padding的宽度和高度
CSS3中的box- sizing属性允许以特定的方式来指定盒模型,有两种方式:
content-box :标准盒模型,又叫做W3C盒模型,一般在现代浏览器中使用的都是这个盒模型
border-box :怪异盒模型,低版本IE浏览器中的盒模型
有时候在content-box元素的基础上添加内边距padding或border会将布局撑破，但是使用border-box就可以轻松完成。
width:auto 包含margin-left/margin-right的属性值。使用的多，因为这样灵活
width:100% 不包含margin-left margin-right的属性值，容易使其突破父级框，破环布局。
static 静态定位，特点，可以用于取消元素之前的定位位置
absolute 绝对定位，特点：使元素脱离文档流。相对自己最近的父元素进行定位。
relative 相对定位，特点：相对于自己本身的位置进行移动。
fixed 固定定位，特点：相对于浏览器窗口进行移动。
sticky 粘性定位，相对定位和固定定位的结合体区别就是定位位置不同
margin: 外边距，控制块级元素之间的距离，它们是透明不可见的
padding: 内边距，控制块级元素内部，content与border之间的距离
display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素
1.display:none;不占空间
2.visiblilty:hidden;仍占空间
3.opacity: 0；设置0可以使一个元素完全透明，制作出和visibility一样的效果。
4 .position: absolute使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
5.transform: scale(0)将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
6.height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。
7.filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
1.定位的元素.在没定位的元素上面
2.同样定位,后面的元素在前面的元素上面
3.同级的父级都定位了【就不看子级了】，谁的z-index高谁在上面
display：none；和visibility：hidden；的区别是什么？
display: none 不占空间 visibility占空间
1.opacity 作用于元素，以及元素内的所有内容的透明度
2.rgba() 只作用于元素的颜⾊或其背景⾊。
伪类作用对象是整个元素，伪元素作用于元素的一部分
伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；
而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
Css3新增伪类：
:checked，单选框或复选框被选中。
::after 在元素之后添加内容,也可以用来做清除浮动。
::before 在元素之前添加内容
:enabled 已启⽤的表单元素。
:disabled 控制表单控件的禁用状态。
超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了
解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）
font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细
font-size：设置字体的尺寸 font-style：定义字体的风格
text-indent：文本缩进 text-align：文本水平对齐 line-height：行高
color：文本颜色 visibility：元素可见性 光标属性：cursor
渐进增强是向前【高版本浏览器】兼容 渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
优雅降级是向后【低版本浏览器】兼容。优雅降级是从复杂的现状开始，并试图减少用户体验的供给
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
text-overflow: ellipsis; /*将文本溢出显示为（…）*/
white-space: nowrap; /*强制显示为一行*/
overflow: hidden
text-transform：none| cap it a lize(将每个单词的第一个字母转换成大写)
uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )
过渡和动画都可以实现元素属性随时间的变化而变化，但是两者区别主要有以下两点：
1、transition过渡需要配合伪类来使用，需要触发，但是动画（animation）在页面加载后就可以实现
2、过渡只有开始和结束两种状态，而动画可以设置中间状态，通过百分比来划分帧，实现复杂的动画。
1、Less环境较Sass简单
Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。
2、Less使用较Sass简单
LESS并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。只要你了解CSS基础就可以很容易上手。
3、从功能出发，Sass较Less略强大一些
①sass有变量和作用域。
-$variable，likephp；
-#｛$variable｝likeruby；
-变量有全局和局部之分，并且有优先级。
②sass有函数的概念；
-@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③进程控制：
-条件：@if@else；
-循环遍历：@for@each@while
-继承：@extend
-引用：@import
④数据结构：
-$list类型=数组；
-$map类型=object；
其余的也有string、number、function等类型
4、Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
5、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
