HTML+CSS(5)

1.CSS Hack

CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

Hack分类

1. CSS属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果

前两个前缀加在属性前面，后面两个加载属性值后面

前缀标识	兼容浏览器
_	IE6
+、*	IE6、IE7
\9	IE6、IE7、IE8、IE9
\0	IE8、IE9、IE10、IE11

2. 选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

前缀标识	兼容浏览器
*html	IE6
*+html	IE7
:root	IE9以上及现代浏览器

3. IE条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式，E10以上已经不支持注释法。

前缀标识	兼容浏览器
<!--[if IE]>...<![endif]-->	IE
<!--[if IE 7]>...<![endif]-->	IE7
<!--[if Ite IE 7]>...<![endif]-->	IE7以下
<!--[if ! IE 7]>...<![endif]-->	非IE7

2.IE低版本BUG

由于旧浏览器在设计上有很多缺陷，所以针对这些问题需要做出兼容处理。

常见兼容问题：

1. 透明度

   IE8及以下版本不识别opacity:0.5;

   filter:alpha(opacity=50); (0-100)

2. 双边距

   有浮动，有margin-left会产生双边距，解决方案，添加 _display:inline;

.box{width: 100px;height: 100px;
	background-color: red;
	margin-left: 50px;
	_display:inline;}

3. 最小高度(IE6下的最小高度BUG，最小高为19px)

   解决方案，添加overflow:hidden;

.box{width: 100px;height: 3px;
	background-color: red;
	overflow: hidden;} 

4. 图片边框
   解决方案 img{border: none;}

3.渐进增强与优雅降级

渐进增强： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

4.网页布局扩展

1. 等高布局（利用margin-bottom负值与padding-bottom正值）

*{padding: 0;margin: 0;}
.parent{border: 10px black solid;overflow: hidden;}
.box1{
	width: 100px;
	background: red;
	margin-bottom: -2000px;
	padding-bottom: 2000px;
	float: left;
	}
.box2{
	width: 100px;
	background: blue;
	margin-bottom: -2000px;
	padding-bottom: 2000px;
	float: right;}

2. 三列布局，左右固定，中间自适应

1. BFC方式
2. 定位
3. 浮动（双飞翼布局、圣杯布局）
4. flex弹性

双飞翼布局: 先写中间部分，然后都设置浮动，左右侧利用margin负值移动到指定位置，让内容利用margin方式固定在中间部分

  *{margin: 0;padding: 0;}
  .header{height: 100px; background: red;}
.container .center{
	height: 200px;
	width: 100%;
	float: left;
	}
.container .center p{
	background: yellow;
	height: 100%;
	margin: 0 150px 0 100px;
	}
.container .left{
	width: 100px;height: 200px;background: blue;
	float: left; 
	margin-left: -100%;
	}
.container .right{
	width: 150px;height: 200px;background: green;
	float: left;
	margin-left: -150px;
	}   

<div class="header"></div>
    <div class="container">
        <div class="center">
            <p>这是内容</p>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

圣杯布局

内容比较简单，不用再创建容器了

    *{margin: 0;padding: 0;}
    .clear::after{content: "";display: block;clear: both;}
    .header{height: 100px;background: red;}
    
    .container{margin: 0 150px 0 100px;background: yellow;}
    .container .center{height: 200px;width: 100%;float: left;}
    .container .left{
 	   width: 100px;height: 200px;background: blue;
   	   float: left;
           margin-left: -100%;
           position: relative;left: -100px;}
    .container .right{
   	   width: 150px;height: 200px;background: green;
           float: left;
           margin-left: -150px;
           position: relative;right: -150px;}

    <div class="header"></div>
    <div class="container clear">
        <div class="center">
            这是内容
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

flex弹性布局

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

垂直水平居中

  #parent{
  	 width: 300px;height: 300px;border: 1px solid black;
 	 margin: 20px auto;
	 display: flex;
	 }
  #box{
  	  width: 100px;height: 100px;background-color: red;
	  margin: auto;
	 }

    <div id="parent">
        <div id="box"></div>
    </div>

