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" onblur="if(this.value=='')this.value='招聘季月薪10000+'" onfocus="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;
        }