Web前端开发入门学习笔记之CSS 57-58--新手超级友好版- 盒子模型以及边框线应用篇

server/2025/1/12 6:24:38/

   Foreword写在前面的话:

  大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便我能不断学习和进步。同时,我也会在文章中注明参考的资料,以示对原作者的尊重。

PS:本帖以记录学习心得和课堂笔记为主,没有其他大博主那么专业,但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取,喜欢的小伙伴可以多多点赞+关注呀!后续会 持续更新相关资源的~

  课程学习资源:根据b站‘前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址:前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员_哔哩哔哩_bilibili

第五十七课-盒子模型

盒子模型:布局网页,摆放盒子和内容

原代码和效果图:

使用盒子模型(内容和盒子边缘之间加距离-padding属性)

发现已经不是顶格内容了而且盒子被撑大了(padding会在盒子的四个方向上添加内边距拉开内容与盒子的距离)

此时加上bd    border加边框线

加上外边距margin

div标签是独占一整行的

这里是看inspection中的计算样式可以看到盒子模型的各个组成部分

padding内边距:出现在内容与盒子边缘之间

margin外边距:出现在盒子外面,拉开俩个盒子之间的距离。

第五十八课-盒子模型-边框线

属性值空格隔开。

修改前的代码以及效果:

点线的边框线效果dotted:

虚线dashed:

同时可以修改边框线的px更改大小

同时我们也可以设置当方向的边框线bd

bdt bdr bdb bdl简写

效果以及代码展示:

最后,感谢每一位阅读这篇文章的朋友,你们的反馈对我来说非常宝贵。如果有任何问题或建议,请随时告诉我。让我们一起学习和进步吧!如果您喜欢我的内容,别忘了点赞和关注哦,我会定期分享更多有价值的信息。


http://www.ppmy.cn/server/157685.html

相关文章

SpringBoot开发—— SpringBoot中如何实现 HTTP 请求的线程隔离

文章目录 1、Servlet 容器与线程池管理1.1 线程池的作用1.2 线程池的配置 2、HTTP 请求的线程隔离2.1 请求上下文和会话信息2.2 多线程处理的隔离性 3、 ThreadLocal 和线程上下文隔离3.1ThreadLocal的使用3.2 保证线程隔离性 4、Async异步任务的线程隔离4.1 异步任务的线程池4…

【Redis入门到精通六】在Spring Boot中集成Redis(含配置和操作演示)

目录 Spring Boot中集成Redis 1.项目创建和环境配置 2.基本操作演示 Spring Boot中集成Redis Spring社区也自定义了一套Redis的客户端,与jedis的操作方式有所差异,Spring中把每个类型的操作都单独封装了起来。下面就让我来带大家了解如何在Spring Bo…

python批量删除redis key

生产环境中要禁止使用keys *查询key, 因为redis低版本是单线程,如果key非常多的话,直接使用keys *会导致阻塞,所以应当使用scan命令,scan命令介绍请参考其他文档。 # -*- coding: utf-8 -*- # Time : 2025/01/09 # Author : 养…

常见的http状态码 + ResponseEntity

常见的http状态码 ResponseStatus(HttpStatus.CREATED) 是 Spring Framework 中的注解,用于指定 HTTP 响应状态码。 1. 基本说明 HttpStatus.CREATED 对应 HTTP 状态码 201表示请求成功且创建了新的资源通常用于 POST 请求的处理方法上 2. 使用场景和示例 基本…

25.1.10学习笔记(算法(滑动窗口))

题目:在leetcode上 解释:什么是滑动窗口呢,在这道题里面,子串的长度为k,所以我们就可以将这个子串看为一个窗口,每次去统计窗口里面有多少满足要求,然后进行相关值的加减,滑动就体现在子串的第…

Qt C++读写NFC标签NDEF网址URI

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.1d292c1biFgjSs&ftt&id615391857885 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> #include "QLibrary" …

决策树中的相关概念

目录 算法介绍 基本概念&#xff1a; 节点 信息熵&#xff08;Information Entropy&#xff09; 条件熵&#xff08;Conditional Entropy&#xff09; python中计算对数 分类标准 信息增益&#xff08;ID3&#xff08;Iterative Dichotomiser 3&#xff09;算法的评估标…

ros2笔记- 5.2 python 中手眼坐标转换

本节继续跟小鱼老师学习5.2.先看下需求 相机固定在右上方的camera_link处&#xff0c;机械臂的底座固定在base_link处从base_link到camera_link的位置是固定不变的&#xff0c;瓶子可能是变的。求base_link到bottle_link的坐标关系&#xff0c;方便控制机械臂抓取瓶子。 5.2.1…