css总结

CSS
CSS3有哪些新特性？

答： 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点） 圆角
（border-radius:8px） 多列布局 （multi-column layout） 阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转
（transform） 增加了旋转,缩放,定位,倾斜,动画，多背景 transform:scale(0.85,0.90)
translate(0px,-30px) skew(-9deg,0deg) Animation:

清除浮动的⼏种⽅式，各⾃的优缺点？

答： ⽗级 div 定义 height 结尾处加空 div 标签 clear:both ⽗级 div 定义伪类 :after 和 zoom
⽗级 div 定义 overflow:hidden ⽗级 div 也浮动，需要定义宽度 结尾处加 br 标签 clear:both
⽐较好的是第3种⽅式，好多⽹站都这么⽤

请解释一下CSS3的Flexbox（弹性盒布局模型）？

答：设为Flex布局以后（ display: flex;），子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main
axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main
end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main
size，占据的交叉轴空间叫做cross size。 容器的属性
以下6个属性设置在容器上（justify-content和align-items、flex-wrap:wrap最常用的）。
justify-content：定义了项目在主轴上的对齐方式。它可能取5个值 center： 居中 flex-start（默认值）：左对齐
flex-end：右对齐 space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：属性定义项目在交叉轴上如何对齐。它可能取5个值。 center：交叉轴的中点对齐。
flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row
nowrap。 flex-direction：属性决定主轴的方向（即项目的排列方向）； row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可能取三个值。 （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。【这个属性经常用】
（3）wrap-reverse：换行，第一行在下方。
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。 项目的属性总结 以下6个属性设置在项目上。（align-self、flex、order）
align-self：
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
auto / flex-start / flex-end / center / baseline / stretch; flex：
属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1
auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0
auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 order：
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 flex-grow：
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink：
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis： flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main
size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

。
解释下浮动和它的工作原理？清除浮动的技巧？

答：浮动元素脱离文档流，不占据空间。 浮动元素碰到包含它的边框或者浮动元素的边框停留 使用空标签清除浮动
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

引入样式表CSS的方式有几种？分别是什么？优先级是什么？

答：在HTML中常用以下四种方式定义CSS： inline（内联式，也称行内样式）、 embedding（嵌入式）、
linking（外部引用式） 导入样式表（@import ）。 详细
一：内联式/行内样式：使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。
二：嵌入式（style）：用户可在HTML文档头部定义多个style元素，实现多个样式表。 三：外部引用式（link）
①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。
②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。 ③可以根据介质有选择的加载样式表。
四：导入样式表：@import url(“css/base.css”); 优先级:就近原则 内联式>内嵌式>外部引用式>导入样式表

什么是响应式设计？响应式设计的基本原理是什么？

答：响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点 面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题 缺点 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
【通过这三个步骤，你一定可以了解响应式设计的基本原理和media query】 第一步. Meta 标签
为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在

里面 IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。 第二步. HTML 结构 这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。 第三步. Media Queries CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。 如果屏幕窗口小于980px，规则就生效。设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { body { background-color:lightblue; } } 用纯CSS创建一个三角形的原理是什么？ 答：均分原理 在矩形的直角，两条边的样式要均分 比如左上角 border-top 和 border-left 的样式要均分 如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角

说说盒子模型？

答：很简单，但是能说好比较难度的，可以扩展，回答越深，越广，加分越多
内容+padding+border+margin这个说一遍，然后话风一转，说如果在移动端，这个盒子模型就不是很适合做开发了，最好用box-sizing:
border-box;属性改变一下盒子模型；
写了这个属性之后宽度会包括border，因为移动端主要是用百分比，不可能通过像素精确控制，如果让两个屏幕50%的div并排，而且这两个div还有border和padding，原来的盒子模型就做不到，必用用这个css属性改变一下才可以的，但是还有一个问题；
用inline-block让两个div并排后，中间会一个空白字符，还要把换行代码写在一行，或者用font-size:0;来解决 两种盒子模型
css3中定义了box-sizing属性；在移动端的应用； padding和margin的简写写法
margin的两种居中DIV方法；（margin:0 auto；和负margin的写法） margin的兼容性问题，IE6img下面有空白；
border的CSS3新增属性； border写三角形的用法；

