css笔记

CSS

css字体设置

font
font-size 尺寸
行高line-height
规定字体粗细。参阅：font-weight 中可能的值。
font-style、 font-weight (可以不写)
font-size 、font-family（必须要写）
文本行间距：line-height
文本首行缩进：text-indent：2em

文本样式：text-decoration   
underline	下划线    
line-through  贯穿线  
overline 上划线 
none 取消样式

CSS边框设置

boeder
top bottom lift right 上下左右
style width color 样式 边框宽 颜色
style solid(实线) dashed（虚线） dotted（点线）double：边框为双实线
border radius： 圆角边框 可以是%数 也可以是像素
外边框
margin 上右下左
margin ：0 auto；

内边距padding
padding：2px 1px 2px； 上下2px 左右1px；
会撑开盒子，总盒子减去多出来的内边距

阴影

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)

css定位

position
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 相对于进行页面绝对的定位
relative 这是相对于原来的位置进行定位
fixed 是特殊的绝对定位，完全是以浏览器定位
z-index 来进行判断提高定位盒子的层级
transform: translate(-50%, -50%) 子绝父相后 移动父盒子的50%，再移动自己的50%；一个值是宽， 两个值是高宽

选择器

div>strong 只选择div下的strong 只是儿子 孙子不会变
并集选择器 用逗号隔开， 逗号理解为 和的意思 通常用于集体声明 就是因为这些选择器 里面的样式 相同

比如：p, span, .red {
			color: red;
		}

overflow（溢出）

overflow 属性规定当内容溢出元素框时发生的事情。
visible默认 内容不会被修改 会呈现在元素外
hidden 内容被修剪 其余内容不会被显示
scroll 内容被修改 多余的内容在会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

溢出的文字用省略号显示超出的部分：
1.强制一行内选择文本  white-space: nowrap ;（white-space设置或索引对象内文本显示方式）
2.溢出隐藏 overflow：hidden；
3.文字溢出 用省略号代替 ellipsis省略号 text-overflow：ellipsis；
一定要先强制一行再隐藏文字      
1.强制一行内选择文本  white-space: nowrap ;（white-space设置或索引对象内文本显示方式）
2.溢出隐藏 overflow：hidden；
3.文字溢出 用省略号代替 ellipsis省略号 text-overflow：ellipsis；
 一定要先强制一行再隐藏文字

清除浮动

1.浮动元素末尾添加一个空的标签<div class=”clear” ></div>

 .clear {
      clear: both;
      }

2.overflow:hidden; 缺点是会处理掉溢出边框的内容

3.after 伪元素

.clearfix:after {
	 content:” . ”;
	 display:block;
	 height:0;
	 clear：both；
	 visibility:hidden;
}
.clearfix{
 	*zoom：1； IE 6 7 专门清除浮动的样式
}

4.双伪元素清除浮动

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

圆角

border-radius: 14px 14px 14px 0;

精灵技术（sprite）

为什么使用这个技术：
有效的减少服务器接受和发送请求的次数，提高页面的加载速度

CSS精灵技术就是把网页的一些小的背景整合到一个大图中（精灵图），各个网页需要的是精灵图中的某个小图，要想精确到精灵图中的某个小图。需要background-position来进行精确的定位

核心：1.精确的测量，每个小图片的大小和位置。2.给盒子指定小背景元素的时候，背景图片的定位基本都是负值。

本质：所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

结语:小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

滑动门技术

为了方便各特殊形状的背景能够自适于文本内容的多少

核心，利用CSS精灵技术和盒子padding撑开宽度，以便适应于不用数字的导航栏 用a设置背景左侧 padding撑开盒子，用span设置背景右侧；

css三角

是用宽高都是0，用边框来模拟三角形；只有一个颜色，其他三种都是透明色（
transparent）

字体图标

@font-face {
			/*1. 这个字体名称要注意 icomoon*/
		  font-family: 'icomoon';
		  /*2. 一定要注意路径的问题*/
		  src:  url('fonts/icomoon.eot?7kkyc2');
		  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		  url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
		  url('fonts/icomoon.woff?7kkyc2') format('woff'),
		  url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
		  font-weight: normal;
		  font-style: normal;
}