CSS笔记2（简化版）

1.去掉无序列表li前面的小圆点：

list-style: none;

2.圆角边框：

(后可跟4个值：左上 右上 右下 左下）（两个值的话则是对角线关系）

border-radius: 10px;(可以设置为50%)
border-top-left-radius(左上角)

3.盒子阴影：

box-shadow：h-shadow v-shadow blur(虚实) spread(大小) color inset；(前两个必需)

4.文字阴影：

text-shadow：h-shadow v-shadow blur(虚实) color ；(前两个必需)

5.网页布局的三种方式：

本质：用CSS摆放盒子
方式（pc端）：普通流(标准流)→(最基本)  浮动  定位

6.浮动：

选择器{
	       float：属性值；(none  left right)
	}

7.浮动的特性之脱标：(元素脱离标准流)

1.脱离标准偶同流的控制 移动到指定位置
2.浮动的盒子不再保留原先的位置

7.2如果给多个盒子添加了浮动，则盒子都会在一行顶端对齐
7.3浮动的元素具有行内块的特性，
可以设置宽高，不需要转换为行内块
如不设置宽度，则宽度根据内容决定
浮动的盒子不会影响前面的标准流，只会影响后面的标准流

8.清除浮动：

选择器{
	       clear：both;
	       }
          方法：

1.额外标签法（隔墙法）（在末尾添加一个(块级元素)空标签）
2.给父级元素添加overflow 属性值为hidden auto scroll
3.给父级元素添加:after伪元素(额外标签法的升级)

.clearfix:after {  
   		content: ""; 
   		display: block; 
  	 	height: 0; 
   		clear: both; 
   		visibility: hidden;  
		 } 
 	.clearfix {  /* IE6、7 专有 */ 
  		 *zoom: 1;
 		}   

4.给父元素添加双伪元素

.clearfix:before,.clearfix:after {
   		content:"";
   		display:table; 
		 }
 		.clearfix:after {
   		clear:both;
 		}
 		.clearfix {
  		 *zoom:1;
 		}   

9.定位组成：

定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位模式

 position：static   relative   absolute  fixed

边偏移：决定了该元素的最终位置(与父元素距离)
    top :80px  顶端偏移量
    bottom:80px 底部偏移量
    left:80px 左侧偏移量
    right:80px 右侧偏移量

9.1静态定位：static
无定位的意思，没有边偏移，很少用
选择器{position：static；}
9.2相对定位：relative
相对于他原来的位置来说的
选择器{position：relative；}
特征：移动位置参照与自己原来的位置
原来的标准流位置依旧保留（不脱标）不会被后面的盒子占用
9.3绝对定位：absolute
移动位置时，相对于他的祖先元素来说的
选择器{position：absolute；}
特征：1.当没有祖先元素的时候，按照浏览器为准进行定位
2.当其父元素没有定位的时候，按照浏览器为准进行定位
3.若祖先元素有定位(不包括静态定位)，则按照最近一级有定位的祖先元素为参考点
4.绝对定位不占用(不保留)原先的位置，被后面元素占用。（脱标）
子元素用绝对定位，则父元素必须要用相对定位(子绝父相)
（因为绝对定位不占用原来的位置，父元素不使用相对的定位的话，其他盒子会占用位置）
9.4固定定位：fixed
固定于浏览器可视区的位置，页面滚动时位置不会变化
选择器{position：fixed；}
特征：**1.**以浏览器的可视窗体为参照来移动
和父元素没有任何关系
不以浏览器的滚动而滚动
2.不占用原来的位置（脱离标准流）
9.4.1固定到内容板块的右侧位置：
1.让固定定位的盒子left：50%，走到浏览器可视区左右的中心
2.让固定盒子的margin-left：内容板块宽度的一半距离。
9.5粘性定位 sticky（兼容性比较差）
选择器{position：fixed；}
特点：1.以浏览器的可是窗口为参照点移动元素
2.占用原先的位置
3.必须添加边偏移的其中一个

10.定位叠放次序 z-index（只有定位的盒子才有该属性，数字后面不能加单位）

选择器{z-index：1；}值越大，越靠上

11.绝对定位的盒子水平居中显示：

1.让固定定位的盒子left（top）：50%，父容器宽度(高度)的一半
2.margin-left(top)：-负值（自己盒子宽度的一半）

12.定位的特殊属性：

1.行内元素添加了固定或绝对定位，可以设置高度和宽度。
2.如果是块元素添加了固定或绝对定位，且不给设置高和宽，默认是内容的高宽
3.脱离标准流的盒子不会触发盒子的塌陷问题
4.定位会压住标准流的文字，浮动则不会压住。

13.元素的显示与隐藏：
1.display:none 隐藏对象（不保留原有位置）
display：block 除了转换为块级元素，还有 显示元素的作用
2.visiblity：hidden（保留原有位置）隐藏元素
visiblity：visible 显示元素
3.overflow :visible 可见
overflow: auto 在需要的时候添加滚动条
overflow: hidden 溢出的部分隐藏起来
overflow :scroll 溢出部分显示滚动条