css---基础技巧总结

一、书写css样式：

1.优先写位置---使元素脱离文档流的功能

2.再写宽高内外边距等---合模型的内容

3.背景颜色，样式

4.css3的动画转换等效果

目的：浏览器在解析时先重拍再重绘，先写位置可以先确定位置再排版，最后添加附属样式可以修饰。

二、常见标签的一些用法

a标签的作用：

1.超链接

2.锚点  常见用法：侧边导航栏固定，通过锚点跳转到指定id的模块<a href="#id"></a>

3.打电话  <a href="tel:12345678901"></a> 移动端用这个可以自动调用手机进行电话拨打

4.协议限定符 <a href="javascript:void(0)"></a> 消除跳转功能，void(0)可换成需要执行的js代码

input的placeholder的原生实现

<input type="text" οnblur="if(this.value=='')this.value='招聘季月薪10000+'" οnfοcus="if(this.value=='招聘季月薪10000+')this.value=''">
//可以通过失去焦点，得到焦点修改classname来修改文字的颜色

三、选择器权重问题

！important > 行间样式 > id > class | 属性选择器 | 伪类 > 标签选择器 | 伪元素选择器 > 通配符

   Infinite           1000       100                    10                                       1                             0 

权重进制是256进制，也就是这个10是256个1；

浏览器在遍历选择器时时从最后的叶子开始向树根遍历，效率高（div p span i）---从i到span到p到div去找符合的路径；

四、碎的知识点

1.font-size设置的是高！！不然同一行的字有高有低多丑。font-style可以去掉斜体。

2.px是相对单位，em是相对单位（根据不同设置的属性，相对对应的属性）

div{
  text-indent:2em;//2个文本的高度（font-size的两倍）
   line-height:1.2em;//(height的1.2倍)
}

span{
     text-decoration：line-through;//字的中划线

   text-decoration：overline;//字的上划线
   text-decoration：underline;//字的下划线
}

3.行级元素和块元素

行元素：内容决定元素所占位置，不可通过改变宽高，只能包含行元素（a不能包含a）

span strong em a del  

块元素：独占一行，可以通过css改变宽高，块元素可以包含任何元素（p元素不能包含块元素）

div p ul li form address

行级块元素：内容决定大小，可以通过css改宽高，行级块元素里面有文字时，后面的文字会和里面的文字底部对齐，否则会和行级块元素底部对齐。vertical-align可以通过设置像素值微调到需要的对齐地方。

img

凡是带inline的元素（inline inline-block）都有文字特性，标签空格或者换行会和文字一样会有间隔（4px）

例如：许多img在一起会有空白间隔就是因为Img是inline-block。解决方法：不要换行，项目上线肯定会压缩，其他处理方式多半会有问题，迟早压缩，直接就别换行。

4.层模型：

position:absolute---相对于最近的有定位的父级，没有的话，相对文档定位。脱离原来位置进行定位（到新的一层）

position:relative---相对于自己定位，保留原来位置（其他元素到不了该位置，始终占据原先位置）到新层

z-index只在position的时候有效，另外到新的层是每个元素都会有新的层，float是所有元素到同一层。

5.元素居中方式：

div{
   position:absolute;
   top:50%;
   left:50%;
   height:100px;
   width:100px;
   margin-left:-50px;
   margin-right:-50px;
}

6.两栏布局---只知道一栏的width

注意:html中要先写right，因为left一旦出现，会占据整行，再调整定位，不设置top的情况下只会在当前出生行右侧定位。

*{

margin: 0;

padding: 0;

}

div.left {

height: 50px;

margin-right: 100px;

background: red;

}

div.right {

position: absolute;

right: 0;

width: 100px;

height: 50px;

background: green;

}

7.margin塌陷

父子元素同时设置同方向上的margin只会采用大的并且只在父级上有效。

解决方法：父级触发bfc---会改变盒子解析的一些规则，子元素会停止塌陷

bfc的触发方式任选其一，根据业务逻辑需要：

position：absolute; 

display:inline-block;

float:left/right; 

overflow:hidden;

8.浮动元素产生浮动流，所有产生浮动流的元素，块元素看不到，产生bfc的元素和文本类元素以及文本都能看到浮动元素

解决浮动流问题（父级块元素包含子浮动元素，没高度）---因为块元素看不到浮动元素

解决方式：

方法1：在父级元素内的最后一个浮动子元素后加p----p设置为clear:both;不建议使用这种方式

方法2：用伪元素（父级::after{content:'';clear:both;display:block}）---伪元素是天生的行元素，clear:both只对块元素生效。

9.报纸样式----img{float:left;} 给图片加浮动，后面的文字会围绕它

10.文字溢出打点

  1.单行文本：{white-space:nowrap; overflow:hidden;text-overflow:ellipsis}

  2.多行文本：不做打点，做截断 ---单行文字（line-height）*行数=height（容器高）加overlow:hidden;

11.背景处理

当网站采取默认加载模式（就是网速不好，只加载html的时候）要保证用户也可以操作；

<a href="http://www.taobao.com">淘宝网</a>

给这个a设置背景图，当背景图失效的时候（就是css加载不出来的时候），要可以看到字并且可以点击，当背景图存在的时候，字应该看不到。

解决方式：

 1.缩进容器的宽，让文字溢出，不允许换行，再溢出隐藏----text-indent:200px;white-space:nowrap;overflow:hidden;

 2.高设为0，padding-top:图的高，文字会溢出在下方，溢出隐藏。