作用在flex容器上
1.flex-direction: 用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。flex-direction加在父容器上

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行。但方向和row属性值是反的
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

2. flex-wrap: 用来控制子项整体 单行显示还是换行显示。加在父容器上.

nowrap不会立即溢出，会自己适应宽度，直到里面内容压缩不了的情况下，才会溢出

取值	含义
nowrap	默认值，表示单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

3. flex-flow： 属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开.

4. justify-content： 属性决定了主轴方向上子项的对齐和分布方式。

取值	含义
flex-start	默认值，表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

5. align-items： items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值	含义
stretch	默认值，flex子项拉伸。
flex-start	表现为容器顶部对齐。
flex-end	表现为容器底部对齐。
center	表现为垂直居中对齐。

6. align-content: 可以看成和justyify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
（1）.align-items属性是设置项目在所在行交叉轴方位的对齐方式。
（2）.align-content属性是设置行在容器交叉轴方位的对齐方式。

取值	含义
stretch	默认值，每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度都是50%。
flex-start	表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。
space-around	每一行元素上下都享有独立不重叠的空白空间。
space-evenly	每一行元素都完全上下等分。

作用在flex子项上的CSS属性

• flex-basis与宽度一起写的时候，flex-basis优先级高。剩余空间不足的时候，开始自适应容器了，不一定是指定的值了。
• flex的优先级要高于单一样式（flex-grow）的优先级,如果想要优先级高于默认宽的话，用flex，否则用flex-grow

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
flex-grow	属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵犯的空间就是除去元素外的剩余的空白间隙。默认值为0。
flex-shrink	属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basis	flex-basis定义了在分配剩余空间之前元素的默认大小。
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写。
align-self	align-self指控制单独某一个flex子项的垂直对齐方式。

5.Grid网格布局

Grid布局时一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上	作用在grid子项上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
place-content

作用在grid容器上

1. grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）

有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat() 语法进行简化操作。
2. grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于哪个区

区域划分必须形成矩形才可以，特殊图形不行.

grid-template是grid-template-rows grid-template-columns和grid-template-areas属性的缩写

 .box{width: 300px;height: 300px;border: 1px black dotted;
 	    display: grid;
            grid-template: 
            "a1 a1 a1" 1fr
            "a2 a2 a3" 1fr
            "a2 a2 a3" 1fr
            /1fr 1fr 1fr;
            }

.box div{background-color: red;border: 1px solid black;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}

3. grid-column-gap 和 grid-row-gap

是用来定义网格中网格间隙的尺寸。
grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

4. justify-items和align-items

• justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。

• align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

  place-items可以让align-items和justify-items属性写在单个声明中。第一个针对的是纵向的，第二个针对水平的。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现为水平或垂直居中对齐。

5. justify-content和align-content

• justify-content指定了网格元素的水平分布方式。
• align-content指定了网格元素的垂直分布方式。
• place-content可以让align-content和justify-content属性写在一个CSS声明中, place-content先纵向后横向

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或顶部对齐。
center	表现为水平或垂直居中对齐。
space-between	表现为两端对齐。
space-around	享有独立不重叠的空白空间。
space-evenly	平均分配空白空间。

作用在grid子项上的CSS属性

• span属性表示个数
• grid-area 横向开始位置 / 纵向开始位置 /水平结束位置/垂直结束位置。
• place-self 先纵向后横向

取值	含义
grid-column-start	水平方向上占据的起始位置。
grid-column-end	水平方向上占据的结束位置。（span属性）
grid-row-start	垂直方向上占据的起始位置。
grid-row-end	垂直方向上占据的结束位置。（span属性）
grid-column	grid-column-start + grid-column-end的缩写。
grid-row	grid-row-start + grid-row-end的缩写。
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法。
justify-self	单个网格元素的水平对齐方式。
align-self	单个网格元素的垂直对齐方式。
place-self	align-self和justify-self的缩写。

