这是我参与「第五届青训营」笔记创作活动的第2天

CSS是什么？

JavaScript (行为)	•Cascading Style Sheets用来定义页面元素的样式
CSS(样式）	设置字体和颜色设置位置和大小
HTML(内容)	添加动画效果

在页面中使用CSS

不推荐内联

选择器∶class类，id （唯一），属性，伪类

组合 (Combinators）

名称语法说明示例

直接组合 AB 满足A同时满足B Input:focus

后代组合 A号选中B，如果它是A的子孙 nav a

亲子组合 A>B 选中B，如果它是A的子元素 section>p

兄弟选择器 A~~B 选中B，如果它在A后且和A同级 h2~~p

相邻选择器 A+B 选中B，如果它紧跟在A后面 h2+p状态伪类，结构伪类

alpha途明度

字体font-family

调试css∶右键选择检查

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

不能继承时，可以使用inherit，也就是显式继承

初始值

CSS中，每个属性都有一个初始值

background-color的初始值为 transparent

margin-left的初始值为0

可以使用 Initial关键字显式重置为初始值

background-color:Initial

布局 (Layout) 是什么？

•确定内容的大小和位置的算法

•依据元素、容器、兄弟节点和内容等信息来计

块级VS.行级

块级	行级
Block Level Box	Block Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、helght不适用

行级排版上下文

•Inline Formatting Context(IFC)

•只包含行级盒子的容器会创建一个IFC

•IFC内的排版规则

·盒子在一行内水平摆放

·一行放不下时，换行显示

·text-allgn决定一行内盒子的水平对齐

·vertical-allgn决定一个盒子在行内的暑直对齐

·避开浮动(float)元素

Flex Box是什么？

•一种新的排版上下文

•它可以控制子级盒子的：

·摆放的流向(→←↑↓)

·摆放顺序

·盒子宽度和高度

·水平和垂直方向的对齐

·是否允许折行

flex

flex:1 flex-grow:1

flex:100px fiex-basis： 100px

flex:21 flex-grow:2;flex-shrink:1

flex:1 100px fiex-grow:1;flexbasis:100px

flex:20100px flexgrow:2;flex-shrink:0;flex-basis:100px

flex:auto flex:11auto

flex:none fiex:00auto

position 属性

static 默认值，非定位元素

relative 相对自身原本位量偏移，不脱高文档流

absolute 绝对定位，相对非 static祖先元素定位

fixed 相对于视口绝对定位

position: relative

在常规流里面布局

·相对于自己本应该在的位置进行偏移

•使用 top、left、bottom、right设量偏移长度

流内其它元素当它没有偏移一样布局

position:absolute

•脱离常规流

•相对于最近的非 static祖先定位

不会对流内元素布局造成影响

学习CSS的几点建议

•充分利用 MDN和W3C CSS 规范

·保持好奇心，警用览器的开发者工具

持续学习，CSS新特性还在不断出现

理解 CSS | 青训营笔记