华清远见重庆中心-HTML+CSS技术总结

Web

一个网页由三部分组成：

1. 结构：结构用于对网页元素进行整理和分类（HTML
2. 表现：表现用于设置网页元素的版式，颜色，大小等外观样式（CSS
3. 行为：行为是指网页模型的定义及交互的编写（Javascript

其中html和css组合成了一个网页的整体外观

在其中我觉得最重要的部分是对于网页整体元素的布局

布局

按照页面的设计，进行页面区域的划分

布局方法有四种：

1. div +css 布局：div 用于划分功能区域 ， css设置元素大小和位置
2. table 表格布局，使用表格对页面进行区域划分 
3. flex 弹性盒布局：按照主要轴盒交叉轴方式进行元素排列
4. gird 栅格 网格 布局：将页面按行列

其中关于flex弹性盒布局是我最为喜欢的一种

通过在父子元素上分别设置样式就可以轻松得到自己想要的布局

Flex

通过父元素上写display:flex 来开启flex功能

让元素通过主轴和交叉轴来排列

在父元素上

规定主要轴 
默认情况，主要轴就是横轴
待选项：

1. row: 默认值，规定横向为主轴
2. column: 规定纵向为主轴
3. row-reverse: 规定横向为主轴，同时反向
4. column-reverse: 规定纵向为主轴，同时反向

例如：

flex-direction: row;//规定主要轴为横轴

设置换行方式

待选项：

1. wrap: 换行
2. nowrap: 不换行
3. wrap-reverse: 换行且反向

例如：

flex-wrap: wrap;//如果一行内元素放不下了便会换行，如果不设置会让元素被压缩

定义元素在主要轴上的排列方式

待选项：

1. flex-start: 对齐主轴起始点
2. flex-end: 对齐主轴结束点
3. center: 在主轴上居中
4. space-around: 每个子元素两侧的间隔相等
5. space-between: 两端对齐，中间平均分布
6. space-evenly: 平均分布

例如：

justify-content: flex-start;

定义元素在交叉轴上的排列方式

待选项：

1.  flex-start: 对齐次要轴起始点
2. flex-end: 对齐次要轴结束点
3. center: 在次要轴上居中居中
4. baseline: 根据子元素中的文本进行文本高度对齐
5. stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器

例如：

align-items: flex-start; 

在子元素上

排序order：数值   数字越小越靠近主要轴的起始位置 

主要轴上没有铺满时 设置flex-grow的元素会填满剩余区域 
 flex-grow 的值代表撑宽之后的元素 占主要轴大小的比例值，数字越大比例越大

设置元素在flex容器中的宽度或高度

待选项：

1.  0: 不设置元素宽或高
2. auto: 元素本身的宽或高
3. 其他长度: 设置元素宽或高，优先级高于width或height

 设置子元素在交叉轴上的排布方式

待选项

1.  flex-start: 对齐次要轴起始点
2. flex-end: 对齐次要轴结束点
3. center: 在次要轴上居中居中
4. baseline: 根据子元素中的文本进行文本高度对齐
5. stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器

例如：

 align-self: flex-end; 

虽然没有写完，但通过以上元素设置，加上一些定位的运行，完成一个简单的页面布局设置是没有太大的问题的。

让div横向排布通过使用flex是我认为最好用的办法了

一个web网页的美观与否，离不开页面元素布局，在其中使用flex方法对于元素来排列是我认为最为常用的方法。