CSS篇
浏览器盒模型?
盒模型分为两种: IE盒模型和W3C盒模型
W3C标准盒模型: 宽度/padding/border/margin都是单独分开的
IE盒模型: 宽度 = 内容宽度+padding+border 是一起的
1.在子元素并级后面添加一个新元素，添加clear：both属性
优点：通俗易懂，容易掌握
缺点：添加无意义空标签，不方便后期维护
2. 给父元素添加overflow:hidden
优点：代码较少，简单方便
缺点：不能配合定位使用
3. :after方法（作用于浮动元素的父元素）
清除浮动的方式
.clearfix:after{
content:"";
display: block;
height:0;
clear:both;
visibility:hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
优点：结构和语义化完全正确
缺点：复用方式不当，会造成代码量增加
CSS选择器有哪些?哪些属性可以继承?
选择器 ：ID 选择器(#ID);
Class选择器 (.class名)；
标签选择器(标签)
通配符(*);
相邻选择器(div+p);
子选择器(div>p);
后代选择器(div p);
多个选择器(div ,p , a, ul );
伪类选择器(a:hover);
补充内容
伪类选择器和伪元素的区别：
伪类用于向某些选择器添加特殊效果(单冒号)
伪元素用于将某个特殊的东西添加到某些元素的前后(双冒号)
::after/:after与::before/:before的区别?
:before在元素之前添加效果/:after是在元素之后添加效果
:after/:before是CSS2提出的,兼容IE8
::after/::before是CSS3为了区分伪类和伪元素的做出的差别,为了避免兼容性问题,习惯性的还是写:after/:before;
可继承样式: font-size/fon-family/color [ul/li/ol/dl/dd/dt]
不可继承样式:width/height/margin/padding/border
CSS样式优先级计算法:
三条标准:
1.就近原则，后加样式优于前面的样式；
2.内嵌样式>内联样式>外联样式
3.!mportant 大于一切样式
权重计算原理：
内联样式：style= " " —权重1000
id选择器 ：#id ---- 权重100
类/伪类/属性选择器 —权重10
类型选择器和伪元素—div/p —权重1
继承的样式没有权重
CSS3新特性和伪类有哪些?
新特性:
border-radius(圆角)/box-shadow(阴影)
text-shadow(文字阴影)/线性渐变(line-gradient)/transform各种样式(旋转/缩放/定位[xyz]/倾斜)
增加了更多的CSS旋转武器,背景颜色加入了rgba
Border-images/媒体查询/多栏布局
新增伪类:
P: first-of-type 选择属于其父元素中的同类型的第一个P元素
P:last-of-type 选择其父元素中的同类型的最后一个P元素
::after/::before在元素之前或之后添加内容
::disabled 控制表单控件的禁用状态
::checked 单选框或复选框被选中
less的一些优势
- 结构清晰，便于扩展
- 可以方便的屏蔽浏览器私有语法差异
- 可以轻松实现多重继承
- 完全兼容css代码，可以方便的应用到项目中，Less知识在css语法是做扩展，所以老的CSS代码也可以与Less代码一同编译
缺点：必须要编译，无论在客户端还是服务器端，都是一种额外的花销
如何居中div
第一种 使用 transform:translate平移居中
//垂直居中
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,50%);
//水平居中使用
margin:{ 0 auto};
第二种 使用固定定位和绝对定位
//父盒子
position:relative;
width:100px;
height:100px;
//需要居中的盒子
position:absolute;
top :0;
right:0;
buttom:0;
left:0;
margin: auto;
第三种 使用伸缩布局 flex
//父盒子
position:realtive;
width:100px;
height:100px;
display：flex;
justify-content:center;
align-items:center;
最后一种是最常用的 父盒子的高度减去子盒子的高度然后除2 就可以使用margin
//父盒子
.box {
width: 288px;
height: 196px;
margin: 50px auto;
border: 1px solid pink;
}
//子盒子
.box1 {
width: 88px;
height: 66px;
margin: 65px auto 0;
background-color: skyblue;
}
Display有哪些哪些值?说明他们的作用
block元素转换为块级元素
inline元素转换为行内元素
inline-block 转换为行内块元素
display:none元素不会显示，脱离文档
dispaly:list-item元素转换为行内样式，并添加列表样式(如ul下的li)
dispaly:table元素会以块级表格来显示
liherit继承父元素display属性
flex布局以及常用的属性
flex布局可以完美实现响应式布局
常用的属性有flex-direction(方向）/flex-wrap(子元素换行) /flex-flow / justify-content(对齐方式) / align-items(定义项目在交叉轴上如何对齐) / align-content (定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
flex详见地址：https://www.runoob.com/w3cnote/flex-grammar.html
请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
flexbox是一个用于页面布局的新css功能，规定框内到达子元素是否可以伸缩尺寸，任何一个容器都可以指定flex布局。
如何用CSS打造三角形?
宽度0,高度0,边框加宽,给一边加颜色,其余三边使用transparent
//利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
box-sizing: border-box;
border-width: 0 10px 10px;
border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>
满屏品字布局?
需要用到技术
- 元素水平居中对齐
a. 使用margin对齐(推荐)
b.使用left：50%
c.使用text-align：行内元素居中对齐，给父元素设置text-align： center - 元素对相对窗口定位
a.使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位
b.使用absolute定位
c.使用html和body的width和height填?这个窗口 - 元素左右定位
a.使用float左右浮动
b.使用绝对定位进行左右定位（推荐）
第一种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>满屏品字布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/
}
.header{
height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/
width: 50%;
background: #ccc;
margin:0 auto;
}
.main{
width: 100%;
height: 50%;
background: #ddd;
}
.main .left,.main .right{
float: left;/*采用float方式，对元素进行左右定位*/
width:50%;/*此步解决元素相对窗口的定位问题*/
height:100%;/*此步解决元素相对窗口的定位问题*/
background: yellow;
}
.main .right{
background: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
li与li之间有看不见的空白间隙是什么原因引起来的?
行内块排列会受到(空格/回车)等的影响,因为空格也属于字符,把字符大小 设置为0；
为什么要初始化css样式?
浏览器的兼容性问题,有些浏览器对标签的默认值是不一样的,如果没有 设置CSS初始化,浏览器之间的页面会有差异,最简单的方式:
*{ padding ; 0 ; margin : 0 ; }
初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
CSS中的visibility属性的collapse属性是干嘛的?
1、一般情况和visibility：hidden一样，不脱离文档流
2、在table的tr元素中，脱离文档流
3、在table的td元素中，不脱离文档流
外边距合并是指的什么意思?
是指两个垂直的margin相遇,会合并在一起,margin高度是以最大的margin值为准;
⭐移动端的布局用过媒体查询吗?
媒体查询主要用于响应式页面,媒体查询通过页面浏览设备的窗口宽度,完成相应的样式
⭐⭐移动端布局-媒体查询 + rem单位布局
这个布局，那么我们首先得了解什么是媒体查询，rem是什么？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，
**媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
**
@media all and （条件）{
css的语法
}
这句代码会自动的获取到设备的视口宽度，来匹配条件
@media all and （min-width：500px）{
body{
//（1）如果视口的最小宽度是500px的时候,则body的背景颜色为red，
background:red;
}
}
@media all and （min-width：700px）{
body{
//（2）如果视口的最小宽度为700px的时候，则body的背景颜色为green，
background:green;
}
}
@media all and （min-width：900px）{
body{
//（3）如果视口的最小宽度为900px的时候，则body的背景颜色为black，
background:black;
}
}
那么rem是什么呢？
rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。
如果一个页面中html{font-size:16px;},那么1rem = 16px，2rem = 32px;
了解到这两个概念之后，那么他们是怎么配合布局移动端呢？接下来看下面的代码。
@media all and （min-width：320px）{
html{
//（1）当页面处于视口为320px的设备下，html根节点的字体大小为12px，那么div 的宽高为120px*120px;
font-size:12px;
}
}
@media all and （min-width：375px）{
body{
//（2）当页面处于视口为375px的设备下，html根节点的字体大小为14px，那么div的宽高为140px*140px;
font-size:14px;
}
}
@media all and （min-width：414px）{
body{
//（3）当页面处于视口为414px的设备下，html根节点的字体大小为16px，那么div的宽高为160px*160px;
font-size:16px;
}
}
div{
width:10rem;
height:10rem;
}
就以我们最常见的几个手机型号为例，上述代码的表达的是，
他们的优点是：根据不同的设备去相应的改变元素的大小
但是代码冗余 还好有less,插件结构清晰，可以与html结构保持一致，省去了css多层选择器的用法
使用CSS预处理的优缺点分别是什么？
优点：
提高CSS可维护性
易于编写嵌套选择器
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
缺点：
需要预处理工具
重新编译的时间可能会很慢
CSS优化/提高性能的方法有哪些?
使用css预处理器(less/sass),增加代码可复用性,方便项目的协作开发,可维护性.
浏览器是怎么解析CSS选择器的?
样式系统优先从关键选择器开吃匹配,通过权重,先找祖先元素,再一级一级查下去,如果匹配则使用样式,如果不匹配则放弃
margin与padding区别?
margin是控制元素与元素之间的距离，padding是分开元素与内容之间的距离
css如何实现横向滚动与竖向滚动?
横向滚动:父元素:overflow-x:auto; overflow-y:hidden;
竖向滚动:父元素 overflow-x:hidden;overflow-x:auto;
如何设置滚动条样式?
scrollbar：样式属性，有很多种，很少用
SCROLLBAR-FACE-COLOR : rgb(10,236,209) ; //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR : rgb(23,255,155) ; //滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR : rgb(255,116,23) ; //立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR : rgb(66,93,127) ; //滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR : rgb(93,232,255) ; //上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR : rgb(255,70,130) ; //滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR : rgb(10,0,209) ; //滚动条强阴影的颜
SCROLLBAR-BASE-COLOR : rgb(66,93,128)/滚动条的基本颜色
视觉差效果是如何实现的?
给背景图片添加background-attachment:fixed属性,将背景固定在窗口,在使用background-position:top center或0% 0%;后续可以通过js修改background-position的top值,实现背景图片跟随页面上下移动的效果
你对line-height如何理解?
line-height是设置行高的style样式,可以增加设置文本行与行之间的上下间距,也可以实现文本在div中的垂直居中
设置元素浮动后,元素的display值是什么吗?
浮动后，元素的dipsly值自动变为displsy:block;
怎么让chrome支持小于12px的文字?
<style>
p {
font-size:10px;
-webkit-transform:scale(0.8);
display:block;
}；
</style>
<p>
haorooms博客测试10px
</p>
如何设置字体斜体?
i标签/em标签/font-style: oblique
如果需要手写动画,最小时间间隔是多少?
显示器默认60Hz,一秒刷新60次,1000/60,约为16.7ms
有一个高度自适应的div,里面有两个div,一个高度100px,一个如何自适应高度?
//大盒子
.box1{
box-sizing:border-box;
padding-top:100px;
position:relative;
//子盒子1
.box2{
position:absolute;
}
//子盒子2
.box3 {
height:100%;
}
png/jpg/gif这些图片格式解释一下?
jpg是正常的图片格式/png主要设置无背景图片/gif是动态图片
Style标签写在body前还是body后?
正常是写在body前的,而且style也可以body中,但是这回导致CSS重新渲染一次页面,占用一定的时间
有什么不同的方式可以隐藏内容?
visibilty：hidden：元素仍然在文档流中，并占用空间；
display：none：元素脱离文档流，不占用空间；
position：left：-999999px：将内容至于屏幕之外
text-index：-9999：只适用于block元素中的文本
如何消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象，以上的解决方案只是改变视角来启动硬件加速的一种方式；
启动硬件加速的另外一种方式：
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
启动硬件加速最常用的方式：translate3D，translateZ，transform
opacity属性/过渡动画(需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态)
will-chang属性（这个比较偏僻），一般配合opacity使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层）
弊端：硬件加速会导致CPU性能占用量过大，电池电量消耗加大；因此，尽量避免泛滥使用硬件加速。
CSS实现单行文本移除显示…
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
还需要加宽度width属性来兼容部分浏览器
实现多行文本溢出显示…
display : -wedkit-box ;
-webkit-box-orient : vertical ;
-webkit-line-clamp : 3 ;
overflow : hidden ;
适用范围 : 因使用了Webkit的CSS扩展属性,该方法适用于Webkit浏览器以及移动端
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其它的webkit属性。
常见结合属性：
display：-webkit-box； 必须结合的属性，将对象作为弹性伸缩盒子模式显示。
-webkit-box-orient 必须结合的属性，设置或减缩伸缩盒对象的子元素排列方式。
溢出显示。。。的另外一种显示方式
实现方式：
div{
position：relative；
line-height：20px；
max-height：40px；
overflow：hidden；
}
div：after{
content : “...”;
position : absolute ;
bottom : 0 ;
right : 0 ;
padding-left : 40px ;
background : -webkit-linear-gradient(left , transparent , #fff 55%);
background : -o-linear-gradient(left , transparent , #fff 55%);
background : -moz-linear-gradient(left , transparent , #fff 55%);
background : linear-gradient(left , transparent , #fff 55%);
}
此方法也有弊端：就是未超出行的情况下也会出现省略号
注意点：
1.将height设置为line-height的整数倍,防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。
3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7，兼容ie8需要将 ::after替换成 :after
让图文不可复制
-webkit-user-select：none；
-ms-user-select：none；
-moz-user-select：none；
-khtml-user-select：none；
user-select：none；
有些网页为了尊重原创，复制的文本都会被加上一段来源说明，这个是如何做到的呢？
//答案区域监听copy事件，并阻止这个事件的默认行为。
//获取选中内容（window.getSelection( )）加上版权信息，然后设置到剪切板（clipboardata.setData( )）
visibility：hidden与display：none的区别？
两个css样式都有隐藏元素的效果，但是它们的区别在于：display：none隐藏元素，可以脱离文档流，而visibility隐藏的元素不会脱离文档流，会占有原来的位置。
em，rem，px的区别？
- px像素单位-----相对长度单位，相对于显示屏分辨率。
- em-------相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
- rem为元素设定字体大小时，仍然是相对大小，根据修改根元素就成比例的调整字体大小。可避免字体大小逐层复合的连锁反应
css动画与js动画的差异
a : js动画代码相对复杂一些
b : 动画运行时，对动画的控制程度上，js能够让动画暂停、取消、终止，css动画不能添加事件
c : 动画性能看，js动画多了一个js解析的过程，性能不如css动画好
Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//设置成元素原本的颜色
background-image: none;
color: rgb(0, 0, 0);
}
//方法2：由(licongwen )补充
input:-webkit-autofill {
-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
写一个左中右布局，占满全屏，其中左右两块的固定宽度是200，中间自适应宽度，请写出结构及样式：
<style>
div{
height: 300px;
}
#left,#right{
width: 200px;
background: #000;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
margin-left:200px;
margin-right:200px;
}
</style>
<style>
div{
height: 300px;
}
#left,#right{
width: 200px;
background: #000;
}
#left{
float:left;
}
#right{
float:right;
}
#center{
margin-left:200px;
margin-right:200px;
}
</style>
CSS sprite是什么？有什么优缺点？
精灵图，将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案
优点：
减少http请求数，极大的提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
不方便维护
什么是FOUC？如何避免
lash of Unstyle Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁
解决方法：把样式表放到文档的head中
CSS在性能优化方面的方法？
css压缩与合并、Gzip压缩
css文件放在head中，不要使用@import
尽量用缩写、避免用滤镜、合理使用选择器
stylus、sass、less区别
均具有变量、混合、嵌套、继承、颜色混合五大基本特性
Sass和Less语法较为严谨，Less要求一定要使用大括号{ }，Sass和Stylus可以通过缩进表示层次与嵌套关系
Sass无全局变量的概念，Less和Stylus有类似于其他语言的作用于概念
Sass是基于Ruby语言的，而Less和Stylus可以基于NodeJS NPM下载相应库就进行编译
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
