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