CSS自定义样式

CSS自定义样式

1. 自定义字体

先将字体文件放到web服务器上，需要时自动下载到用户计算机上

属性：@font-face
例： @font-face{
        font-family:myFont;
        src:url("自定义字体路径");
    }

p{font-family:myFont;}

注意：一次只能引入一种字体，引入多种字体需要写多个@font-face。

2. sprite雪碧图

CSS雪碧，即CSS Sprite，是将小图标和背景合成到一张图片上，利用CSS背景定位来显示需要显示的图片部分。使用CSS的background和background-position属性渲染。图片是在CSS中定位，不是<img>标签。

CSS优先级和权重值

1. 优先级：即层叠顺序

2. 权重值

权重值	a	b	c	d
内嵌样式	1	0	0	0
ID选择器	0	1	0	0
类、伪类、属性	0	0	1	0
元素选择器	0	0	0	1

通用选择器(*),子选择器(>)和兄弟选择器(+，~)权重值均为0000

!important可以使其他选择器均失效
写法：{color:red!important}

CSS盒模型

1.1 一个独立盒子的内部结构

1.内容： 2.padding：内边距 3.border:边框 4:margin:外边框

1.1.1 padding外边距

元素边框与元素内容之间的空白区域（同border用法类似，没有负值，负值不起作用）

padding-top       上
padding-right     右
padding-bottom    下
padding-left      左

1.1.2 margin外边距（同padding用法类似，值可以为负）

margin的居中属性：
margin:o auto;  可以让块级元素水平居中，需设置宽度

1.1.3 border边框

透明边框：  border-color:transparent

1.1.4 两种盒模型的区别

W3C标准盒子模型：
元素空间高度：content+padding+border+margin
IE盒子模型：
元素空间高度：content+margin

1.2 多个盒子之间的相互关系

1.2.1 DOM树

1.2.2 常规流布局，即文档流。

1.2.3浮动

属性：float:left,right,none,inherit
说明：left,right常用；inherit表示从父元素继承浮动属性的值

浮动的特性：
1.会造成父级元素高度的崩塌（前提父级元素没有设置高度）；父级元素崩塌后，后面的元素自动排列到上面去，但是文字不会（即不会被浮动的块元素覆盖），文字会自动环绕在四周。
2.对兄弟元素的位置影响

1.2.4 清除浮动

1 overflow:hidden
2 清除浮动 clear 属性（both,left,right,none）
3 :after{
    content:"";
    display:block;
    clear：both;
   }

说明：第二种是先在父元素里设置一个新标签，再给新添加的标签设置一个样式。