.box div{background-color: red;border: 1px solid black;
          /*   grid-column-start: 2;
           grid-column-end: 3;
           grid-row-start: 2;
           grid-row-end: span 1 */
           grid-column: 2 / 3;
           grid-row: 2 / 3;
    }

6.响应式布局

利用媒体查询，即media queries,可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

媒体类型

取值	含义
all	用于所有设备。
print	用于打印机和打印预览。
screen	用于电脑屏幕，平板电脑，智能手机。
speech	应用于屏幕阅读器等发声设备。

常见选项：

  媒体类型

 and    not   min-width   max-width 
 orientation:portrait(纵屏) orientation:landscape(横屏)
 <link>

  常见修改样式：display float width

  [注]响应式代码写到要适配的CSS后面

Bootstrap是最受欢迎的HTML CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

特色：
1.响应式布局
2.基于flex的栅格系统
3.丰富的组件和工具方法
4.常见交互使用

点击查看bootstrap4教程

7.sass和less

sass和less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

less官网地址

sass官网地址

语法

• 注释一样，单行注释不会被编译出来，多行会被编译出来
• 变量，插值，作用域 （变量sass采用$,less采用@）
• 选择器嵌套，伪类嵌套，属性嵌套（Sass,less无）
• 运算，单位，转义，颜色
• 函数（内置函数不同，只有SCSS可以自定义函数）
• 混入，命名空间（less）,继承
• 合并，媒体查询
• 条件，循环
• 导入

8.PostCSS

PostCSS本身是一个功能比较单一的工具。它提供了一种方式用JS代码来处理CSS。利用PostCSS可以实现一些工程化的操作。如：自动添加浏览器前缀，代码合并，压缩代码等。

点击进入postcss官网

安装：

1. 安装node环境
2. npm install postcss-cli -g
   postcss src/demo.css -o dist/demo.css -w
   把src文件转到dist文件中，-w是监听
3. postcss.config.js 配置文件
   在src中写一个文件postcss.config.js

常用插件：

进入当前目录文件夹进行安装，即总目录下postcss中

cnpm i autoprefixer安装插件

在postcss.config.js引入插件

Autoprefixer 给样式自动添加浏览器前缀
postcss-import 合并多个css文件 配置文件，然后import引入
cssnano 对CSS进行压缩处理
postcss-cssnext 去处理一些比较高级的CSS语法
stylelint 语法检测的插件
postcss-sprites 自动生成雪碧图

9.CSS架构与文件组织

CSS架构

在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分等问题

首先要对CSS进行模块化处理，一个模块负责一类操作行为。可利用Sass或Less来实现。

下划线命名表示私有，引入的时候可以不写下划线。

文件夹	含义
base	一些初始的通用css，如重置默认样式，动画，工具，打印等。
components	用于构建页面的所有组件，如按钮，表单，表格，弹窗等。
layout	用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等。
pages	放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等。
themes	应用不同的主题样式时，如管理员，买家，卖家等。
abstracts	放置一些如：变量，函数，响应式等辅助开发的部分。
vendors	放置一些第三方独立的css文件，如bootstrap,iconfont。

10.CSS新特性之自定义属性

CSS自定义属性（也称为 CSS变量），在目前所有的现代浏览器中都得到了支持。

• 定义与使用
• 计算
• 默认值
• 作用域

:root{
           --color:red;
           --number:100px;
           --number2:100;
       }
.box{

           --color:blue;
           background-color: var(--color);
           width: var(--number);
           height: calc(var(--number2)*1px);
           font-size: var(--size,100px);
       }

11.CSS新特性之shapes

CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用.

• shape-outside 实现不规则的文字效果环绕 默认none margin-box在margin上面进行环绕 border-box padding-box content-box
• clip-path ploygon(坐标，坐标)绘制图形
• shape-margin 解决间隙

12.CSS新特性之scrollbar

用于实现自定义滚动条样式。

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track

13.CSS新特性之Scroll Snap

CSS Scroll Snap(CSS滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。

scroll-snap-type x mandatory

scroll-snap-align start center end