CSS

一 .块级元素和行内元素

1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；

     行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
3、例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>（表示计算机源代码或者其他机器可以阅读的文本内容）

常用的内联块状元素有：

<img>、<input>

图片是内联元素，同时是替换元素，替换元素是可以设置宽高的

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。

 div{

     display:inline;

 }

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

二.css的书写规范

属性的书写顺序

.hotel-content {
     /* 定位 */
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     /* 盒模型 */
     width: 50px;
     height: 50px;
     margin: 10px;
     border: 1px solid black;
     / *其他* /
     color: #efefef;
 }

• 定位相关, 常见的有：display position left top float 等
• 盒模型相关, 常见的有：width height margin padding border 等
• 其他属性

 　  按照这样的顺序书写可见提升浏览器渲染dom的性能。简单举个例子，网页中的图片，如果没有设置width和height，在图片

载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲

染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流

内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这

个固定的区域内渲染的，

八. css的权重

CSS权重是由四个数值决定

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

最后把这些值加起来，再就是当前元素的权重了。

 

权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：

1，如果样式上加有!important标记，那么始终采用这个标记的样式；

2，匹配的内容按照CSS权重排序，权重大的优先；

3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先。

三. 清除浮动

一般浮动是什么情况呢？一般是一个盒子里使用了css float浮动属性，导致父级对象盒子不能被撑开，这样css float 浮动就产生

解决方法

1.clear:both   清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束

前加此div引入“class="clear"”样式。这样即可清除浮动。

2.父级定义  overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

解决方法：

写个公共的类，遇到高度塌陷问题 给他加上这个类

.clearfix:after {
  content: ".";         /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
  display: block;       /*使得生成的元素以块级元素显示，占满剩余空间*/
  height: 0;            /*避免生成的内容破坏原有空间的高度*/
  clear: both;          /*闭合浮动*/
  visibility: hidden;   /*使得生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
}
.clearfix {
  zoom : 1;             /*触发IE6/7的haslayout*/
}

四.标准和模型和怪异盒模型

标准盒模型： 标准盒模型盒子的宽度=content+padding（左右）+border（左右）+magin（左右）(指定一个元素的宽度和高度属性时，只是设置内容区域的高度和宽度，完整大小的元素，还必须添加内边距，边框，外边距)

怪异盒模型：怪异盒模型下的width属性不是内容的宽度，而是content+padding（左右）+border（左右）三个部分的宽度
box-sizing:content-box w3c盒子模型
box-sizing:border-box: ie盒子模型

五. 页面1像素边框方案

UI设计的1px是设备的物理像素，css里记录的是设备的逻辑像素，它们之间存在一个比例关系，可以用js中的window.devicesPixelRatio来获取， 在手机上的border无法达到我们要的效果，是因为这个比例造成的，iphone的devicePixelRatio=2,而border-width:1px，描述的是设备的独立像素，所以border被放大到物理像素2px显示，在iPhone上就比较粗。

div:after{
    content:"",
    width:100%;
    border-bottom:1px solid #000;
    transform:scaleY(0.5)
}

六.文本超出用省略号

 /* 显示一行，省略号 */
    width:"";
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
 
/* 显示两行，省略号 */
 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

七.透明度的区别

gba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。

八. 帧动画原理

答：帧：帧数就是一秒钟时间里传输的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次，它的单位通常用FPS(Frame Per Second)表示。
每一帧都是静止的图像，快速连续的显示帧便形成了运动的假象。高的帧率可以得到更流畅，更逼真的动画。每秒钟帧数（FPS)越多，所显示的动作就会越流畅。
关键帧：任何动画要表现运动或变化，至少前后要给出两种不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，FLASH中，表示关键状态的帧就叫做关键帧。
过渡帧：在两个关键帧之间，电脑自动完成过渡画面的帧叫做过渡帧。

九.渐进增强和优雅降级

渐进增强
.not-a-square {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
}
下面就是我们可能不怎么在意的，可能会产生问题的书写顺序：
优雅降级
.not-a-square {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;  
}

十. 居中的方案

行内元素的居中

• 块级元素内的行内元素水平居中： 给块级元素设置text-align:center;
• 单行文本的垂直居中：父级元素的height 值 和line-height 值设置成一样，实现子元素的垂直居中；

块级元素的居中

• 块级元素内的块级元素水平居中： 子元素设置margin: 0 auto;

水平垂直居中

• 定位+marign：父元素相对定位，子元素绝对定位，父元素设置一个高度，子元素设置宽高，子元素设置top:50%, left：50%，然后再设置margin-top:子元素高度的一半，margin-left:子元素宽度的一半；
• 定位+marign：父元素相对定位，子元素绝对定位，父元素设置一个高度，子元素设置宽高，子元素设置top:0;left:0;right::0;bottom:margin:auto;
• 定位+calc：父元素相对定位，子元素绝对定位，父元素设置一个高度，子元素设置宽高，子元素设置left:calc(50%-子元素宽度的一半); top:calc(50%-子元素高度的一半);
• 定位+transform(子元素宽度不确定的情况）:父元素相对定位，子元素绝对定位，父元素设置一个高度，子元素设置top:50%, left：50%，然后再设置transform:(-50%,-50%)
• padding: 父元素不设置宽高，设置一个padding，子元素设置一个宽高撑起父元素
• flex: 父元素设置dispaly:flex;justify-contengt:center;align-items:center;

十一. BFC

block-level box:dispaly属性为block,list-item,table的元素C产生BFC.(- 根body元素默认创建一个BFC)

BFC是一个独立的布局环境，其中的元素布局不受外界环境影响，并且在一个BFC中，块盒盒行盒都会垂直的沿着其父元素的边框排列。

如何创建BFC

• float的值不为none
• position的值不是static或者relative
• dispaly的值是inline-block,table-cell,flex,或者inline-flex
• overflow的值不是visible

BFC的作用：

• 利用BFC避免margin重叠(同一个BFC下外边距会产生重叠，放在不同的BFC可以避免重叠)
• 使BFC内部浮动元素不会到处乱跑,当一个元素的子元素有float和绝对定位，它就会脱离文档流。如何我们还想要外层元素包裹住内层元素时，让外层元素产生一个BFC.(创建BFC看上面)
• 和浮动元素产生边界：一般情况下如果没有BFC的情况下，我们想要让普通元素和浮动元素产生左右边距，需要将margin设置为浮动元素的宽度加上你想要产生边距的宽度,有了BFC,可以让非浮动元素变成FC.
• 阻止元素被浮动元素覆盖：图片设置左浮动，文字没有，文字会围绕图片，给文字加上BFC即可。（两列自适应布局）
• 自适应两栏（三栏布局）