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。
盒模型
-
dispaly: block形成一个块框，元素特点：
- 处于常规流中时，如果
width没有设置，会自动填充满父容器 - 可以应用
margin/padding - 在没有设置高度的情况下会扩展高度以包含常规流中的子元素
- 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
-
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较大的元素会覆盖较小的一个。
网友评论