一些关于css的个人笔记

外部引入css文件

<link rel="stylesheet" href="路径">引入css文件

字体

	font-family: ;设置字体，如宋体，草书，小篆；
	font-size: px;设置文字大小，单位px,像素
	font-weight: normal默认==400/bold加粗==700/bolder/lighter/number(100,....,900)/;
	font-style: normal默认/italic倾斜;设置字体样式 
    font: style weight size/line-height family;简洁格式

颜色

color: ;

文字

	text-align: center/lift/right;文字对齐
	text-decoration: none默认无/underline下划线/overline上划线/line-through删除线;文字划线
    text-indent: ;文本缩进,em相对字体大小，px像素

 链接

a:link	选择未被访问过的链接
a:visited	选择所有被访问过的链接
a:hover	选择鼠标位于其上的链接
a:active	选择活动链接

 表单

input:focuse {
} 选择有鼠标的表单
outline: none;放在input中可以取消表单被选中后的蓝色边框效果
resize: none;放在textarea中可以防止文本域边框被自由拖动

 背景

background-color: ;背景颜色
background-image: ;背景图片
background-repeat: repeat/no=repeat/repeat-x/repeat-y;背景平铺
background-attachment: scroll滚动/fixed固定;背景图片固定
background-position: x y| top/center/bottom left/center/right;背景图片位置
background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;

background: rgba(0,0,0,0-1);背景透明度

元素格式转换 

 display:    block块元素，独占一行
            inline行内元素，不占一行
            inline-block行内块元素;转换元素显示模式

优先级权重

继承或*                                        0，0，0，0

元素选择器                                  0，0，0，1

类/伪类/结构伪类/属性选择器      0，0，1，0

id选择器                                       0，1，0，0

!importent                                     1，0，0，0          写在Css属性后面，";"前面

属性选择器

结构伪类选择器

 

 border

border-width: px;边框粗细
border-style: none/solid实线边框/dashed虚线边框/dotted点线边框;边框样式
border-color: ;边框颜色
border: ;没有顺序

border-collapse: collapse;合并相邻边框
border-radius: x|top-left/top-right/bottom-right/bottom-left;设置圆角边框,值为圆框半径

三角做法：将一个盒子设置为0大小，，再添加边框设置即可

padding

padding-left: ;左内边距
padding-right: ;右内边距
padding-top: ;上内边距
padding-bottom: ;下内边距
padding: px;上下左右都是
padding: px px;上下 左右
padding: px px px; 上 左右 下
padding: px px px px;上，右，下，左
padding ,会撑开盒子，若不指定width/height,则不会撑开盒子，指定哪一个，哪一个就会被撑开

margin外边距

与内边距格式一样

盒子指定宽度，左右外边距设置为auto，可实现块级盒子水平居中

行内块与行内元素可以用用text-align: center实现

对于同时有上边距的父子元素，会出现塌陷，解决

为父元素加边框

为父元素定义内边距

为父元素添加overflow: hidden

对于浏览器默认内外边距需要手动清除

阴影

box-shadow: h-shadow v-shadow blur spread color inset;盒子阴影
h-shadow		必需，水平阴影的位置，允许为负值
v-shadow		必须，垂直阴影的位置，允许为负值
blur		可选，模糊距离
spread		可选，阴影尺寸
color		可选，颜色
inset		可选，将外部阴影(outset)变为内部阴影

text-shadow: h-shadow v-shadow blur color;
与盒子阴影一样

浮动

float:left向左浮动/right向右浮动;浮动,
会脱离标准流，会一行显示，只会影响后面的元素，具有行内块特性，
行内元素如果加了浮动可以直接设置宽高

父盒子内所有盒子浮动后，父盒子会失去高，
可添加额外标签消除
给父盒子添加 overflow: hidden/auto/scroll;
给父元素添加:after伪元素

	.clearfix:after {
		content:"";
		disiplay: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {/*  ie6、7专用 */
		*zoom:1;
	}
	直接复制粘贴
给父元素添加双伪元素

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

定位

position: static;绝对定位，不脱标

{
	position: relative;
	top: ;相对于上偏移量
	left: ;相对于右偏移量
}相对定位，不脱标

{
	position: absolute;
	top: ;相对于上偏移量
	left: ;相对于右偏移量
	right: ;
	bottom: ;
}绝对定位，脱标

子绝父相
{
	position: fixed;
	top: ;相对于上偏移量
	left: ;相对于右偏移量
	right: ;
	bottom: ;
}固定定位，相对于可视窗口参考,脱标

left: 50%;
margin-left: 版心一半;可移动到版心右侧固定
类似可推广

{position: sticky; top: ;}粘性定位,距离顶部多少开始固定，可视窗口参考

z-index: ;定位的显示优先级

精灵图技术

多图标拼接成一个大图片，然后通过背景移动选择图标

字体图标

复制代码，然后在盒子中添加font-family: 'icomoon';

@font-face {
	font-family: 'Linearicons-Free';
	src:url('fonts/Linearicons-Free.eot?w118d');
	src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
		url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
		url('fonts/Linearicons-Free.woff?w118d') format('woff'),
		url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
		url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}

盒子上的鼠标样式

coursor: default默认/pointer小手/move移动/text文本/not-allowedm禁止;

文字布局

有顶线，中线，基线，底线

vertical-align: top/middle/baceline/bottom;设置图片与文字对齐的标准线
图片会默认与基线对齐，会造成图片与盒子边框有一条线距离

{
white-space: nowrap;不换行
overflow: hidden;
text-overflow: ellipsis;
}一行文字超出省略号显示

盒子模型

Box-sizing: content-box盒子大小为width+padding+border/boder-box；
            盒子大小为width，不会撑大盒子