样式与特效（2）——新闻列表

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 都可以很容易地实现居中对齐