一. css样式
<标签名 style='属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;'>内容</标签名>
<style>
选择器 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
<link href='CSS文件路径' rel='stylesheet'>
权重 : 行内样式 > 内部样式 > 外部样式
二. css选择器
标签名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
.类名 {属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
/#id名 {属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
*{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
权重:id选择器>类选择器>标签选择器>通配符选择器(*)
三. 盒模型
CSS3中有两种盒模型:标准盒模型 和 怪异盒模型
两种盒模型的区别
标准盒模型下
box-sizing: content-box;
盒子宽度=width + padding + border
怪异盒模型
box-sizing: border-box;
当内边距和边框宽度相加 < 内容width的时候,盒子宽度就是 width 的值 压缩content内容区域
当内边距和边框宽度相加 > 内容width的时候,盒子宽度就是 内边距+边框 content区域就没了
标准盒模型主要用于PC端, 怪异盒模型主要用于手机端。
四. 清除浮动
目的:解决 父级元素 会因为 子级元素 浮动导致高度塌陷的问题。
1.额外标签法
在浮动元素末尾添加一个空的标签例如
<div class='parent'> <div class='child'> <div style='clear:both'></div> </div> </div>
2. 添加overflow属性
给父级元素添加overflow属性
<style> .partent { overflow: hidden | auto | scroll ; } </style>
3. 使用after伪元素
<style> .partent :after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } </style>
4. 使用before和after双伪元素清除浮动
<style> .partent { zoom:1; } .partent :after,.partent :before{ content:""; display:table; } .partent :after{ clear:both; visibility:hidden; font-size:0; height:0; } </style>
五. css3新增
- 颜色:新增RGBA、HSLA模式
- 文字阴影:(text-shadow)
- 边框:圆角(border-radius) 边框图片(border-image) 边框阴影(box-shadow)
- 盒子模型:box-sizing
- 背景:background-size,background-origin background-clip(削弱)
- 渐变:linear-gradient(线性渐变):
- 过渡:transition可实现动画
- 自定义动画: animate@keyfrom
- 媒体查询:多栏布局@media screen and (width:800px)
- border-image
- 2D转换:transform:translate(x,y)平移 rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
- 3D转换
- 字体图标:Font-Face
- 弹性布局:flex