做网站小程序多少钱,做网站公司高端,可信网站验证服务中心,企业客户信息管理系统1.盒子模型的边距概念 )
Margin-top 上面
Margin-bottom 底部
Margin-right 右边
Margin-left 左边
Margin : 10px #xff08;上下左右都是10px#xff09;
Margin #xff1a;10px,20px (上下边距10px 左右20px)
CSS里面最重要的属性之一 将页面理解成…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-radios10px 盒子边上的四个角的锐化程度 基本现在盒子模型都是柔和有个弯曲的渐变所以该属性非常重要
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 relstylesheet hrefxxx.css/ 这样完成对外部的引用在vue里面
import ../../assets/css/xxx.css; 这样就将CSS引入到了页面里面
外部样式的主要好处:css的统一管理可以节省掉大量重复的元素代码更换页面统一风格的时候直接修改统一文件就完成了修改。
2.样式的嵌套相关逻辑 理论上 .home{.nav{ .img{}}} 可以这样无限嵌套下去但是嵌套有个很大的问题就是你写的这个样式无法被你写的这个分支复用如果其他分支需要用到你这个模块的样式需要重新写一份。
而且有时候为了方便区分 使用的是
.home .nav .img {} 这样的格式书写非常容易区分 在简单的项目开发里面循环嵌套很容易导致自己看不清自己的定义的结构标记到哪个地方了。 3.图片或者模块并列排序的说明 在很多情况下我们需要将A|B模块并列处理
使用display:flex布局 很容易居中对齐 在前一节也实现过这里是再次复习居中对其概念非常好用。而且还支持 居中对齐无论是水平还是垂直方向Flexbox 都可以很容易地实现居中对齐
