- CSS
- 概念:Cacading Style Sheet 层叠样式表
- 动静分离(独立的js文件)
- 内容和表现分离(独立的css文件)
- HTML页面中嵌入CSS样式的方式
行内样式 <tag style=””></tag>(不推荐使用)
内部样式 <head>
< style>
</ style>
</head>(也不推荐使用)
外部样式 创建独立的css文件 xxx.css 与html页面同名
<head>
< link rel=”stylesheet” type=”text/css”href=”path”/>
</head>
- 选择器
基础选择器
id选择器 #name{...} name必须具有唯一性
Class选择器 .name{...} 重用,组合使用(主流)
Tag选择器 tagName{...} tag必须为标签名,同名标签自动响应不需要调用
行为伪类选择器
悬浮伪类:选择器:hover{...} 鼠标进入
点击伪类:选择器:active{...} 鼠标左键单击
结构伪类
前置伪类:选择器::before{}
后置伪类:选择器::after{}
- 样式
文字样式:font:12px/1.2 arial,”microsoft yahei”; 1.2:1.2倍行距
文字类型: font-style:italic
文字的粗细: font-weight:bold;
文字的大小: font-size:int px ; 正文字体大小12~14之间
字族: font-family;arial,”宋体”;
文本样式
文本颜色: color:color-word/可以控制透明度rgb[a](0~255,”,”,[0-1])/#000000~ffffff;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/justfy(两端对齐);
文本溢出: text-overflow:elipsis(省略);
文本换行: white-space:wrap/nowrap(不允许换行);
列表样式 list-style:none url(path)inside;
列表图标: list-style-type:none;
列表图片: list-style-image:url(../imgs/xxx)
列表图片的位置: list-style-position:outside/inside; li=>overflow:hidden;
盒子模型
宽: width:intpx;
高: height:intpx;
边框样式: border
圆角
Border-radius;int px;
阴影
Box-shadow:offest-x offest-y int px color;
内边距 padding:intpx 嵌套(父子)关系用内边距
外边距 margin:intpx 并列(兄弟)关系用外边距
盒子类型box-sizing:content-box/border-box
内容盒子(默认盒子类型)content-box
宽度:左右外边距+左右边框宽度+左右内边距+内容宽度
高度:上下外边距+上下边框宽度+上下内边距+内容高度
边框盒子border-box
宽度:左右外边距+内容宽度
高度:上下外边距+内容高度
背景样式
Background-color:背景颜色
Background-image:int path
Background-position:
相对位置:
水平: left/center/right
垂直:top/center/bottom
绝对位置:
水平: intpx;
垂直:intpx;
Background-repeat;
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:左对齐
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:两两等间距
Body内二维 top/right/bottom/left z-index越大越近
定位:position 标准文档流 偏移 z轴
静态(默认二维):static 是 否 否
相对定位:relative 全部是 参考的是原有的固定位置
绝对定位:absolute 否 是 是
(参考其父辈的定位元素,否则参考body)
固定定位:fixed 同上 (参考的是浏览器窗口)
其他:
Cursor:pointer; 修改鼠标的图标类型为手
定位
四边或四角:
Val 同值
Val val2 上下边/左上右下角 左右边/右上角左下角
va1 val2 val3 上边/左上角 左右边/右上角左下角 下边/右下角
Val1 val2 val3 val4 都不同
盒子类型转换 行内>行内块>块
Display:
Inline: 行内元素
inline-block: 行内块元素
block: 块元素
none: 隐藏
flew: 弹性盒子
关于两个居中
文字在父容器中的水平垂直位置
水平: text-align:left(默认)/center/right/justify
单行文本垂直: height:xxxpx;
Line-height:xxx px;
盒子在父容器中的水平垂直位置
水平:子盒子:margin: 0 auto;
垂直:父盒子:pdding:npx 0 ;