HTML笔记之CSS样式（其三）

前面学习到的HTML标签相关知识，基本都属于页面的结构与布局，好比女娲造人，第一步是捏好了泥人。所以CSS层叠样式表就好比给泥人添上精致的五官和好看的衣裳。

CSS层叠样式：用于设置HTML文档的样式及布局，CSS的编写方式有三种：
第一种：直接在标签内通过style=“css样式属性”；
第二种：在head标签一对style标签里编写；
第三种：通过<link rel=“stylesheet” href=“CSS的路径”，将CSS写在一个.css后缀的文件中。
这三种方式区别在于是否能够复用，显然第一种写在标签内部，只对本标签生效，如果其他标签要使用同样的样式，那么就需要再写一遍；所以第二种方式在head中编写，通过选择器就能够让本页面的标签轻松的复用相同样式；第三种则是在第二种上更广一些，编写在css文件中，通过link引入可以使多个页面复用样式表。

上面在样式复用里提到了选择器，CSS 选择器规定了 CSS 规则会被应用到哪些元素上。
选择器如何选择元素，说明了在HTML中元素是有层级的，如果说html根元素是第一层级，那么head、body元素就是第二层级。也可以说head、body是html（html是父元素）的子元素，那么head、body中的div、span之类的子元素又会是html孙子元素；所以元素的关系就有：父子关系（直接关系），后代关系（间接关系）。

选择器的分类：

标签选择器
语法：elementname
例子：div{样式属性} 匹配页面所有 <div> 元素

类选择器
按照设置标签的 class 属性的值，选择所有匹配的元素
语法：.classname
例子：.tab{样式属性}匹配所有 class 属性为 "tab" 类的元素

ID 选择器
按照 id 属性选择一个匹配的元素。需要注意的是同一个文档中，每个 ID 属性都应当是唯一的
语法：#idname
例子：#index{样式属性} 匹配 ID 属性为"index" 的元素

分组选择器：
通过“，”（逗号） 是将不同的选择器组合在一起的方法
语法：A, B
示例：div, span{样式属性} 会同时匹配 <span> 元素和 <div> 元素

后代组合器
通过“ ”（空格）选择父元素的后代元素
语法：A B
例子：div span{样式属性} 匹配所有位于任意 <div> 元素之内的 <span> 元素

直接子代组合器
通过> 组合器选择父元素的直接后代元素
语法：A > B
例子：ul > li{样式属性} 匹配嵌套在 <ul> 元素内的所有 <li> 子元素，不会选择到孙子层级

伪类
官方给出的解释：伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
我给出的解释：动态，触发，追加事件的特殊选择器
语法：A:
例子： a : hover{样式属性}鼠标悬停会触发此CSS样式

以上就是常见的基础选择器

CSS层叠样式属性

宽和高：
 width：xx px; 或者xx%；
 height：xx px；
重点：块级标签才会应用高和宽，行内默认无效，px为像素单位

颜色：
color：red 或者 RGB颜色，字体颜色
background-color：red 或者 RGB颜色，背景颜色
background-img：url（图片路径），背景图片

边框：
border：xx px  solid：边框颜色，或者transparent透明边框
边距：
内边距：padding ：xxpx，padding-top内上边距，padding-left左，padding-right右，padding-bottom下
外边距：margin：xxpx，四个方向同上。
重点：内边距和边框是属于容器本身，它们的所有像素单位会累计，所以会导致所占区域变大。
也就是内边距和边框的像素会算入容器面积，外边距则不会。
我们的body默认有外边距，通过设置外边距margin：0 去掉外边距， 等于margin 0 0 0 0 ：上 左 右 下 (默认)

字体：
字体大小font-size：xx px；
字体加粗font-weight：xx；
字体font-family：学习中一般不会去设置，实际开发中会使用自研或者购买过版权的字体

显示方式：重点，前面说到了块级元素才能设置宽和高，通过下面这个属性可以改变它们的结构：
display：inline-block，使其具有行内和块级标签属性，作用是不仅可以设置高和宽，同时不再独占一整行。
在特殊情况下我们会希望行内标签独占一整行，块级标签不占一整行，于是：
display：inline，可以将块级元素设置为行内元素。
display：block，可以将行内元素设置为块级元素。

浮动：
float：left或者right ，使标签向左或者向右浮动起来。效果：使元素在父元素中靠左或者靠右显示
重点：如果使用float使得元素浮动起来（官方说法叫脱离文档流），无法应用样式属性，需要使用clear：both清除，有两种方式：
第一种多写一个要浮动的标签 在其内部styl中写上clear：both。
第二种通过伪类：after{clear：both}追加，学过Bootstrap后可以直接在class中加上clearfix，clearfix的原理就是通过伪类实现的。

文字对齐：
水平方向text-align：center；
垂直方向line-height：xx px，通过父元素的像素高度居中

设置透明度:
opacity：0-1 之间的浮点数

定位：重点
position：fixed：针对整个浏览器窗口固定，一般常见于页面广告，呼叫客服，返回顶部之类的功能
position：relative和absolute：相对和绝对；
这两个属性基本上是配合使用，在需要定位的元素父元素中使用relative，在定位的元素上使用absolute；
意思是，这个使用absolute绝对定位的元素，是针对父元素的所在位置和大小，与页面无关。

z-index：页面的层叠索引，越大级别越高，在一些遮罩场景使用。

简单介绍下Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
引入<link rel=“stylesheet” href=“bootstrap-3.4.1/dist/css/bootstrap.css”

方法是通过设置class的属性使用 Bootstrap 中的模板，
参考https://v3.bootcss.com/components/#btn-dropdowns

下面是我a标签加入了btn按钮类中，效果：


学习Bootstrap没有什么技巧，用多了就熟悉了。

其中比较重要的栅格系统：栅格系统用于通过一系列的行（row）与列（column）的组合（class类）来创建页面布局。栅格系统中的列是通过指定1到12的值来表示其跨越的范围，例如：三个等宽的列可以使用三个 .col-xs-4 来创建。作用是替开发者快速划分页面布局。

响应式：根据页面大小会自动调整，开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
    .col-sm-     .col-md-    .col-lg-(不常用)
非响应式：不会根据页面自动调整，总是水平排列
    .col-xs-

匆忙中整理的一篇笔记，如有错误欢迎指正。