css实用入门
css也精炼了解以下内容即可：
一个网页所呈现出来的画面，你可以理解他们就是由一个又一个的盒子拼凑组成而来。
一个盒子，它有外边距，还有内边距。
黑色的部分是盒子本身的样子，外侧蓝色的部分是外边距，内侧绿色的部分是内边距。
1、边框border
实际开发里代码这样写：
(这种写法属于是很简写的了）
ce Title
这里的px数值就是盒子黑色边框线的粗细，px值越小，线越细，反之则越大。solid是实线，dotted和dashed是虚线，两者虚线的样式有略微不同。
2、外边距：margin
3、内边距：padding
这里设置了一个100px，所以盒子被撑大了。
4、阴影。box-shadow，再详细的属性可以去菜鸟里去看。还有一些设置弧度的border-radius：20px;之类的
5、box-sizing属性下的border-box（设置一个标准的盒状模型）
这样想要设置的边框和内边距的值就是包含在width内的。
比如width设了100px，border为1，padding是10.那么盒子里的内容就是100-1-10=89px;
如果你不理解这里是什么意思，无脑设置box-sizing:border-box;这是最简单的一种布局方式，在全局生效。
一般这样写：
step1：新建一个叫global.css的文本，让所有的新表，所有的元素都设成了一个盒子模型。
step2、引入global.css，link就是引入外部文件的意思。
如果你不想这些元素超出这个盒子，写上这个属性：overflow:hidden;就是把超出这个盒子的部分给隐藏起来。
本来的样子：
隐藏了之后：
FLEX布局（弹性布局）
如果没有加flex布局的话，就是垂直排列。
这里的margin如果连写的话是上右下左，如果没写的话就为0。（顺时针）
显示如图：
但是加了flex布局之后就是水平排列
显示如图：
一共有6个属性，
属性一：flex-direction （方向）
其中的flex-direction，如果在div中直接写flex-direction:column,
flex-direction:column"> ...
column就是纵向排列,显示如下：
也可以横向排列，代码：
...
显示效果如下：
flex属性二：flex-wrap（如果在一个div内放了多个盒子，那么这些盒子的显示效果就会被挤压）
加上flex-wrap:wrap;这个属性之后就不会挤压，然后会自动分行了。
代码如下：
属性三：justify-content（默认默认是flex-start这个属性：即是从最左边到最右边去排列。）
再看一个属性flex-end：从右往左排列：
用的最多的还是center（居中排列）
space-beteween（两端对齐）
space-around（等分间距）
利用以上的知识去模拟一下豆瓣网首页
将其分为三个盒子
1、豆瓣网 2、输入框 3、读书、电影、同城...等等
属性四：align- items
因为文本框和输入框之间的显示高度是不同的，所以如果不加align-items属性的话，它就显示会是这个样子，逼死强迫症患者。
align-item一共有五个属性
代码：在代码最外侧添加align-item属性。
豆瓣网
现在做了顶部的样子：
实现代码如下：
flex布局
豆瓣网
读书
电影
音乐
属性五：position（绝对定位）
有些元素比如span标签是不能随意移动的，但是用position定位可以移动。
代码如下：
效果如下：
tips:
配图：千图网；