目录
前言
精读一本书，胜过看N个视频。
这次看的书是：
吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》
17年出版的。
正文
CSS基础介绍：
CSS的定义：
全称：Cascading Style Sheet
中文名：层叠样式表
与HTML的关系：
HTML是骨架，CSS是外观，JS是行为
版本：
CSS1.0、CSS2.0、CSS2.1、CSS3.0共四个版本
其中，CSS2.1是CSS2.0的修订版。
跟HTML4和HTML5的关系一样——HTML5是对HTML4的补充；而CSS2和CSS3也是一样的。
引入方式：
外部样式表：link，在head标签中使用
内部样式表：style，在head标签内使用
行内样式表：行内style，在元素标签内使用
其中，优先级最高的是行内样式表，不推荐使用!important
有些网站（比如说商城的商详页）是先出结构，再加载CSS的，原因是？
CSS选择器：
含义：
选择你要改变的元素，一共有五种选择器。
CSS选择器：
元素选择器、id选择器、class选择器、后代选择器、群组选择器
元素选择器：
直接选中元素，就是元素选择器。
比如说，div { style ... }。
id和class选择器：
id具有唯一性，一个页面只能出现一个同名id，定义和使用都需要加上"#"；
而class允许出现重复，定义和使用都需要加上"."。
理解：id是身份证，class是名。
这跟我们英文学的是一样的，id是身份证的意思，而class翻译是类名。
后代选择器和群组选择器：
后代选择器：选择的是父元素下的某一子元素，这些元素之间是有关联的（要么就是父子元素，要么就是兄弟元素），两者之间使用空格隔开。
群组选择器：选择的是任意两个及以上元素，这些元素之间没有任何关联，两者之间使用逗号隔开。
盒子模型
什么是盒子模型？
一个元素所占据的空间。
怎么理解盒子模型？
页面中的每一个元素都可以看成是一个盒子，并且占据着一定的空间，并且这些盒子会互相影响。
盒子模型的组成：
主要内容：content（内容）、padding（内边距）、border（边框）、margin（外边距）
次要内容：content的width、height
content：
内容区，是CSS盒子的主要构成部分，可以是图片、文本等。
内容区是盒子模型必不可少的组成部分，其他三部分（padding、border、margin）可选。
内容区的三个重要属性：width、height、overflow，宽高不包括padding。
只有块元素才有宽高，行内元素是无法设置宽高的，需要转换类型。
padding：
内边距，指的是内容区和边框之间的空间，可以看成是背景区域。
border：
内外边距的“墙”。
border: width, style, color，可以直接设置边框的粗细、样式（实线、虚线、双线），颜色。
也可以修改直接某一边（上下左右）的边框样式。
margin：
两个盒子之间的距离，使得元素不用紧挨着一起。
margin允许负数值，从而使得两个盒子之间产生重叠的效果。
字体样式
常见的字体属性：
font-family：字体类型
font-size：字体大小
font-weight：字体粗细
font-style：字体风格（斜体）
color：字体颜色
font-family：
常用的字体：
中文：微软雅黑、宋体
英文：Times New Roman、Arial、Verdana
特别注意：
如果字体类型只有一个英文单词，不需要双引号；
如果是多个英文单词或者是中文，则需要加双引号。
多个字体，从左到右顺序进行选择显示，第一个字体库缺失，就第二个，以此类推。
font-weight：
属性值：100-900的整数数值、关键字（normal、lighter、bold、bolder）。
一般都是采用数值的形式，100相当于lighter，400相当于normal，700相当于bold，900则是bolder。
在实际开发中，一般都是使用bold。
font-style：
属性值：normal、italic（斜体）、oblique（斜体）
italic和oblique的区别：不是所有字体都有italic这个属性的，如果不起效果，就是用oblique即可。
在实际开发中，很少使用这个属性。
文字样式
与字体样式的区别：
字体样式：针对文字本身的显示效果，注重个体效果。
文本样式：针对整个段落的排版效果，注重整体效果。
常见的属性：
text-indent：首行缩进
text-align：水平对齐
text-decoration：文本修饰
text-transform：大小写
line-height：行高
text-indent：
前提：p元素的首行是不会自动缩进的
例子：font-size：14px; text-indent: 28px
字体大小是14，而首行缩进的像素值恰好是它的两倍，刚好缩进两个字符。
text-align：
水平方向一般都是left、center、right，没有middle，middle是垂直方向上的。
line-height：
用于控制每行文本的高度，可以实现垂直方向上居中。
但不是行间距，因为它只包含文本的高度，不包含文字的上下间距。
图片样式
图片大小控制：使用width、height属性。
图片边框：border。
图片对齐方式：
水平方向：text-align，一般都是用center这个属性值。
垂直方向：vertical-align。
注意：
1.想要图片居中对齐，应该在其父元素上设置水平居中，而不是img标签上进行设置。
2.vertical-align属性定义的是行内元素或文本相对于该元素的垂直方式，而不是设置该元素的垂直方式。
文字环绕：
在网页布局中，常常需要图文混排的效果。
这个时候，就需要用到Float属性（属性值：left、right）。
注意：
属性值里没有center，属性写在img里，且改变的是图片的位置。
img { float: right }，图片是在右侧，而不是左侧。
列表样式
为什么要学列表样式？
结构和样式应该是分离的。
最常用的属性值：list-style-type：none。
此外，还可以自定义列表符号。
list-style-image: url(图片路径)
不常用，经常用的是iconfont。
超链接样式
超链接在鼠标点击的不同时期有着不同的状态：
默认：字体蓝色，带有下划线
点击时（不松手）：字体为红色，带有下划线 - 一瞬间的事情
点击后：字体为紫色，带有下划线
超链接伪类：
a:link：默认样式，未访问样式。
a:visited：访问后的样式。
a:hover：鼠标经过样式。
a:active：点击激活时的样式（点击的一瞬间）。
注意：必须要按照这样的排序进行设置，否则部分样式可能失效。
常用的伪类：
a:link
a:hover
注意：对于未访问状态，我们可以省略:link，直接写a。
怎么去掉超链接默认的下划线？
text-decoration: none;
鼠标样式：
属性：cursor
常用的属性值：default（默认）、pointer（常用）、text、crosshair、wait、help
背景样式
包含背景颜色、背景图片。
背景颜色：
属性：background-color
属性值：颜色关键字、rgb数值、#十六进制数值
注意：color用于定义文字颜色，background-color用于定义背景颜色。
背景图片：
常见属性：
background-image：背景图片地址
background-repeat：背景图片重复，水平/垂直
background-position：背景图片位置，常用于精灵图，制作动画
background-attachment：背景图片固定
background-position：
属性值：像素值、关键字
注意：要同时设置水平和垂直方向，否则不起效果。
关键字：top / bottom、left/right、center的两两组合共8个，再加上(center, center)即9个。
浮动布局
什么是文档流？
表现为元素在页面中出现的先后顺序。
文档流分为正常文档流、脱离文档流。
什么是正常文档流？
将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右的排列直到该行排满为止。
什么是脱离文档流？
脱离了正常文档流的文档流就是脱离文档流。
怎么算脱离？
使用了Float属性。
Float
CSS布局的最佳利器之一，可以通过浮动来快速灵活地定位页面元素，以达到布局网页的目的。属性值有left和right两个。
注意：
如果给块元素设置浮动，那么宽度不再是独占一行了，而是脱离于文档流，“漂浮”在文档之上，所以也称为浮动。
宽度由内容撑开。
作用：
常用于实现水平方向上的并排布局，两列布局、三列布局、多列布局。
清除浮动：
属性：clear
属性值：left、right、both（常用）
作用：
清除兄弟元素浮动后带来的布局影响。
使用：
我们一般都是在浮动元素后面再增加一个空元素，然后设置clear: both来清除浮动。
其他方法：
overflow：hidden
伪元素
定位布局
浮动布局虽然灵活，但是不易控制。
而定位布局最大的优势就是精准定位。
属性：
position。
四种方式：
固定定位：fixed
相对定位：relative
绝对定位：absolute
静态定位：static（默认）
这四种方式刚好就是position的属性值。
子绝父相
在常见的布局中，如果子盒子采用了绝对定位，那么父盒子就要采用绝对定位，这样才不会产生布局问题，相关内容请查看站内其他文章。
固定定位：
含义：元素被固定不会随着滚动条的拖动而改变位置。
场景：回到顶部按钮
参考对象：浏览器的四条边
使用：四个属性（top/bottom、left/right），下同
相对定位：
含义：元素位置相对于元素原始位置计算而来的
参考对象：元素的原始位置
使用：同上
绝对定位：
含义：精确定位
参考对象：浏览器的四条边
使用：同上
注意：变成绝对定位之后，元素完全脱离文档，附近元素会认为该元素不存在，从而产生了层级（z-index）问题。
总结
在本文中，并没有给出太多CSS属性，去掉了一些不常见的CSS属性。
当然啦，还有很多高级属性都是跟动画相关的，这需要更多时间去学习。
如果仅靠5千不到的文字就能把CSS叙说完，这行业也不会这么卷。
但是这部分的知识，已经足够大部分人去完成一个不错的页面了，或者是应对考试。
精读一本书，胜过看N个视频。
因为视频很多都是讲实操的，但是书本有个完整清晰的脉络，你能够掌握更多基础知识。
就这样吧，咱们下期再见！
2210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
