2018-11-10

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
 
<style>
    html ,body{
    margin: 0;
    height: 100%;
}
</style>
 
<body>
 
</body>
</html>

在都能实现的情况下,margin优于position使用,padding优于margin使用

定位 position

 position:absolute;

名称	方式	偏移
absolute	生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位(建议父必须定义非默认值的position);	元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定;
fixed	生成绝对定位的元素, 相对于浏览器窗口进行定位;	元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定;
relative	生成相对定位的元素, 相对于其正常位置进行定位;	因此, “left:20” 会向元素的 LEFT 位置添加 20 像素;
static	默认值; 没有定位, 元素出现在正常的流中	（忽略 top, bottom, left, right 或者 z-index 声明）;
inherit	规定应该从父元素继承 position 属性的值;	无

布局 flex

2009年, W3C提出了一种新的方案—-Flex布局, 可以简便, 完整, 响应式地实现各种页面布局; 目前, 它已经得到了所有浏览器的支持, 这意味着, 现在就能很安全地使用这项功能;

Flex是Flexible Box的缩写, 意为”弹性布局”, 用来为盒状模型提供最大的灵活性;

任何一个容器都可以指定为Flex布局;

弹性布局默认不改变项目的宽度但是它默认改变项目的高度
弹性布局默认左对齐

