4.css

css

历史演变

	从1990年HTML被发明开始，不同的浏览器厂商结合各自的技术为用户提供丰富的页面样式效果，
使得HTML页面越来越臃肿。
	在1994年哈坤·利提出了CSS（Cascading Style Sheets，层叠样式表）的最初建议，1995年W3C成立CSS创作小组全力以赴研发CSS标准，
1996年12月CSS1标准问世。
	到1998年5月W3C组织对CSS1进行完善发布了CSS2。经过不断发展，W3C与1999年开始制定CSS3，于2001年5月完成了CSS3草案。
	

基础导论
	像素：简单理解就是图像组成的最基本元素，图像中的每一个最小单位称之为像素。css中用px表示。
	分辨率：显示器所能显示的像素的个数，例如：800x600即表示显示器横向有800个像素竖向有600个像素。
	RGB颜色：工业界的色彩标准，由红（R）、绿（G）、蓝（B）三个颜色通道变化，相互叠加得到的各种颜色。

1.background背景样式

//复合写法
background:color image repeat attachment position;
//分解写法
background-color:color|#十六进制|rgb(,,)|rgba(,,,);;                   //背景颜色
background-image:url('URL');                                         //背景图像
background-repeat:no-repeat|repeat(默认)|repeat-y|repeat-x;          //背景重复
background-position:[top,bottom,left,right]|%|px;                   //背景定位
background-attachment:scroll(默认)|fixed;                            //背景滚动

background-size:px px;                                               //背景尺寸
background-origin:[top,left,bottom,right]|px;                        //背景源点
background-clip:px px;                                               //背景裁剪

2.text文本样式

color:color|#十六进制|rgb(,,)|rgba(,,,);                                                //文本颜色
line-height:px|%|inherit;                                            //文本行高
text-align:left|right|center|justfiy|inherit;                        //文本的水平对齐
text-decration:none(默认)|underline|overline|linethrough|inherit;     //文本装饰线
text-indent:px|%|inherit;                                            //文本首行缩进
text-shadow:px px px px color;水平 垂直  模糊距离 模糊半径 阴影颜色       //文本阴影
text-transform:none|capitalize|uppercase|lowercase|inherit;          //文本大小写转换
letter-spacing:px;                                                   //文本字间距
word-spacing:px;                                                     //文本词间距
white-space:wrap|no-wrap;                                            //文本折行

3.font字体样式

//复合写法
font:family bold px/px style color;(px/px为font-size/line-height)    
  
//分解写法
font-style:normal|italic|oblique|inherit;默认|斜体|倾斜|继承            //字体样式
font-weight:normal|bold|100-900|inherit;                             //字体粗体
font-family:family-name;                                             //定义字体
font-size:px|em|rem|inherit;                                         //字体大小
font-variant:normal|samll-caps|inherit;                              //字体小型大写

4.list(ul/ol)列表样式

//复合写法
list-style:type position image;

//分解写法
list-style-type:disc(默认)|none|circle;                                //项目的标记
list-style-position:outside(默认左侧)|inside|inherit;                   //标记的位置
list-style-image:none(m默认)|url('URL');                               //标记设为图像

5.table表格样式

border-collapse:separate(默认分离)|collapse;                           //表格的边框分离
border-spacing:px px;                                                //表格边框水平、垂直距离

6.outline轮廓样式

//复合写法
outline:color style width;

//分解写法
outline-color:color|#十六进制|rgb(,,)|rgba(,,,);;                   //轮廓颜色
outline-style:none|dotted|solid|dashed;                            //轮廓样式
outline-width:thin|medium|thick|px;                                //轮廓宽度

7.box model 盒模型样式

/*外边距margin*/
margin-top/margin-right/margin-bottom/margin-left:px|%;           //分解写法

margin:top right bottom left;                                    //复合写法

/*边框border*/
border-width/border-style/border-color;                          //分解写法

border:width style color;                                        //复合写法

border-top/border-top-color;                                    //变式写法

/*内边距padding*/
padding-top/padding-right/padding-bottom/padding-left:px|%;     //分解写法

padding:top right bottom left;                                  //复合写法

     /*外边距合并*/
			(1)两个元素处于上下关系时
			(2)两个元素处于包含关系时
	/*解决外边距合并*/
			添加边框

8.position定位样式

position:static(默认)/relative/absolute/fixed;    
 /*定位元素所具有的样式属性*/
top:px|%;
left:px|%;
right:px|%;
bottom:px|%;

z-index:nummber;          //定位元素的层级

9.float浮动样式

float:left|right;
		/*清楚浮动的样式*/
		clear:left|right|both;

10.size尺寸样式

width:px|em|rem|%;
heught:px|em|rem|%;
min-width/min-height/max-width/max-height:px|em|rem|%;

11.控制元素分类、显示的样式

display:none|block|inline|inline-block;                       //设置元素的显示方式
visibility:visible(默认)|hidden;                               //设置元素是否可见
opacity:0-1;                                                  //设置元素的透明度

12.flex弹性布局样式

/*采用flex布局的元素称为flex容器，他的子元素自动成为容器成员（项目），项目的float、clear、vertical-align样式失效*/

   	//flex容器具有的样式
