display（显示）是css布局中常用的属性，他的值分别有以下几种（下面列出为常见的几种）
1、block（块级元素）例如以下标签：div、p、form、header、footer、section等
2、inline（行内元素）例如以下标签：span、a等
3、none（没有、不显示）例如以下标签：script *注意：他和visibility（能见度）不同，把display设置成none，不会占据
原本的空间，但是将visibility设置成hidden还会占据空间
4、inline-block（行内块元素）例如以下标签：input、textarea、select等，可以通过它来实现类似网格布局的单行布局 *通过设置浮动float：left可以消除内联间距，通过浮动也可以实现类似行内块的布局，根据需求选择使用
margin（外边距）的值通常为数值、百分比或auto（适中）
BODY{margin:2em}/*所有的margin都设为2em*/
BODY{margin:1em2em}/*上下margin为1em，右左margin为2em*/
BODY{margin:1em2em3em}/*上margin为1em，右左margin为2em，下margin为3em*/
padding同理，都为上右下左。
使用如下代码可以消除border（边框）和padding（内边距）向外增加的宽度
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
通常还会设置所有标签默认的内外边距为0,以及设置基础字体、字号等，这里不多做演示了，设置基础字体是为了消除各个浏览器之间的字体差异
*{
margin: 0px;
padding: 0px;
}
position(位置)同样是css布局中常见属性，他有以下几种值
1、static（静态）它是position的默认值
2、relative（相对）将标签设置position为relative后，设置top、right、bottom、left会使其偏离其正常位置。*比如设置left为-20px，他就会向左移动20px，设置left为20px，他就会向右移动20px
3、fixed（固定）设置一个标签的position为fixed以后，会相对于视窗来定位，无论视窗怎样变化他的位置都是相对固定的，也是通过top、right、bottom、left来进行定位
4、absolute（绝对）它与fixed相似，但他不完全是相对于视窗。将一个标签的position设置为absolute以后，他会寻找附近是否有设置position的标签（static不算），如果有就相对于他进行定位，如果没有就相对于视窗。
标签在使用position的relative、fixed、absolute值时候，会多出一个属性z-index（重叠属性），他的取值为数字，设置的数字大，该标签就会显示在最上层，设置的数字小，该标签就会显示在最下层。（因为标签默认值是0）
5、sticky（粘）设置一个标签的position为sticky以后，就可以通过top、right、bottom、left、来进行定位，如果设置的是top属性，她会向下移动之外，在页面进行滚动的时候还会粘在那里。（尝试一下就懂了）
float（浮动）也是css布局中常用的属性，可用于实现文字环绕图片，他的值为left、right，浮动会使该标签脱离文档流，在浏览器大小发生改变时，可能会使标签发生重叠现象，这时下面标签可以通过clear清除浮动，来将自己完全展示出来 clear取值为left、right、both，也可以通过overflow: auto;清除浮动
css响应式设计：viewport（窗口）
通常移动端对于响应式都会这么写<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。（一般没什么用，因为视窗高度不是固定的）
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
响应式可以通过css3的媒体查询来实现（bootstrap就是通过此法来实现的响应式）：
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
关于网站布局：
内容型网站（淘宝、京东之类的文字较多的）：推荐给定宽度，字体方面直接px固定，当分辨率小于定宽时，使用媒体查询讲定宽改成百分比，并设置最小宽度。字体根据需要通过媒体查询进行更改。
展示型网站（公司主页文字内容相对较少的）：推荐直接百分比。字体可以考虑vw。
移动端网站：推荐宽度百分比。字体vw。
***：移动端推荐一种文字大小的写法‘vw’，使用此单位，会根据视窗的大小改变文字大小，以此实现自适应，例如设置fontsize为10vw，文字的大小就会是视窗的10%，它是css3的一种新写法。
如果想要height：100%生效需要给该标签的父元素一个有效高度值
弹性布局个人理解（不是使用弹性布局就要用到所有属性，根据需求搭配其他布局属性）：
弹性布局包括容器和项目两部分，项目属性觉得一般用不到，这里只介绍容器属性。容器包含横轴和纵轴，有如下属性：
1、flex-direction (元素排列方向)：row(从左往右)默认, row-reverse(从右往左), column(从上往下), column-reverse(从下往上)
2、flex-wrap (换行)：nowrap(不换行)默认, wrap(换行，且往下一行换), wrap-reverse(换行，且往上一行换)
3、flex-flow (以上两者的简写)：flex-direction || flex-wrap
4、justify-content (水平对齐方式)：flex-start, flex-end, center, space-between, space-around
5、align-items (垂直对齐方式)：stretch, flex-start, flex-end, center, baseline
6、align-content (多行垂直对齐方式)：stretch, flex-start, flex-end, center, space-between, space-around
***给一个div固定高度，通过行高可以实现文字水平垂直居中，这里行高必须是实际数字，不能是百分比，还有就是text-align只能写在块元素上，写在内联元素上无效
***fontawesome矢量图大小取决于父类的字体大小
设置水平滚动条属性需要给标签一个最小宽度值，然后overflow-x:auto
通过box-shabox属性可以给标签设置阴影效果
超链接：
1、关于超链接这里，可以使用目标锚来跳转到当前页面的某一位置，只需给该位置标签一个id，在超链接的href属性上写#+id，就可以实现
2、取消超链接的跳转<a href="javascript:;"></a>
*3、关于伪类这里，常用的是a标签的几种状态，link、hover等，也可以给其他标签添加伪类，但要看浏览器是否支持，还有其他伪类属性，因为不常用，就不一一介绍了
！important：
将它加在css属性后面，可以忽略同属性的其他值，例如：div{padding:20px !important;} div{padding:10px;},这样的情况后面的定义的css样式就会被忽略。
关于表单这里，必须给每一个表单元素一个name值，用于将表单数据传递给后端web程序
当文字部分超出标签元素仍向后延伸并不换行的时候给该标签添加如下样式：
word-break:break-all; overflow: hidden;