属性名	描述	取值
`display`	定义容器作为Flex容器	`flex`, `inline-flex`
`flex-direction`	定义主轴的方向	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	定义如何换行	`nowrap`, `wrap`, `wrap-reverse`
`justify-content`	定义主轴上的元素如何分布	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	定义交叉轴上的元素如何对齐	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	定义多轴线的对齐方式	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch`
`order`	定义项目的排列顺序	整数值，值越小越靠前
`flex-grow`	定义项目的放大比例	非负数，默认为0
`flex-shrink`	定义项目的缩小比例	非负数，默认为1
`flex-basis`	定义项目占据的主轴空间	长度值或关键字 `auto`
`flex`	`flex-grow`, `flex-shrink`, `flex-basis`缩写	`none` 或三个值的组合
`align-self`	定义单个项目在交叉轴上的对齐方式	`auto`, `flex-start`, `flex-end`, `center`, `baseline`, `stretch`

display 属性

Flexbox 布局最简单表单

取值	描述	示例
`block`	元素显示为块级元素，前后产生换行，宽度填充父容器。	`display: block;`
`inline`	元素显示为内联元素，不产生换行，宽度由内容决定。	`display: inline;`
`inline-block`	元素显示为内联块级元素，不产生换行，可以设置宽高。	`display: inline-block;`
`none`	隐藏元素，不可见且不占用空间。	`display: none;`
`table`	元素显示为块级表格。	`display: table;`
`table-cell`	元素显示为表格单元格，需与 `table` 或 `table-row` 一起使用。	`display: table-cell;`
`table-row`	元素显示为表格行，需与 `table` 一起使用。	`display: table-row;`
`flex`	启用弹性布局，元素成为弹性容器。	`display: flex;`
`inline-flex`	启用弹性布局，元素成为内联弹性容器。	`display: inline-flex;`
`grid`	启用网格布局，元素成为网格容器。	`display: grid;`
`inline-grid`	启用网格布局，元素成为内联网格容器。	`display: inline-grid;`
`list-item`	元素显示为列表项，前面有项目符号。	`display: list-item;`
none 此元素不会被显示;
block 此元素将显示为块级元素, 此元素前后会带有换行符;
inline 默认; 此元素会被显示为内联元素,元素前后没有换行符;
flex 是一种布局方式; 它即可以应用于容器中, 也可以应用于行内元素;
flex-direction 容器内元素的排列方向(默认横向排列)
flex-direction:row; 沿水平主轴让元素从左向右排列
flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
flex-direction:row-reverse;沿水平主轴让元素从右向左排列
inline-block

.box{
  display: flex;
}
 
/*行内元素也可以使用Flex布局; */
.box{
  display: inline-flex;
}

flex 属性

Flex 属性即是定义display: flex的容器 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items //属性定义项目在交叉轴上如何对齐。 [一般水平的主轴（main axis）] align-content //属性定义了多根轴线的对齐方式。[一般垂直的交叉轴（cross axis）]

flex-direction 主轴方向

flex-direction 属性(默认是x) row（默认值）: 主轴为水平方向, 起点在左端; row-reverse: 主轴为水平方向, 起点在右端; column: 主轴为垂直方向, 起点在上沿; column-reverse: 主轴为垂直方向, 起点在下沿;

align-items 单轴

flex-start: 交叉轴的起点对齐; flex-end: 交叉轴的终点对齐; center: 交叉轴的中点对齐; baseline: 项目的第一行文字的基线对齐; stretch (默认值): 如果项目未设置高度或设为auto, 将占满整个容器的高度;

justify-content 多轴

justify-content属性 justify-content属性定义了项目在主轴上的排列方式;

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）: 左对齐 flex-end: 右对齐 center: 居中 space-between: 两端对齐, 项目之间的间隔都相等; space-around: 每个项目两侧的间隔相等; 所以, 项目之间的间隔比项目与边框的间隔大一倍;

align-items: 另一轴 (如果主轴是x, 即是y) flex-start: 交叉轴的起点对齐; flex-end: 交叉轴的终点对齐; center: 交叉轴的中点对齐; baseline: 项目的第一行文字的基线对齐; stretch（默认值）: 如果项目未设置高度或设为auto, 将占满整个容器的高度;

align-content: 定义了多根轴线的对齐方式, 如果项目只有一根轴线, 那么该属性将不起作用

flex-start: 与交叉轴的起点对齐; flex-end: 与交叉轴的终点对齐; center: 与交叉轴的中点对齐; space-between: 与交叉轴两端对齐, 轴线之间的间隔平均分布; space-around: 每根轴线两侧的间隔都相等; 所以, 轴线之间的间隔比轴线与边框的间隔大一倍; stretch（默认值）: 轴线占满整个交叉轴;

flex-wrap 换行

flex-wrap 属性 nowrap（默认）: 不换行; wrap: 换行, 第一行在上方; wrap-reverse: 换行, 第一行在下方;

flex item 属性

Flex 项目（flex item）属性即是它的下一级的所有子容器

以下6个属性设置在 item 上。

order //order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 flex-grow //flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-shrink //flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis //flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 flex //flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 align-self //align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex-grow 占位权重

flex-grow flex-grow属性定义项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大; 如果所有项目的flex-grow属性都为1, 则它们将等分剩余空间（如果有的话）; 如果一个项目的flex-grow属性为2, 其他项目都为1, 则前者占据的剩余空间将比其他项多一倍; in short 类似占位权重, 值越大它的占用空越大

**有时候无效? **

lex-grow重点说明落在剩余这两个字上，父元素剩余的空间，那什么算父元素剩余空间呢，简单的理解就是(父元素的宽度-子元素总和的宽度)，这里有两种情况：

(1)子元素没有设置宽度：那么整个父元素的宽度就是剩余宽度，这个时候flex-grow可以正常的发挥作用，但是在这种情况下的效果是一个伪分配，因为子元素没有设置宽度，那么子元素的宽度是自适应的，flex-grow起到的作用更像是min-width的作用，一旦子元素a的内容超过这个分配的空间,那么就会重新计算剩余空间,剩余空间=(父元素的宽度-子元素a的宽度),这个剩余宽度就会交给剩下的子元素进行分配，如果剩下的又发生以上的情况，计算依旧。如果直接设置width:100%，那么当前的子元素宽度总和已经超过父元素宽度，那么此时此刻flex-grow就无效了，因为没有剩余空间了。于是在这个时刻，就按照(子元素/子元素宽度总和)超出部分*依次给每个子元素减少宽度，也就是设置100%的话就是等分宽度，设置其他宽度的话按照公式自行计算即可

(2)子元素设置了宽度:如果子元素有宽度，那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素，这个时候flex-grow的作用就像是实实在在的width一样，给子元素增加宽度,在这种情况下的得到的效果就是一个无法改变的分配好的宽度，即使你子元素a的内容超出了分配好的宽度，也不会影响宽度分配情况，你只能用overflow来更好地美观一下啊，而这个就是我们希望的到的分配效果。

给每一个子元素加上width:0。这样整个父元素的宽度就是剩余宽度，然后进行分配flex-grow，这个时候加上去的宽度就是实实在在的width。

flex-shrink 挤压

flex-shrink属性

flex-shrink 属性定义了项目的缩小比例,默认为1, 即如果空间不足, 该项目将缩小;

如果所有项目的 flex-shrink 属性都为1, 当空间不足时, 都将等比例缩小; 如果一个项目的 flex-shrink 属性为0, 其他项目都为1, 则空间不足时, 前者’0’不缩小;

菜鸟教程弹性布局（display:flex;）属性详解

布局 float

float是最开始出现的一种布局方式，主要解决：文本在图像周围环绕，也应用于图像。但是在css中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。

元素一般是处于普通流中，也即块级元素独占一行，从上往下依次显示布局。行级元素可以在一行显示多个，按照顺序进行显示布局。

而添加了float布局的元素则会脱离原来所在的文档流。并‘漂浮’在当前所在的文档流的位置（如果前一个元素没有添加float布局的情况下），由于当前元素文档流实际上没有被元素占用，因此当前元素之后的元素会按照普通流布局的方式，占用当前元素的文档流。表现为：丢失空间

添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流，且父盒子没有添加高度属性，那么父盒子无法感知到子盒子的存在，因此父盒子不会被撑开。

清除浮动

采用css clear属性

伪类

属性描述 CSS

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 `<input>` 元素。
:disabled	input:disabled	选择每个被禁用的 `<input>` 元素。
:empty	p:empty	选择没有子元素的每个 `<p>` 元素。
:enabled	input:enabled	选择每个已启用的 `<input>` 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 `<p>` 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 `<p>` 元素的每个 `<p>` 元素。
:focus	input:focus	选择获得焦点的 `<input>` 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 `<input>` 元素。
:invalid	input:invalid	选择所有具有无效值的 `<input>` 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 `<p>` 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 `<p>` 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 `<p>` 元素的每个 `<p>` 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 `<p>` 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个`<p>`元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个`<p>`元素的每个`<p>`元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 `<p>` 元素的每个 `<p>` 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 `<p>` 元素的每个 `<p>` 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 `<p>` 元素。
:optional	input:optional	选择不带 “required” 属性的 `<input>` 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 `<input>` 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 `<input>` 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 `<input>` 元素。
:required	input:required	选择指定了 “required” 属性的 `<input>` 元素。
:root	root	选择元素的根元素。
:target	news:target	选择当前活动的 news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 `<input>` 元素。
:visited	a:visited	选择所有已访问的链接。
w3school - CSS 伪类

滚动条

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

/** 整个滚动条.**/
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}
/**滚动条上的按钮 (上下箭头).**/
::-webkit-scrollbar-button{}
 
/**滚动条上的滚动滑块**/
::-webkit-scrollbar-thumb {
    min-height: 150px;
    min-width: 150px;
    background: rgb(207, 207, 207);
    border-radius: 10px;
}
/**滚动条没有滑块的轨道部分**/
:-webkit-scrollbar-track-piece {
    background-color: rgb(244, 244, 244);
    margin: 0px;
}

动画

CSS 动画

CSS选择器优先级

ID 选择器, 如 #id{} 类选择器, 如 .class{} 属性选择器, 如 a[href=“segmentfault.com”]{} 伪类选择器, 如 :hover{} 伪元素选择器, 如 ::before{} 标签选择器, 如 span{} 通配选择器, 如 *{}

盒模型 box-sizing

box-sizing: content-box; box-sizing: content-box | border-box | inherit

标准盒模型的 width 组成：content（不包含 padding 和 border）

默认值是content-box, 你给一个div的宽度设为200px，那这个div实际的宽度其实是200px再加上padding和border的值（和是大于等于200px的）。元素的总高度和宽度包含内边距和边框(padding 与 border) :

#example1 {
  box-sizing: border-box;
}

计算 calc()

calc() 函数用于动态计算长度值;

需要注意的是, 运算符前后都需要保留一个空格, 例如: width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 ”+”, ”-”, ”*”, ”/” 运算; calc()函数使用标准的数学运算优先级规则;

相对单位 vw vh rem %

px px是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。
em em为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。
rem rem为相对单位，相对于<HTML> 元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，<HTML>元素设置了字体尺寸为24px，那么2rem就代表48px。
vw和vh vw和vh是相对单位，相对于当前视口。例如，10vw代表当前视口宽度的10%，20vh代表当前视口高度的20%。
% %是相对单位，相对于父元素的相关尺寸。例如，父元素设置了height: 100px，那么它的子元素height: 50%就代表50px。

一些坑

absolute 定位和float 布局, 可以让其父元素无法检测高度而塌陷; 包裹性: 将一个容器设置为position:absolut;属性, 则会将其中的内容包裹住, 大小随着内容大小而变化

Quartz 4

Explorer

N_CSS 常用开发