web前端学习笔记加油！

2016891552
清除浮动的方法：
方法一、
clear属性——常用clear:both;
clear:left;或者clear:right;
方法二、
同时设置width:100%(或固定宽度)+overflow:hidden;
当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。
自动居中经验：
如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性。
标准文档流：
特点：从上到下，从左到右，输出文档内容。 由块级元素和行级元素组成。
css中的定位机制：
三种：标准文档流（Normal flow）、浮动（Floats）、绝对定位（Absolute positioning）
w3c标准：
由万维网联盟指定的一系列标准,包括
结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）
倡导结构、样式、行为分离。
三列布局：
左侧列用绝对定位position:absolute;left:0; top:0;
右侧列用绝对定位position:absolute;right:0; top:0;
中间列用margin:上下为零,左右是左右两列的宽度。也可加宽左右margin值让三列之间出现空隙
前端工程师：
就是如何通过技术手段灵活的运用CSS中的浮动定位等，来完成UI设计图中的布局要求。
分栏：
分栏又称分列，常见的布局分为：一列布局、二列布局、三列布局、 混合布局。
div居中：
css中加上margin:0 auto;
什么叫布局：
又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
隐性改变display类型：
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
字体缩写：
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：

body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
颜色值缩写：
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}
可以缩写为：

p{color: #000;}
例子2：

p{color: #336699;}
可以缩写为：

p{color: #369;}
盒子模型代码简写：
通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;
可缩写为：

margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;
可缩写为：

margin:10px 20px;
3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;
可缩写为：

margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。

position:fixed(固定定位):
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
例如如下代码：

div1{

width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;

}