阅读量:0
1.盒子模型的边距概念 )
Margin-top 上面
Margin-bottom 底部
Margin-right 右边
Margin-left 左边
Margin : 10px （上下左右都是10px）
Margin ：10px,20px (上下边距10px 左右20px)
CSS里面最重要的属性之一 将页面理解成一个一个子模块构成 网页可以理解为N个模块构成的整体.。 同外边距对应的是内边距对应的padding 一个是对外的显示控局 一个是对内的显示控距
2.background 系列概念
为了测试边框的对比度 一般使用 background-color:XXX 颜色检查对应模块的显示效果 。如果是仿站 需要用到浏览器的取色工具 #ffffff 类似这种格式的颜色码。偶尔的时候，为了使用方便，我们可以设置成red blue 这样直接区分。
Background-image.
3.font 系列概念 网页里面主要是字体概念
font-szie 样式内部 字体的大小 一般16px 是我们常看的大字 14px是我们网页默认的标准大小格式。如果不做特殊说明，字体默认都是14px 符合我们默认看网页的习惯
Font-weight 字的粗细 这个地方可以填数字700，也可以填bold ，如果只是要普通的效果，忽略该值。该值对数字的变化不明显， 按照区间变化，也就是549和400 没区别 550和700也没区别 前者是普通 后者就是黑体字里面
Font-family 这个是字体风格样式 如果没有特殊指定，使用浏览器默认字体即可，如果有指定，需要在全局里面声明对应的字体样式
4.边框概念 border
只要有盒子，就会有边框，有边框就会有各种属性。目前比较热门的几个属性
Border-radios：10px 盒子边上的四个角的锐化程度 基本现在盒子模型都是柔和有个弯曲的渐变，所以该属性非常重要
Border-style 边框线的风格控制 实线/虚线之类的控制。
有了上述四个背景知识，已经可以制作简单的手机屏幕网页，正常的CMS里面的新闻列表页面还有通知页面。特殊的属性 height width 属性 auto的时候，只自动填充100%，可以自动伸缩，如果写了具体的数字，就是控制对应的缩放，这点在自适应里面不是很常用。
简单思路:
整体一个大div 模块，设置对应的背景。然后每个列表里面都有小的div 会自动换行。以新闻列表为例子复习:
.xinwena {
margin-top: 20px;
padding-top: 10px;
height: auto;
width: auto;
padding: 20px;
}
.xw_list {
margin-bottom: 10px;
margin-right: 20px;
padding: 5px;
background-color: #ffffff;
border-radius: 10px;
.title {
font-size: 16px;
font-weight: bold;
text-align: left;
}
}
（2）样式之外
1.样式的种类 外部样式（引入一个外部文件，加载到页面，方便维护）通用的推荐做法
内部样式 （写在body外 以<style>标签里面的样式 有时候为了方便会写点）
内联样式 直接在模块地方 style=”” 开始的 如果样式相同情况下 会覆盖掉其他的样式，很少使用
在普通的HTML开发里面 引用外部css
<link rel="stylesheet" href="xxx.css"/> 这样完成对外部的引用，在vue里面
@import '../../assets/css/xxx.css'; 这样就将CSS引入到了页面里面
外部样式的主要好处:css的统一管理，可以节省掉大量重复的元素代码，更换页面统一风格的时候，直接修改统一文件就完成了修改。
2.样式的嵌套相关逻辑
理论上 .home{.nav{ .img{}}} 可以这样无限嵌套下去，但是嵌套有个很大的问题，就是你写的这个样式无法被你写的这个分支复用，如果其他分支需要用到你这个模块的样式，需要重新写一份。
而且有时候为了方便区分 使用的是
.home .nav .img {} 这样的格式书写，非常容易区分 在简单的项目开发里面，循环嵌套，很容易导致自己看不清自己的定义的结构标记到哪个地方了。
3.图片或者模块并列排序的说明 在很多情况下，我们需要将A|B模块并列处理
使用display:flex布局 很容易居中对齐 （在前一节也实现过）这里是再次复习居中对其概念，非常好用。而且还支持
居中对齐：无论是水平还是垂直方向，Flexbox 都可以很容易地实现居中对齐
