一、基础概念
（1）概念：Cacading Style Sheet 层叠样式表
在HTML中实现:
1)动静分离（独立的JS文件）
2)内容和表现分离（独立的CSS文件）
二、HTML中嵌入CSS的三种样式
（1）行内样式 <tag style="..."></tag> 不推荐使用
（2）内部样式 <head>
...
<style>
...
</style>
</head>
（3）外部样式
创建独立的CSS文件 xxx.css （与html页面同名)
<head>
<link rel="stylesheet" type="text/css" href="path" />
</head>
三、选择器
基础选择器
id选择器 #name{…} name必须具有唯一性
class选择器 .name{…} （重中之重） 可重用，可组合
tag选择器 tagname{…} //与标签同名 tag必须与标签名同名,标签自动响应
行为伪类选择器
悬浮伪类：selector:hover{…} 鼠标进入
点击伪类：selector:active{…} 鼠标左键单击
结构伪类
前置伪类：selector：：before{…}
后置伪类：selector：：after{…}
四、样式（key：value；）
文字样式：（复合样式）font：12px/1.2 arial,“microsoft yahei”; 1.2:指1.2倍行距
文字类型：font-style：italic；（斜体）
文字粗细：font-weight：bold；（加粗）
文字大小：font-size：int px；（像素） 正文字体12~14px之间
字族：font-family：arial，“宋体”；//设置字体样式（英文字体样式必须在前）
文本样式：没有复合样式
文本颜色：
color:color-word
rgb[a]（0255，，[,01]） #000000~#ffffff;//a 透明(transparent)
#333，#666，#999（常用参数）
行距 ： line-height：1.2em/int px;//倍数行距/像素
字符间距：letter-spacing：int px；
首行缩进：text-indent：2em；int px；
文本装饰：text-decoration：none/line-through/underline; //删除线和下划线
水平对齐：text-align：left/center/right/justify(两端对齐);
文本溢出：text-overflow：ellipsis（省略）； 默认是可见的
文本换行：white-space：wrap/nowrap（不允许换行）；
文本选择：user-select:none/all;
列表样式：list-style:none url(path) inside;
列表图标：list-style-type-：none；
列表图片：list-style-image:url(…/imgs/xxx.xxx);// …/值回到上级目录
列表图片的位置：list-style-position:outside/inside; li=>overflow:hidden;要改为inside
边框样式：
（复合样式）
border：color width style；
border-top：color width style
border-right：color width style
border-bottom：color width style
border-left：color width style
border-color： border-top-color border-right-color border-bottom-color border-left-color
border-width： border-top-width border-right-width border-bottom-width border-left-width
border-style： border-top-style border-right-style border-bottom-style border-left-style
圆角
border-radius:int px;
阴影
box-shadow:offest-x(px) offest-y(px) shadow-radius(px) shadow-color(px)
背景样式：
background-color:三种;
background-image:url(path);
background-position:
相对位置：九宫格
水平：left/center/right
垂直：top/center/bottom
绝对位置：坐标定位（参考位置左上角（0,0））
水平：int px
垂直：int px
background-repeat
no-repeat：不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
repeat：双向平铺（默认）
background-size:
相对大小：cover（填满窗口）
绝对大小：width（px） height（px）
五、盒子
1、分类：
1）content-box（内容盒子：定义盒子的宽高为内容宽高，实际宽高计算如下）
宽度：左右外边距+左右边框的宽度+左右内边距+内容宽度
高度：上下外边距+上下边框的宽度+上下内边距+内容高度
2）border-box（边框盒子）
宽度：左右外边距+盒子宽度
高度：上下外边距+盒子高度
2、弹性盒子：
父选择器：
display:flex; //声明当前盒子为弹性盒子
flex-direction:row/row-resverse/column/column-reverse;左到右...//控制子盒子弹性方向
flex-wrap：nowrap（默认）/wrap; //控制子盒子是否允许换行
justify-content:行子盒子水平对齐/列子盒子的锤子对齐
flex-start:左对齐
center:居中
flex-end:右对齐
space-around:风左右外边距
space-between:两两等边距
align-items:单行子盒子垂直对齐/单列子盒子水平对齐方式
flex-start:上对齐
center:居中
flex-end:下对齐
align-content:多行子盒子垂直对齐/多列子盒子水平对齐方式
flex-start:上对齐
center:居中
flex-end:下对齐
space-around:垂直等左右外边距
space-between:垂直两两等边距
子选择器：
align-self:行盒子中某（些）子盒子垂直对齐、列盒子中某（些）子盒子水平对齐
flex-start：上对齐
center：居中
flex-end：下对齐
3、盒子类型转换
盒子类型转换：行内->行内块->块
display:
inline:行内元素
inline-block:行内块级元素
block:块元素
none:隐藏
flex:弹性盒子
六、定位
position 标准文档流 偏移 z轴
静态{默认二维}：static 是 否 否
相对定位：relative 是 是（参考其原有位置） 是
绝对定位：absolute 否 是 是
参考其父辈定位元素
否则参考body
固定定位：fixed 否 是 是
只参考浏览器窗口，
不参考其他任何元素
tips：以上知识较为零碎，若有遗漏，望谅解！整理不易，且看且珍惜！
2426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
