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

主要内容

1. 什么是CSS
2. 在页面中使用CSS
3. CSS是如何工作的
4. 继承与布局
5. 调试CSS

什么是CSS

通俗来说CSS是用来定义页面元素样式。比如颜色、字体等等

在页面中使用CSS

• 外部链接

<link rel="stylesheet" href="/assets/style.css">

• 嵌入HTML中

<style> 
    li { 
        margin:0; 
        list-style:none;
    } 
    
    p{ 
        margin: lem 0;
    } 
</style>

• 内联样式

<div style="margin: 10px">test</div>

CSS是如何工作的

颜色RGB

 #8fac87          rgb（25，25，25）

颜色-HSL

Hue（色相取值0-360） Saturation (饱和度0-100%) lightness（亮度0-100%）

font-family 字体

通用字体族 Serif 衬线体 （Geogia、宋体） 
Sans-serif 
无衬线体（Arial、Helvetica、黑体、微软雅黑） 
Cuisive 手写体（Caflisch Script、楷体） 
Fantasy Monospace 等宽字体（ Consolas、Courier中文字体）
英文在前 中文在后 
使用Web Fonts @font-face{ font-family："Magrim"; scr: url(网址) format（‘woff2’）； 00（注意中文字体字体包比较大，适当裁切）

font-size

1、关键词（small、medium、large） 
2、长度（px、em） 
3、百分比（相对于父元素字体大小）

white-space

1、normal 
2、nowrap 强制不换行 
3、pre 保留所有的 
4、pre-wrap 保留空格自动换行 
5、pre-line 合并空格保留换行

继承与布局

继承

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

显示继承

*{
    box-sizing:inherit;
}

html{
    box-sizing:border-box;
}

.some-wideget{
    box-sizing:content-box;
}

布局

什么是布局？

布局是确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算

布局相关的技术

• 常规流-行级、块级、表格布局、FileBox、Grid布局
• 浮动
• 绝对定位

行级&块级

块级元素

生成块级盒子
body、article、div、main、p、ul、li

行级元素

生成行级盒子
内容分散在多个行盒中
span、em、strong、code、cite

调试CSS

1、右键点击页面、选择【检查】 
2、使用快捷键 Ctrl+shift+I(windows) Cmd+Opt+I(Mac)