CSS
css选择器
- 概念：层叠样式表 Cacading Style Sheet tilt插件，层叠由图层叠盖
结构，表现，二者分离：独立的css文件
动静分离：独立的js文件
可以将css样式编写到元素(标签)的style属性当中
<p style=”color:red;font-size:”20px;”>…</p> 内联样式只对当前标签中的内容起作用
也可以将css样式编写到head中的style属性当中
<head>
<style type=”text/css”>
p{ color:red; 选择器
声明块
}
</style>
</head>
内部样式表
通过css选择器选择指定元素，可以同时为这些元素一起设置样式，使样式进一步复用
外部样式表
还可以将样式表编写到外部的css文件当中，然后通过Link标签将外部的css文件引入到当前的页面中，由此会应用到当前页面中 xxx.css与html页面同名
<link rel=”stylesheet” type=”text/css” href=”css文档的相对路径”/> 提高访问速度
- 语法：必须编写在<style></style>中
注释：/*
*/
选择器：通过选择器可以选中页面中指定的标签，并且可以将声明块中的样式应用到选 择器对应的元素上
基础选择器：
id选择器： #name{ …} name命名具有唯一性
class选择器： .name{…} 最主要 可以重用，组合使用
tag选择器： 与标签同名{…} 同名标签自动响应
高级选择器：行为伪类选择器
声明块：声明块紧跟在选择器的后面，使用一对{}括起来，声明块中实际上就是一组的名知对结构 color(名) red(值)
在一个声明块中可以有多个声明，多个声明之间用；隔开
样式：
文字样式：font：12px/1.2 arial,”Microsoft yahe”; 1.2倍行距
文字类型：font-style：italic(斜体)
文字粗细：font-weight：bold(粗体)
文字的大小：font-size：int px(大小) 正文字体12-14px之间
字族：font-family：arial,”宋体”
文本样式
文本颜色：color; color-word/rgb[a](透明度)(0-255,~,~,0~1)/#ffffffff 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-alige：left/center/right/justify(两端对齐)
文本溢出：text-overflow：elipsis(省略)
文本换行：write-space：wrap/nowrap(换行/不允许换行)
列表样式：list-style:none url(path)inside;
列表图标：list-style-type:none;
列表图片：list-style-image:url(../imgs/xxx.xxx)
列表图片位置：list-style-position:outside/inside; li=>overflos
复合：list-style :none url(…/image/xxx.xxx)
盒子模型
宽：width: int px
高：height: int px
边框样式：
border-top color width style
border-right color width style
border-bottom color width style
border-left color width style
border-color
border-width
border-style
border-top-color
solid:代表实线
圆角：border-radius : int px;
阴影：box-shadow:offset-x(px) offect-y(px) offset-radius(px)shadow-color;
内边距:padding : int px; 嵌套（父子）关系用内边距
外边距:margin : int px; 并列（兄弟）关系用外边距
盒子类型：box-sizing:content-box/border-box;
内容盒子：content-box(默认盒子类型)
宽度：左右外边距+左右边框的宽度+左右内边距+内容宽度
高度：上下外边距+上下边框宽度+上下内边距+内容高度
边框盒子 border-box
宽度：左右外边距+盒子宽度
高度：上下外边距+盒子高度
背景样式：
背景样式
Background-color
Background-image:图片
Background-position:
相对位置
水平：left/center/right
垂直：top/center/bottom
绝对位置
水平：int
Background-repeat 背景平铺 background-position:center;
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ：纵向平铺
repeat：双向平铺（默认）
Background-size: 背景大小
相对大小：cover填满窗口
绝对大小：width(px)height(px)
弹性盒子(取代浮动):
父选择器：
display:flex; //声明当前的盒子为弹性盒子
flex-direction:row/row-reverse/column/column-reverse;//控制子盒子的弹性方向
flex-wrap:nowrap(默认)/wrap;//控制子盒子是否允许换行
justify-content:行盒子的水平对齐/列盒子的垂直对齐
flex-start:左对齐
flex-end:右对齐
flex-center:居中对齐
space-around:等左右外边距
space-between:两两等间距
align-itemd 单行子盒子垂直对齐/单列子盒子水平对齐
flex-start:上对齐
center:居中
end:下对齐
space-around:垂直等左右外边距
space-between:垂直两两等间距
align-content 多行子盒子垂直对齐/多例子盒子水平方式对齐
flex-start:上对齐
flex-end:下对齐
center居中
space-around 垂直等左右外边距
space-between：垂直两两等间距
子选择器：
align-self:行盒子中某些子盒子垂直对齐/列盒子中某些子盒子水平对齐
flex-self:上对齐
center:居中
flex-end:下对齐
flex-grown;行盒子瓜分宽度/列盒子瓜分高度
例子：
让第二个元素的宽度为其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
盒子类型转换
四边或四角
val 同值
val val2 上下边/左上右下角 左右边/右上左下角
val val2 val3 上边/左上角 左右边/右上左下角 下边/右下角
val val2 val3 val4 都不同值
盒子类型转换：行内->行内块->块
display:
inline：行内元素
inline-block：行内块级元素
block：块元素
none：隐藏
flex：弹性盒子
全局通用用*
关于两个居中：
文字在父容器中的水平垂直位置
水平：text-align:left(默认)/center/right/justify
单行文本垂直： height:xxx px;
line-height:
盒子在父容器中的水平垂直位置
水平：子盒子margin:0 auto;
垂直：父盒子：padding npx 0;
行为伪类选择器：
悬浮伪类：selector:hover{…} 鼠标进入
点击伪类：selector:active{…} 鼠标单击左键
结构伪类：
前置伪类：selector::before{…}
后置伪类：selector::after{…}