css 入门+布局与定位

CSS 学习资源

全称：Cascading Style Sheets

• Google: 关键词 MDN
• CSS Tricks
• Codrops

布局与定位

高度与文档流

• div高度由其内部文档流元素的高度总和决定
• 文档流：文档内元素的流动方向
• 文档流核心内容：内联元素从左往右；块级元素从上往下，每个块占一行
• word-break: break-all 设置是否可打断英文单词
• 内联元素中文字对齐方式是通过基线对齐，同时针对不同的字体会自动给到相应的建议行高，该行高可通过 line-height: 100px 手动设置，font-size 可设置文字高度

脱离文档定位

• 用 float 做横向结构：给所有子元素加 float: left 、给父元素加 clearfix
• position: fixed -相对于窗口定位
• position: absolute添加到子元素，position: relative添加到父元素 -相对于父元素定位

使用css做出图形

谷歌关键字 css tricks shape 可查看不同形状做法

图标库查询

谷歌关键字 iconfont 查找矢量图标库，代码应用相关帮助点击此处

CSS 基础框盒模型介绍

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

盒模型

1. dispaly: block 形成一个块框，元素特点：

• 处于常规流中时，如果width没有设置，会自动填充满父容器
• 可以应用margin/padding
• 在没有设置高度的情况下会扩展高度以包含常规流中的子元素
• 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）

2. display: inline 形成一个行内框，元素特点：

• 不会在元素前后进行换行
• margin/padding在竖直方向上无效，水平方向上有效
• width/height属性对非替换行内元素无效，宽度由元素内容决定
• 非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
• 浮动或绝对定位时会转换为block

定位元素

position属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。五个取值：

• static 使用正常的布局行为，此时 top, right, bottom, left 和 z-index 属性无效。
• relative 和 absolute 相对父元素进行绝对定位，参见前文
• fixed 固定定位,不为元素预留空间，针对窗口进行绝对定位。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
• sticky 粘性定位，粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
  示例：{ position: sticky; top: 10px; }
  指在窗口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到窗口回滚到阈值以下。
• z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。