CSS
CSS(Cascading Style Sheet): 层叠样式表,控制网页的样式.选择器区分大小写.
- 通过选择器来定位DOM(文档对象模型)的元素,将各种样式规则应用在元素上,改变元素在页面上的显示方式
- 使用方式: 内联样式 + 内部样式 + 外部样式
盒模型
- 标准盒模型 = content +border + padding +margin
- IE盒模型 = content(content + border + padding) + margin
- 空间 = padding(内边距) + margin (外边距) + border (边框)
块级元素/行内元素
- 块级元素: 默认宽度是100%,块级元素会自动从新的一行开始.div table h1-h6 p form ol section canvas audio video
- 行内元素: 和其他元素在同一行,宽度/高度时内容的宽度和高度,内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变 a span b img input select strong
BFC(块级格式化上下文)
- 块级格式化上下文,是一个独立的渲染区域,让处于BFC内部的区域与外部的元素相互隔离,使内外元素的定位不会影响.在IE下为layout,可通过zoom:1;触发.
- 计算BFC容器的高度时,浮动元素也会参与计算.容器内的Box会在垂直方向上一个接着一个放置.两个相邻的box的margin会发生重叠.
- 触发BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;
层叠上下文
在三维空间.z轴高出普通元素.- 触发条件: html ,position, flex, transform opacity filter will-change
- 层叠等级:在同一层叠上下文中,层叠等级才有意义. background-color < z-index: -1; < 块级元素 < 浮动元素 < 行内元素 < z-index: 0 /auto; < z-index: 1;
颜色与单位
- 十六进制: hex使用6个十六进制编码来表示颜色,2个一组,分表表示红(R),黄(G),蓝(B).
- hsl色彩: hsl(60,100%,50%)
- RGB颜色
- px em rem %
布局
- 文本对齐方式: text-align: left/right/center/justify;
- 盒阴影: box-shadow: offset-x offset-y blur-raduis spread-radius;
- 透明度: opacity: 0.7;
- 字母的大小写: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
- 方向: top left right bottom;
-
定位: position: relative(元素的定位参照于最近的已定位祖先的元素) absolute fixed ;
相对定位不会受到top/left/right/bottom影响.
- 堆叠顺序: z-index: 10;
- 显示: display: table/inline-table/tbale-row-group/table-cell;
- 变换 transform: scale(2) skewX;
- 轮廓 outline-width: thin /medium / thick / length /inherit;
- 圆角 border-radius: 25px;
字体
color: orange; font-family: "Verdana"; font-size: 16px; font-style: normal italic oblique; font-weight: 400; text-transform: none/lowsercase/uppercase/capitalize; text-decoration: none underline overline line-through; text-align: left right center; line-height: 20px ;
列表
list-style-type:none disc circle square decimal lower-alpha upper-alpha
背景
background-color: green; background-position:left center;background-size: 120px; background-repeat: no-repeat;background-iamge:url(''); 动画
- 列表项目
选择器
伪类选择器:link :hover :active :visited 基础选择器: 标签选择器,类选择器,ID选择器,通配符选择器 组合选择器: 标签指定式选择器 后代选择器 并集选择器 属性选择器: 通配符: *预编译语言
CSS的预编译语言:基于CSS语言的语法扩展,支持嵌套的书写,拥有继承机制,
SaSS
SaaS是对CSS的扩展,允许使用变量,嵌套规则,混合,导入等功能且完全兼容CSS语法.
- 变量: $basiccolor: green;
- 嵌套: ul{padding:0; li {margin:0;}}
- 导入: @import url('s')
- 注意SASS中list列表的索引从i开始.
- 混合代码在选择器前面加上@mixin classname {} 引用时div { @include classname;}
Flex布局
Flex布局父元素
display: felx | inline-felx; flex-direction: row | row-reverse | column | column-reverse; 决定主轴的方向 felx-wrap: nowrap | wrap | wrap-reverse; 主轴如何换行 felx-flow: row nowrap; justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | felx-end | center | baseline | stretch; align=content: felx-start | felx-end | center | space=between | cpace-around | stretch; 多跟轴线的对齐方式,只有一条时不起作用.
Flex布局子元素
order: 0;项目的排列顺序,数值越小,排序越靠前,最小为0.flex-grow:0;项目的放大比例.flex-shrink:1;flex-basis: 350px;flex: 0 1 auto;align-self: auto | felx-start | flex-end | center | baseline | stretch;