Docker笔记

简介

语法

选择器 属性声明；

属性声明 = 属性名：属性值；

属性值语法：

比如

margin：[<length>|<percentage>|<auto>]{1,4}

包含三种

1. 基本元素：length percentage auto 这些关键词

2. 组合符号：[|] 这些符号

3. 数量符号：1，4

1 基本元素

• 关键字
  • auto，solid，bold
• 类型
  • 基本类型 length percentage color
  • 组合类型 ‘padding-width’ color-stop
  • 符号 / , 分隔属性值
  • Inherit, initial

2 组合符号

• 空格

  必须有，且顺序固定

• &&

  &&

  必须有，顺序无所谓

• || 双分隔符

  underline||overline

  至少出现一个

• | 单分隔符

  |transparent

  只能出现一个

• []

  优先组合

3 数量符合

• 数量符合 <>

  只能出现一次

• 数量符号 +

  能出现一次或多次

• 数量符合 ？

  可以出现，也可以不出现

• 数量符号 {}

  {2,4} 可以出现4次，最少出现2次

• 数量符合 * 任意次 空格隔开

• 数量符号 # 一次或多次 逗号隔开

@规则语法

@media 设备满足条件，样式才生效

@keyframes 动画中间步骤

@font-face 引入外部字体

私有属性加前缀

选择器

就是表达式，选中想要描述的标签

一、基本选择器

序号	示例	含义	选择器类型	特点
1	*	通用元素选择器，匹配任何元素	通用选择器
2	E	标签选择器，匹配所有使用E标签的元素	标签选择器	控制一类标签
3	.info	class选择器，匹配所有class属性中包含info的元素	类别选择器	控制自定义的一类标签
4	#footer	id选择器，匹配所有id属性等于footer的元素	id选择器	准确
5	[disabled]\	[type=button]	具有某种属性，比如disabled。 id选择器是其特例 #footer{}=[id=button]{}	属性选择器
	~=	属性中包含，类选择器是其特例 .sports{}=[class~=sports]{}	属性
	属性值首尾字符匹配，包含		属性
6	a:visited	标签加状态	伪类

实例：

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

伪类选择器

标签加状态

link，visited,hover,active disabled enable checked

first-child nth-child(even)

only-child

不常见：

伪元素选择器

::first-letter {}第一个元素

::first-line{}第一行

::before {content: xxx}

::after

::selection

组合选择器规则

后代选择器

.xxx p{} 后代包括多级

子选择器

.xxx>p{} 子只有一层

兄弟选择器

h2+p{} 相邻兄弟选择器 选中h2标签后的这个p标签

h2~p{} 通用兄弟选择器 选中h2标签后所有的p标签

选择器分组

逗号分隔开

继承

body{font-family: “xxx”} 会被子元素继承

自动继承的属性

color

font

text

list-style

…

非继承属性

background

Border

Position

选择器优先级

优先级相同就

CSS层叠

优先级：高覆盖低的

相同属性：后面覆盖前面的

不同属性：合并

改变优先级

1. 改变顺序 覆盖

2. 提升选择器优先级 改变选择器的写法 加高优先级 标签变类 类变id

3. !important

   .tip{color: blue !important}

文本

文字形状

文字大小 font-size [number|percentage]

字体 font-family

加粗 font-weight

斜体 font-style

(段落 )行距 line-height 百分比和数字写法的继承关系不一样 数字写法背书关系直接继承

这5个属性可以缩写为font这一个属性

下面两个实例是无效的

文本颜色

color

文本位置

水平对齐text-align:left right center jusitfy

垂直对齐vertical-align: 上标，下标和居中

其他

文本缩进：text-indent

文本格式：white-space 换行是否保留 空格是否合并 自动换行 pre-wrap用的多 保留换行和空格，自动换行

单词换行：word-warp word-break overflow-wrap

文字阴影：text-shadow

下划线：text-decoration

光标形状：cursor

文本溢出：text-overflow

强制继承：属性值inherit

不换行，超出部分用省略号替代

text-overflow: ellipsis;
overflow:hidden;
white-space: nowrap;

盒模型

标准盒模型的长宽属性只作用于content

IE盒模型包括 content + padding + border

margin 边缘 页边空白 margin合并问题相邻合并取大值 父元素和首尾合并

border 边线 :width style color

​ border-width

​ border-style

​ border-color

padding 内衬

content 内容

border-radius 可以设8个值

overflow 盒溢出

box-sizing 我们可以简单的理解，当box-sizing为content-box时，我们使用的是W3C盒模型，当box-sizing为border-box时，我们使用的是IE盒模型

​ content+padding+border

box-shadow 阴影不占空间

outline： width style color 不占空间 border外

详情请看

背景

background-color 颜色 最底层

background-image 图片 先写的在上面

background-repeat 背景平铺

nackground-attachment 背景跟随内容滚动

background-position 背景定位

linear-gradient 线性渐变

radial-gradient 径向渐变

还能加repeat

background-origin: border-box|pading-box|content-box 背景原点

background-clip 裁剪盒子的背景 content padding border

background-size

简写里的两个box是origin和clip 如果只写一个，那么两个box为同一个值