flex-direction:row|row-reverse|colum|colum-reverse;                     //主轴方向
flex-wrap:nowrap|wrap|wrap-reverse;                                     //项目是否换行

flex-flow:direction wrap;  /*前两者的简写*/

justify-content:flex-start|flex-end|center|space-between|space-around;//项目在主轴的对齐方式
align-items:flex-start|flex-end|baseline|stretch;    /*单一主轴*/     //项目在交叉轴的对齐方式
align-content:flex-start|flex-end|baseline|stretch;  /*多主轴*/       //项目在交叉轴的对齐方式


	//flex项目具有的样式
order:number;                                            //规定项目排序，数值越小越靠前
align-self:auto|flex-start|baseline;                     //规定单个项目与其他项目不同的样式

flex-grow:0(默认)|munber;                                //项目放大比例
flex-shrink:1(默认)|number;                              //项目缩小比例
flex-basis:lenght|auto;                                 //设置项目分配主轴剩余的空间

flex:flex-grow flex-shrink flex-basis;   /*前三者的复合写法*/

13.其他样式

overflow:visible|hidden:scroll|auto;                                  //溢出显示方式

vertical-align:baseline(默认)|top|middle|bottom|text-top|text-bottom; //行内元素的垂直对齐方式

cursor:default|auto|pointer|move|wait|help;                           //光标样式

@media deviceName{/*deviceName如：all/print/screen*/
    //code...
}                                                               //为不同媒体设备书写不同样式

css3扩展、新增样式

1.css3扩展样式

	//边框
border-radius:px|%;                             //圆角
border-image:url('URL');                        //边框图像
box-shadow:Ypx Xpx px px color insert/outset;   //边框阴影
	//背景
background-size:width height;                   //背景尺寸
	//文本
text-shadow:px px px px color insert/outset;    //文本阴影
word-wrap:normal|break-word;                    //打断长单词
	//字体
/*自定义字体*/
@font-face{
    font-family:myFontName;
    src:url('URL');
}
	//轮廓
outline-offset:px;                         //轮廓偏移量
	//显示
resize:none|horizontal|vertical|both;      //用户拖动改变元素尺寸
box-sizing:border-box|contet-box;          //规定盒模型的内容起始位置

2. css3新增样式

	//过渡transition
/*分解写法*/
transition-property:cssName;                  //要过渡的CSS样式名
transition-duration:time;                     //过渡效果的花费时间
transition-timing-function:ease(默认)|linear|ease-in|ease-out|ease-in-out; //过渡效果的时间曲线
transition-delay:time;                       //过渡效果的延迟时间
/*复合写法*/
transition:property duration time-function delay;




	//动画animation
【定义动画】
@keyframes framesName{
    form/%{}，
    to/%{}
}
/*分解写法*/
animation-name:framesName;                    //动画名
animation-duration:time;                      //一个动画周期花费的时间
animation-timing-function:ease(默认)|ease-in|ease-out|ease-in-out;//规定动画效果的时间函数
animation-delay:time;                         //动画开始的延迟时间
animation-direction:normal|alternate;          //动画正常播放|轮流反向播放
animation-iteration-count:number|infinite;     //动画播放次数|无限播放
animation-fill-mode:none(默认)|forwards|backwards|both;//动画播放的填充模式[无|最后一帧|第一帧]
animation-play-state:runing|paused;            //播放|暂停动画
/*复合写法*/
animation:framesName duration timing-function delay interation-count direction;




	//转换transform
【2D转换】
transform:rotate(deg);                   //旋转 
transform:translate(X（px）,Y（px）);     //移动 transform:transX(px)|transY(px); //单轴移动
transform:scale(X（num），Y（num）);//缩放 transform:scaleX(number)|scaleY(number);//单轴缩放
transform:skew(deg,deg);           //翻转 transform:skewX(deg)|skewY(deg)        //单轴翻转

/*复合写法*/
transform:matrix(deg,px,px,num,num,deg,deg);


【3D转换】
transform:rotate3d(X,Y,Z,deg); //旋转 transform:rotateX(deg)|rotateY(deg)|rotateZ(deg)
transform:translate3d(X,Y);   //移动 transform:transX(px)|transY(px)|transZ(px); //单轴移动
transform:scale3d(X，Y);    //缩放 transform:scaleX(num)|scaleY(num)|scaleZ(num);//单轴缩放
			//skew无3D变换

transform:perspective(n);   //为3D元素定义透视图

/*复合写法*/
transform:matrix3d(deg,px,px,px,num,num,num);

CSS选择器

[ID>Class>tagName]

#id                                 //id选择器
.class                              //class选择器
tagName                             //元素选择器
parent > child                      //子选择器
brother + brother                   //兄弟选择器
 
//伪类选择器
(1)锚伪类
		ele:hover                  
		ele:visited
		ele:active
		ele:link
(2)伪类
		ele:fouse
		ele:first-child
		ele:nth-child(n)

//伪元素
    	ele:before
		ele:after

BFC

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素，
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 、浮动 与清除浮动 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

简单理解就是:BFC是整个渲染页面其中的一个部分区域。

产生问题：

使得块级文档流交错、溢出

解决方式：

（1）添加CSS样式

（2）触发BFC，使其页面重绘