鸿蒙应用开发-学习-第一章-CSS布局(盒子模型)
Tips：这个只是作者的学习笔记，仅作参考
目录
一.ps的基本使用
1.通过软件打开设计图
第一步 打开软件
第二步 拖入设计图
第三步 新建项目
点击左上角文件处新建 
2.常用快捷键
ctrl 加 + 键:放大
ctrl 加 + 键:缩小
空格按住不动: 鼠标拖动
标尺:ctrl + r
信息框:F8
清除参考线:ctrl + h
3.常用工具
1.量尺寸
使用鼠标在要测量的图片上拉出需要测量的区域即可,W为宽,H为高
2.吸颜色
左侧取色笔点击后再将鼠标置于要取色的区域,点击后右侧则会出现该颜色.
二.盒子模型
1.什么是盒子模型?
页面中标签都可以看成是一个"盒子",以盒子为视角将网页划分为数个盒子能更方便地进行布局
盒子模型:
CSS中规定每个盒子分别由:内容区域(content),内边距区域(padding),边框区域(border),外边距区域(margin)构成,也就是盒子模型
2.内容区域的宽度和高度
作用:利用width(宽)和height(高)属性默认设置是盒子内容区域的大小
属性:width/height
常用取值:数字+px
代码(CSS)格式(例):
div{
width: 114px;
height: 114px;
}3.边框(border)
单个属性:
| 作用 | 属性名 | 属性值 |
| 边框粗细 | border-width | 数字＋px |
| 边框样式 | border-style | 实线:solid,虚线:deshed,点线dotted |
| 边框颜色 | border-color | 颜色取值 |
代码(CSS)格式(例)
div{
/* 宽 */
width: 114px;
/* 高 */
height: 114px;
/* 边框粗细 */
border-width: 15px;
/* 边框线(虚) */
border-style: dashed;
/* 边框颜色 */
border-color: aquamarine;
}连写格式(快捷键:bd+Tab键):
/* 粗细 实线 颜色*/
border :10px solid red;那么,可以只设置某一方向边框吗?
属性名:border-方位名词(left,right,top,botton)
盒子实际大小计算公式
Tips:width与height是内容的宽高,且border会撑大盒子
盒子宽度=左边框(边框粗细＋内容宽度width＋右边框(边框粗细)
盒子高度=上边框(边框粗细)＋内容高度height＋下边框(边框粗细)
问:盒子被border撑大怎么办?
答:计算多余大小,手动减少内容大小
自动的也行:给盒子设置box-sizing:border-box;属性,浏览器会自动计算多余大小自动删去
box-sizing: border-box;4.内边距(padding)
应用场景:设置边框与内容区域之间距离
常见取值:
| 取值 | 示例 | 含义 |
| 一个值 | padding:10px; | 上右下左都为10px |
| 两个值 | padding:10px 20px; | 上下为10px,左右为20px |
| 三个值 | padding:10px 20px 30px; | 上10px,左右20px,下30px |
| 四个值 | padding:10px 20px 30px 40px; | 上10px,右20px,下30px,左40px |
单方向设置(例为设置左侧15px的边框):
padding-left: 15px;盒子实际大小(算上padding和border)计算公式
Tips:width与height是内容的宽高,且border和padding都会撑大盒子
盒子宽度=左边框(边框粗细)＋左padding＋内容宽度width＋右padding＋右边框(边框粗细)
盒子高度=上边框(边框粗细)＋上padding＋内容高度height＋下padding+下边框(边框粗细)
问:盒子被border和padding撑大怎么办?
答:计算多余大小,手动减少内容大小
自动的也行:给盒子设置box-sizing:border-box;属性,浏览器会自动计算多余大小自动删去
box-sizing: border-box;
案例练习:新浪导航
实现以下效果:(附加题:如果每个导航的字数增加，如何完成效果？)
第一步:打开ps测量盒子长宽,并对所涉及的颜色进行采样
第二步:编写CSS代码,先设置好宽高,字体黑色背景白色,字体居中,向左浮动堆积,设置内间距
.box1{
width: 85px;
height: 41px;
color: black;
background-color: white;
text-align: center;
line-height: 41px;
margin: auto;
float: left;
padding: 0px 10px;
}
:hover{
background-color: #edeef0;
color: #fbbe81;
}编写HTML代码,先link引入css,hr线样式设置,*{margin 0}实现标签间距为0
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪导航</title>
<style>
*{
margin: 0%;
}
</style>
<link rel="stylesheet" href="xinlang.css">
</head>
<body>
<div>
<hr noshade style="background-color: orange; height: 5px; border: orange;">
<div class="box1">设为首页</div>
<div class="box1">手机新浪网</div>
<div class="box1">移动客户端</div>
</div>
</body>效果:
附加题:如果每个导航的字数增加，如何完成效果？
因为上面设置了宽高,所以反而会导致字数增加会撑开盒子,所以干脆直接删掉宽高
只修改CSS部分即可:
.box1{
color: black;
background-color: white;
text-align: center;
line-height: 41px;
margin: auto;
float: left;
padding: 0px 10px;
}
:hover{
background-color: #edeef0;
color: #fbbe81;
}效果图:
5.外边距(margin)
5.1 取值
作用:除了设置边框以外,还可以设置盒子与盒子之间的距离
常见取值:
| 取值 | 示例 | 含义 |
| 一个值 | margin:10px; | 上右下左都为10px |
| 两个值 | margin:10px 20px; | 上下为10px,左右为20px |
| 三个值 | margin:10px 20px 30px; | 上10px,左右20px,下30px |
| 四个值 | margin:10px 20px 30px 40px; | 上10px,右20px,下30px,左40px |
5.2 单方向设置
用法:只给某个方向设置外边距
代码格式(例为左边间距15px):margin-方位名词
margin-left: 15px;应用场景拓展:
| 方向 | 属性 | 效果 |
| 水平方向 | margin-left | 当前盒子向右移动 |
| 水平方向 | mabrgin-right | 当前盒子向左移动 |
| 垂直方向 | margin-top | 当前盒子向下移动 |
| 垂直方向 | margin-bottom | 让下方盒子盒子向下移动 |
5.3 清除默认内外间距
*{
margin: 0%;
padding: 0%;
}5.4 案例练习
需求：根据设计图，通过ps量取数据，代码在网页中完成一致的效果
第一步:先量好实线虚线长度,每行的宽高
第二步:编写h1标签和列表行的样式,border-bottom设置底线,margin-left调整页边距,padding-left调整内边距,因为内边距会撑开空间,所以要把列表行的宽度减少使其与页边距相加=h1标签的宽
CSS代码:
.list{
color: #838384;
height: 46px;
margin-left: 20px;
border-bottom: #8c8c8d dashed;
line-height: 46px;
width: 356px;
padding-left: 20px;
}
.new{
height: 40px;
font-size: 30px;
border-bottom: #929293 solid;
margin-left: 20px;
margin-top: 20px;
width: 376px;
}HTML代码部分:
<title>新闻列表</title>
<style>
*{
margin: 0%;
padding: 0%;
}
</style>
<link rel="stylesheet" href="newslist.css">
</head>
<body>
<h1 class="new">最新文章/New Articles</h1>
<div class="list">北京招聘网页设计，平面设计，php</div>
<div class="list">jquery世界来临</div>
<div class="list">体验javascript的魅力</div>
<div class="list">jquery中的链式编程是什么</div>
<div class="list">网页设计师的梦想</div>
</body>效果如下:
