- 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 ;
扫一扫
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
