层叠样式表（CSS）讲义（精）

1、概念

层叠样式表（CSS）
Cascading Style Sheets
[kæˈskeɪdɪŋ]
语义解释：
1、每个样式有一个或多个属性
2、样式可以级联追加
3、后面相同的属性，覆盖前一个

2、简单语法

新名词

声明块{
属性：属性值
...
}

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

导入css
import

适当缩进使 CSS 更具可读性
简写

顺时针🔃
//top、right、bottom、left。 
padding: 10px 15px 15px 5px;
//等同于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

3、数值和颜色

像素px 绝对单位
mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
pt, pc: 点（Points (1/72 of an inch)），十二点活字（ picas (12 points.)）

相对单位
em 缺点 em单位会继承父元素的字体大小
1em = 16px

rem 旧版ie支持不好。不会继承
百分比：

动画效果

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

p:nth-child(1) 位置

opacity: 0.5; 不透明度

颜色
16进制：#ff0000
rgb ： rgb(255,0,0)

hsl：hsl(0,100%,50%);//旧版IE不支持
//增加透明度
rgba: rgba(255,0,0,0.5);
hsla: hsla(240,100%,50%,0.5);

色调，饱和度，明度
色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。
饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90% - 15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

4、盒模型(Box_model)

width和height:设置内容框宽度和高度
padding:内边距
border: 边界
margin: 外边距

溢流：overflow(溢出)
auto : 隐藏，滚动可见
hiden:隐藏
visible:溢流内容显示边界外（默认）

背景剪裁 background-clip
轮廓 outline

css框类型 <span>
block 块框
inline 行内框
inline-block 行内块状框

涉及属性
控制框盒中内容流的属性
overflow
控制框盒大小的属性
height width
max-height min-height
max-width min-width
控制外边距 Margin 的属性
margin
margin-top
margin-bottom
margin-left
margin-right
margin-trim
控制内边距 Padding 的属性
padding
padding-top
padding-bottom
padding-left
padding-right
其他属性
visibility

5、FlexBox(弹性盒子)

section {
display:flex
}

flex模型

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为** main start** 和** main end**。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和** cross end**。
设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。
flutter 线性布局采用flexbox