石家庄免费网站建设/深圳网络推广优化

CSS主要是用来对html进行加样式。犹如修房子，你首先得到的是清水房，需要对其进行装修；网页也是如此，先写出大概的html，然后通过CSS来加样式、布局等等。说到CSS并非想象中的那么轻松，得有一定的想象力才行，不然你就学不好CSS。下面我们就来具体谈谈CSS有哪些用处。

• CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

• CSS版本

1. CSS2.1使用最广泛的版本（支持IE）；
2. CSS3.0现代版本，分模块（IE8 部分支持）；后再无CSS4.0版，后面都是进行分模块升级的。

• CSS语法

1. 选择器{属性名：属性值 /*注释*/}

注意事项

（1）所有的符号都是英文符号，如果写错了浏览器就会报警；

（2）区分大小写，a和A是完全不同的；

（3）没有//注释；

（4）最后的一个分号可以省略，但是建议不要省略；

（5）任何地方写错了，都不会报错，浏览器会直接忽略。

2. at语法

@charser: UTF-8;
@import URl(2.css);
@media(min-width:100px)and(max-width:200px){语法1}

注意事项

（1）charset必须放在第一行；

（2）前两个at语法必须以分号结尾；

（3）charset是字符集的意思，但UTF-8是字符编码；

• 如何调试

（1）使用W3C验证器；

（2）使用wscode看颜色；

（3）使用wbstorm看颜色；

（4）使用开发者工具看警告；

（5）border调试大法；

• 文档流

（1）inline元素从左往右，到达最右边才会换行；

（2）block元素从上往下，每一个都另起一行；

（3）inline-block也是从左往右，但是他不会把某一个进行同时暂居两行。

注意：实际操作中不存在内联元素和块级元素这一说法。而是根据情况：实际是什么他就是 什么。如：display-inline, display-block.

inline元素宽度是由他里面的所有内联元素合起来的；

block默认自动计算宽度，可用width指定；

inline-block结合两者特点，可用width指定；

inline高度由line-height间接确定的，跟 height无关；

block高度由内部文档流元素决定，可设置 height；

inline-block跟block类似，可以设置height;

• 盒模型

1. content-box：只是以内容为中心的模型；
2. border-box：包含centent padding border;

• CSS布局

float布局（兼容IE9）

步骤：

子元素上加float:left或者right

父元素上加clearfix

注意

clearfix::after{
content:'';
display: block;
clear: both;
}

Grid布局（只兼容最新版浏览器）

container{
display: grid /inline-grid;
}

布置行和列

.container{
grid template-columns: 40px 50px auto 50px; (每一列的宽)
grid template-rows:25px 100px auto; (每一列的长)
}

item可设置范围

grid-column-start:2;
grid-column-end: five;
grid-row-start:1;
grid-row-end:3;

flex布局（不用兼容最新版浏览器）

.container{
display:flex/inline-flex
}

改变items流动方向

主轴

.container{
flex-direction: row;(从左往右)
flex-direction: row-reverse;(从右往左)
flex-direction: column;(从上往下)
flex-direction: column-reverse;(从下往上)
}

改变折行

flex-warp: nowarp;(不折行)
flex-warp: warp;（折行）

主轴对齐方式

.container{
justify-content: flex-start;(往前靠)
justify-content: flex-end;（往后靠）
justify-content: center;（居中）
justify-content: space-between;(元素包围空隙)
justify-content: space-around;(空隙包围元素)
}

次轴对齐方式

.container{
align-items: center;(居中)
align-items: flex-end;(往最下面靠)
align-items: flex-start;(往上顶)
align-items: stretch;(一样高)
}

多行内容

.container{
align-content: flex-start;(往上顶)
align-content: flex-end;(往下顶)
align-content: center ;(空隙包围元素)
align-content: stretch;(元素包围空隙)
}

item的样式

在有多个item时，我们可以用order改变它的排列顺序。

item:frist-child{order:5;} 5
item:nth-child(2){order:0;} 2
item:nth-child(3){order:-3;} 1
item:nth-child(4){order:4;} 4
item:nth-child(5){order:1;} 3
注意：item后的":"没有空格

item上面加flex-grow 控制其元素变宽的

item上面加flex-shrink 控制其元素变窄的

注意：前提是空间不够的情况下才执行；

“1”大家一起变窄；

“0”防止变窄；

flex-basis控制基准宽度。默认为auto。

某一个元素可以独行，直接在这个元素上加align-self。

今天咋们就先讨论在这里，若有哪里总结的不到位的或有误的还望大家指点，下一次继续谈谈定位和动画等等。