鸿蒙应用开发-学习-第一章-CSS布局(盒子模型)

求求你别卷啦

已于 2024-01-04 11:50:59 修改

阅读量1.5k

点赞数 26

文章标签：学习 css 前端 harmonyos 笔记 html

于 2024-01-02 15:22:00 首次发布

本文链接：https://blog.csdn.net/weixin_50991227/article/details/135330957

版权

Tips：这个只是作者的学习笔记，仅作参考

盒子实际大小(算上padding和border)计算公式

案例练习:新浪导航

5.外边距(margin)

一.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>

效果如下: