非原创，摘抄自网络，仅供翻阅
引入方式
- 行内样式
- <p style="color:red;font-size:30px;">我是p标签</p>
- 内联样式
<head> <style type="text/css"> h3{ color:red; } </style> </head> - 外链式
- <link type="text/css" rel="styleSheet" href="CSS文件路径" />
CSS属性
CSS选择器
- 类选择器
- id选择器
- 标签名选择器
优先级：标签名选择器<类选择器<id选择器<行间样式
- 伪类选择器
盒模型
- 宽/高
- 内边距/外边距
- 边框
文本样式
| 属性 | 注释 |
|---|---|
| font-size | 文字大小（一般均为偶数） |
| font-family | 中文 SimSun (宋体) SimHei (黑体) Microsoft YaHei (微软雅黑) STKaiti (华文楷体) 英文 Arial Georgia Helvetica sans-Serif |
| color | 文字颜色（英文、rgb、十六位进制色彩值） |
| line-height | 行高 (具体的数值) |
| text-align | 文本对齐方式 （left center right） |
| text-indent | 首行缩进（em缩进字符或者是具体的数值） |
| font-weight | 文字着重 （normal bold bolder 100~900） |
| font-style | 文字倾斜 (normal italic oblique) |
| text-decoration | 文本修饰 (none underline overline line-through) |
| letter-spacing | 字母间距 (具体的数值) |
| word-spacing | 单词间距（以空格为解析单位） |
| 属性 | 复合写法 |
|---|---|
| background: | background-color background-image background-position background-repeat |
| border | border-width border-style border-color |
| padding | 上 右 下 左 |
| margin | 上 右 下 左 |
| font： | font-style font-weight font-size/line-height font-family； |
常用样式
| 属性 | 解释 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background | 背景 |
| border | 边框 |
| padding | 内边距 |
| margin | 外边距 |
| font-size | 文字大小 |
| font-family | 字体 |
| color | 文字颜色 |
| line-height | 行高 |
| text-align | 文本对齐方式 |
| text-indent | 首行缩进 |
| font-weight | 文字着重 |
| font-style | 文字样式 |
| text-decoration | 文本修饰 |
| letter-spacing | 字母间距 |
| word-spacing | 单词间距 |
浮动
- 其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。
- 特性
1.浮动的元素排在同一排
2.浮动的元素内容撑开宽度
3.浮动的元素支持所有的css样式
4.浮动的元素脱离文档流
5.浮动的元素提升层级半级
脱离文档流：标签浮动后，不受父级标签的控制。
例子：
浮动前：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 10px solid red;
}
.box>div{
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>我是盒子1</div>
<div>我是盒子2</div>
<div>我是盒子3</div>
<div>我是盒子4</div>
<div>我是盒子5</div>
</div>
</body>
网页效果：
浮动前效果
让子级盒子浮动：
（子级盒子css变化）：
.box>div{
width: 100px;
height: 100px;
float: left; //浮动
border: 10px solid red;
}
效果：
浮动
子级盒子的浮动使得其子级div失去父级box的控制，由原来子级撑起父级的宽度/高度变得失效。
浮动的元素提升层级半级：
想要理解“浮动元素提升层级半级”，就要先知道div基础属性与div所包含的内容是相互分离的：
div侧视图
div非浮动
当div浮动时，
div浮动1
div浮动2
实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
float: left;
border: 5px solid red;
}
.box2{
width: 100px;
height: 100px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="box1">
我是盒子1
</div>
<div class="box2">
我是盒子2
</div>
</body>
效果图：
效果图
- BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
1.父级也浮动
弊端：左右的margin:0 auto; 会失效；
2.父级加display:inline-block
弊端：左右的margin:0 auto; 会失效；
(如果需要让元素居中可以给父级加text-align:center)
3.给父级加高
弊端：扩展性不好
4.br标签
写法：</br/>
作用：换行
5.伪类清浮动
:after{
content:"";display:block;clear:both;
}
定位： 把一个元素 按照一定的方式 定到页面的某一个位置
position
-
相对定位 relative
针对自己本身的位置进行定位1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位 -
绝对定位 absolute
针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位
注：
绝对定位即使没有初始值，也一定要设置值
left:0px;
top:0px;1.会使元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
z-index:数值; 定位层级设置
数值越大，层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作
-
固定定位 fixed
针对页面窗口进行定位
注：
IE6 不支持固定定位偏移量
left
top
right
bottom
温馨提示
left top 比 right bottom 的优先级要高1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动，可以省略清浮动的操作
定位常用方式：子绝父相
即父级为相对定位，子级为绝对定位。
圆角
border-radius：
- 八个值：左上角 右上角 右下角 左下角->水平圆角半径/左上角 右上角 右下角 左下角->垂直圆角半径
- 四个值: 左上角 右上角 右下角 左下角->圆角半径
- 三个值: 左上角 右上角|左下角 右下角
- 两个值: 左上角|右下角 右上角|左下角
- 一个值：四角同半径
背景裁切
background-clip：
- border-box 裁掉边框以外的背景部分，为默认值
- padding-box 裁掉内边距以外的背景部分
- content-box 裁掉内容以外的背景部分
- text 裁掉文字轮廓以外的背景部分，目前需加webkit前缀
渐变
- 线性渐变
background: linear-gradient(to direction, color-start, color-stop1, ... , color-end);
- to direction:方向（默认由上到下），参数包括角度、方位（top，bottom，left，right）
- color-start：起始颜色
- color-stop1, ... , color-end：终止颜色
- 径向渐变
background: radial-gradient(size shape at position,start-color, ..., last-color);
- size shape at position:圆心（坐标）at center、at 100px 200px
- start-color：起始颜色
- last-color：终止颜色
盒阴影/文字阴影
box-shadow/text-shadow:[inset] h-shadow v-shadow blur spread color;
1.[inset]:默认为外阴影，inset为内阴影
2.h-shadow：阴影水平偏移量
3.v-shadow：阴影垂直偏移量
4.blur：阴影模糊半径
5.spread：阴影扩展半径
6.color：阴影颜色
蒙版
-webkit-mask
过渡
transition: property duration timing-function delay;
1.property:规定应用过渡效果的 CSS 属性的名称(none、width、height、all)
2.duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）
3.timing-function：规定过渡效果的速度曲线（linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)）
| time-function | 曲线 |
|---|---|
| linear |
linear
|
| ease |
ease
|
| ease-in |
ease-in
|
| ease-out |
ease-out
|
| ease-in-out |
ease-in-out
|
| cubic-bezier(n, n, n, n)） |
cubic-bezier, example
|
4.delay：规定过渡效果何时开始（以秒或毫秒计，允许负值）
过渡常用的触发方式：伪类触发
变换
transform:
- translate（位移）
- rotate（旋转）
- scale（缩放）
transform-origin：切换变换原点
3D
首先给需要3D转换的元素的父级添加3D环境和景深
transform-style:preserve-3d; //添加3d环境
perspective: XXX px; //景深
- transform：与2d的变换不同的是3D的坐标轴为3维坐标轴即X/Y/Z轴。
网友评论