简写

布局

简介

元素的摆放模式

display

设置元素的显示方式

block :块级元素

​ 1 宽度默认为父元素宽度

​ 2 可设置宽高

​ 3 换行显示

​ 默认block元素 div p hx ul form…

inline：行内元素

​ 1 默认宽度为内容宽度

​ 2 不可设置宽高

​ 3 同行显示

​ 4 元素内换行

​ 默认inline元素 span a label cite em…

inline-block 从行内元素修改一下

​ 1 内容宽度

​ 2 可设置宽高

​ 3 同行显示

​ 4 整块换行

​ 默认inline-block input textarea select button

​ vertical-align:middle 垂直居中有问题

none：设置元素不显示，位置没有了,从display的字面意思来理解就是根本就不放上去

​ visibility位置还在

flex: 弹性容器，看下面的flex弹性布局

相关布局模式

块级元素水平居中

<div>
  <div class="content">content area</div>
</div>

.content{margin: auto; width:978px; }
左右外边距为auto就行了

居中导航

容器 text-align:center

里面 display：inline-block

position

设置定位方式

position 设置参照物

​ static 默认

​ relative 相对定位

​ 1 仍在文档流中

​ 2 参照物为元素本身

​ 常用来改变元素的层级

​ 作为绝对定位元素的参照物

​ absolute 绝对定位

​ 1 默认宽度为内容宽度

​ 2 脱离文档流

​ 3 参照物为第一个定位祖先/根元素(html)

​ 用一个相对定位的元素包裹绝对定位的元素

​ fixed

​ 1 默认宽度为内容宽度

​ 2 脱离文档流

​ 3 参照物为视窗

top right bottom left 设置位置

z-index 设置层级

相关布局模式

轮播头图

叠加 父元素relative 子元素absolute

固定顶栏

top-bar{position: fixed}

body{margin-top:xxxpx}

遮罩

盖住页面

.mask{
  position: fixed;
  top:0;
  left:0;
  z-index;999;
  width:100%;
 
  height:100%;
}

三行自适应布局

头尾固定，中间自适应

header{position: absolute;top: 0px;left: 0;width: 100%; height: 100px;background-color: indianred;}
.container{position: absolute;top: 100px;bottom: 100px;left: 0px;right: 0px;overflow: auto;} 没有设置宽高 ，让浏览器来计算
.contents{height: 100px;}
footer{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: lemonchiffon;}

float

none 默认

right

​ 1 默认宽度为内容宽度

​ 2 脱离文档流

​ 3 向指定方向一致移动，移到父元素的边界（不是完全脱离）

float的元素在同一文档流，行内

对元素，脱离文档流；对内容，在文档流

​

clear

应用于后续元素 清除浮动元素对后续元素的影响。float元素从当前父元素浮动出来可能会对父元素后续的元素造成影响。

.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	overflow:hidden;
	visibility:hidden;
}
这里用不可见的.来清除浮动 把浮动的效果控制在父元素内

两列布局

块级元素同行显示

在文档流中

flex

父元素 position:flex 弹性元素是在其文档流中的子元素。不包括position: absolute 和非子后代元素。注意float元素也在文档流中

方向（容器） flex-flow

​ flex-direction 排列方向 row row-reverse colunm column-reverse

​ flex-wrap 是否换行

​ flex-flow 是direction和wrap的缩写

​ order 改变单个元素的排列顺序

弹性（元素）flex

​ flex-grow 分配剩余空间的比例 先计算basis再从剩余空间分配

​ flex-shrink 分配缺少空间的比例 初始值为1，平均分配，为0不分配，也就是不收缩了

​ flex-basis 弹性元素的初始宽（横向排列）或高（纵向排列）

​ 缩写为flex：grow||shrink||basis

对齐（容器）

​ justify-content: 主轴方向的对齐方式

​ align-items: 容器辅轴上的对齐方式

​ align-content：容器 辅轴 多行的行对齐方式

​ align-self：单个元素在辅轴上的对齐方式

三行两列自适应

###

变形

transform

调用变形函数

transform: function()

函数有

rotate旋转

translate移动

scale伸缩

skew倾斜

transform-origin

设定变形原点

perspective

设定人眼的距离来表现透视效果

perspective-origin

设定人眼的角度来表现透视效果

translate3d

加入了z轴的transform

transform-style

backface-visibility

变形之后的背面的可见性

动画

transition

transition-property

产生动画效果的属性

transition-durantion

动画效果持续的时间

transition-timing-function

动画速度变换控制

transition-delay

动画开始延时时间

animation

animation-name

自运行多帧动画

文档流

什么是文档流？

​ 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

​ 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

元素种类

display属性 块级元素 block 行内元素 inline 可以通过css修改

块级可以包含块级和行内，行内只能包含文本和行内
块级占据一整行空间，行内占据自身宽度空间，在同一行里可以放很多
宽高设置、内外边距的差异

块级元素(block-level)

div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
div,标题，表单，段落，列表，表格
块级元素是占据一整行的空间的

行类元素（inline-level）

em strong span a br img 
button input label select textarea
code script
块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本