CSS入门笔记1CSS: Cascading Style Sheet, 层叠样式表。由挪威人Hakon Wium Lie

本文主要内容

CSS概述
CSS语法
文档流与排列
CSS盒子模型
CSS基本单位

CSS概述

CSS: Cascading Style Sheet, 层叠样式表。由挪威人Hakon Wium Lie于1994年提出，CSS的作用是将网页内容和显示样式分开，提高了网页的显示效果。CSS的特点是层叠，包括样式层叠，选择器层叠，文件层叠

CSS的意义

使数据和显示分开，HTML提供数据，CSS提供样式
降低网络流量
使整个网站视觉效果一致
提高开发效率，一个样式在一百个页面上显示，HTML要写100遍，CSS只用写一遍

CSS的版本

CSS 1 - 1996年
CSS 2 - 1998年
CSS 2.1 - 2004～2011年使用最广泛的版本（IE支持）
CSS 3 - 1999年开始起草现代版本，分模块（IE8部分支持）
CSS 4 - 分模块升级

CSS是艺术，需要用感性思维理解CSS，所见即所得。

CSS重点：盒子模型，布局，定位

## CSS语法

语法1

选择器{
	属性名: 属性值;
	Key: Value;
	/*注释*/
}

举例：

p{color: red;}

解释：

实际就是键值对
选择器代表页面上的某类元素，后面跟大括号
一个属性的多个值用空格隔开

注意事项：

区分大小写
没有 // 注释
最后一个分号可以省略，但建议不要省略
浏览器不会报错写错的地方，会直接忽略

语法2

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
    语法一
}

注意事项：

@charset必须放在第一行
前两个@语法必须以; 结尾
charset意思为字符集，但"UTF-8"是字符编码encoding，因为历史遗留问题

CSS样式表

CSS代码放在哪里比较合适

行内样式表

某个标签内采用style属性，只针对此标签有用，如:

<h1 style="color: blue; background-color: yellow;">Hello World!</h1>

内嵌样式表

在<head>标签内加入<style>标签，范围针对此页面，可对单个页面进行统一设置，如：

<style>
  p {
    color: red;
  }
</style>

外部样式表 - 引入外部css文件
1. 采用<link>标签，如：<link rel = "stylesheet" type = "text/css" href = "styles.css"></link>
2. 采用import，必须在<style>标签中，必须是第一句，如：

<style type="text/css">
@import url("styles.css");
</style>

外部样式表中不能写标签，可以@import语句

文档流与排列形式（Normal flow and display）

元素在文档流内常见的排列形式

inline display:inline
block display:block
inline-block display:inline-block

流动方向

inline元素从左到右，直到最右边换行，会跨行
block元素从上到下，一个元素占一行
inline-block元素也是从左到右，但不会跨行

inline

inline宽度为内部inline元素的和，不能用width指定
inline高度由line-height行高间接确定，不能用height指定

block

block宽度默认为width: auto;，可用width指定
block高度由内部包含的文档流元素高度的和决定，可以设置height

inline-block

inline-block结合以上两种特点，默认宽度为内部元素的和，但可用width指定
inline-block与block类似，可以设height

注意事项

inline元素尽量不要包含block元素
inline的高度不仅由line-height决定还可能受字体样式影响（行盒）
block默认宽度不是100%
元素排列类型可以任意改变
排列类型可分为
- inner-display，如：flex，grid 决定其包含的子元素的排列方式
- outer-display，如：inline，block，决定元素本身与同级元素之间的排列方式

溢出（overflow）

设置的宽度或高度低于包含的文档流元素时，内容会溢出（overflow）
可用overflow设置是否显示滚动条：

overflow: visiable;显示溢出内容
overflow: hidden;隐藏溢出内容
overflow: scroll;永远显示滚动条
overflow: auto ;灵活显示滚动条，溢出时显示，不溢出不显示
其他不常用设置：overflow-x，overflow-y

脱离文档流

block高度由内部包含的文档流元素高度的和决定，有些元素可以不在文档流中，block高度不受其影响。

脱离文档流的方法：

float，如float: left;
position，如position: absolute;

CSS盒子模型{#}

组成：

Content box
Padding box
Border box
Margin box

两种盒模型

content-box
width，height定义content box的宽高
width=content-box width
border-box
width，height定义border box的宽高
width=content-box width + padding * 2 + border * 2

常用border-box模型，设置页面中所有元素为border-box：

* {
  box-sizing: border-box;
}

Margin collapsing（margin合并）

上元素的bottom-margin与下元素的top-margin会重叠
父子元素上下margin会合并
左右margin不合并
阻止父子合并
- 设置 padding/border
- overflow: hidden
- display: flex

margin值可为正可为负

CSS基本单位

长度单位：

px 像素
em 相对字体的倍数
百分数
整数
rem
vw / vh

颜色：

十六进制，如：#FF6600
RGBA颜色，如：rgb（0，0，0）或rgb（0, 0, 0, 1）
hsl颜色，如：hsl(360, 100%, 100%)

CSS入门笔记1