对BFC的规范的理解？

答：（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素 。在同一个 BFC
中的两个毗邻的块 级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。 一个页面是由很多个 Box 组成的,元素的类型和
display 属性,决定了这个 Box 的类型。 不同类型的 Box,会参与不同的 Formatting
Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

为什么说position absolute 跟float 影响性能？

答：position: absolute会完全脱离文档流 不再在z-index:0层保留占位符，其left、top、right、bottom
值是相对于自己最近的一个位置设置了position: relative 或 position: absolute的祖先元素的；
如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。
float也能改变文档流
不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0层排列，float不像position:
relative 和 position:
absolute那样，它不能通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float:left 和
float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列，影响到周围元素。
另一个有趣的现象是position: absolute 和
float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position:
absolute 或
float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。
就算我们显示地设置display:inline或者display:block，也仍然无效（float在IE6
下的双倍边距bug就是利用添加display:inline来解决的）。 值得注意的是，position:
relative却不改变display的类型。
position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响
这一条规则可以解释：为什么在移动开发时尽量使用Position：absolute；而不是float来浮动元素
JS为什么会放在下面，CSS为什么放在上面？ 答：浏览器从上到下依次解析html文档。 将 css 文件放到头部， css
文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。 将 javascript 文件放到底部是因为：若 将
javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成
之后才开始呈现页面内容。 这样就会造成呈现页面时出现明显的延迟，窗口一片空白。 为避免这样的问题一般将全部 javascript 文件放到
body 元素中页面内容的后面。

浮动元素引起的问题和解决办法？

答： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 额外标签法

缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。 使用after伪元素
#parent:after{
content : “.”;
height : 0;
visibility : hidden;
display : block;
clear : both; } 父元素也设置浮动 缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 设置 overflow 为 hidden 或者 auto

CSS的浏览器兼容性问题总结：

答：所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。
除了IE6和7的自身bug，其他浏览器BUG很少的。如果你理解了每一句CSS的意思，规范编写代码，一般很少会出bug。
举个很简单的例子，很多人float:left后，担心IE6的双margin
bug，不管三七二十一，加display:inline。其实这是错的。你要搞清楚IE6的双margin bug是如何产生的：
浮动方向有同方向的margin值，才会出现这个bug。所以如果只是单纯浮动，是不会产生这个bug的。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin
和padding差异较大。 解决方案：CSS里 {margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div
float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度 碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。
即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距 碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。
在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。
不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20% 解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。
去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容 碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto
!important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。
容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容CSS设置
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。
建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。 /* CSS hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。
不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff
safari opera等） IE6认识的hacker 是下划线_ 和星号 * IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置： height:300px;height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px； 继续往下读，他也认识heihgt，
所以当IE6读到height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。
继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。
当它们读到height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

怎么让Chrome支持小于12px 的文字？

答： html, body {-webkit-text-size-adjust: none;} 新版的chrome已经取消了；
CSS3有个新的属性transform，而我们用到的就是transform:scale()
p{font-size:10px;-webkit-transform:scale(0.8);}
但是，如果，这个属性会把整个p的属性都缩放。如果我有背景呢？我有边框呢？都会被缩小！ 所以我们修改结构为

我是一个小于12PX的字体

代码如下 body,p{ margin:0; padding:0} p{font-size:10px;} span{-webkit-transform:scale(0.8); display:inline-block} 定义 display:inline-block而不是 display:block；会发现。 会存在一定的边距。貌似margin或者padding的间距。 这就是缩放存在问题。原来的位置还占有12px字体的大小。 所以，要对应修改margin了。定义为负的。 还有一个网上别人分享的方法； html {font-size: 625%;} body {font-size: 0.16rem;}