非常全的HTML+CSS+JS学习记录（八：CSS盒子模型）

已于 2022-06-14 17:44:56 修改
阅读量229 收藏
点赞数 1
分类专栏： 前端 文章标签： css css3
于 2022-03-19 21:49:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_YJX/article/details/123435643
版权

这里写目录标题

盒子模型

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
不懂的可以搜一下：在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框的复合写法</title>
    <style>
     div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */
            /* 边框的复合写法 简写:  */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框的练习</title>
    <style>
        /* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
            /* border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue; */
            /* border包含四条边 */
            border: 1px solid blue;
            /* 层叠性 只是层叠了 上边框啊 */
            border-top: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

下面的边框语句会把上边的覆盖掉。

在这里插入图片描述
1.4就是为了避免正常设置的时候，边框和边框重合形成1+1=2那种更粗的效果。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }
        th {
            height: 35px;
        }
        table,
        td, th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table align="center" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

其中 table,
td, th 这三个经常写在一起
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;


        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例

在这里插入图片描述

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
所以不要故意或者犯傻再给加上width等东西了

在这里插入图片描述

在这里插入图片描述
把行内元素和行内块元素看成文字就行。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内元素/行内块元素水平居中对齐</title>
    <style>
      .header {
          width: 900px;
          height: 200px;
          background-color: pink;
          margin: 100px auto;
          text-align: center;
      }
      /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
    </style>
</head>
<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="down.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除内外边距</title>
    <style>
        /* 这句话也是我们css 的第一行代码 */
       * {
           margin: 0;
           padding: 0;
       }
       span {
           background-color: pink;
           margin: 20px;
       }
    </style>
</head>
<body>
   123
   <ul>
       <li>abcd</li>
   </ul>
   <span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>

PS 基本操作（接下一篇）

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
像这样：
在这里插入图片描述
设置块级标签水平居中：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

如何让box盒子水平居中？

.box {
          width: 298px;
          height: 415px;
          background-color:#fff;
          /* 让块级的盒子水平居中对齐 */
          margin: 100px auto;
  }

img标签是行内块标签，必须要设置width:100%

总结：

在这里插入图片描述

(单选题)
如果想让一个有固定宽高的块级元素和一个行内块元素水平排列操作方法正确的是：【C 】

  1. A、将行内元素转为块级元素
  2. B、将行内元素转为行内块元素
  3. C、块级元素转换为行内块元素inline-block
  4. D、将块级元素转换为行内元素
    • C你选对了
懒回顾，半缘君
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2021新版HTML5+CSS3+JS+Vue精细化教程
07-19
2021年新出炉的HTML5+CSS3教程@问题：1、你是不是学完了其他课程还是什么都做不出来？2、你是不是很茫然不知道从哪里开始学习？3、你是不是学历点皮毛缺乏实战经验？@特色：1、理论实操一体化，不仅学会理论，更重要的是会实际操作，避免学了还是不会做的尴尬问题3、每个知识点都设计了符合实际开发的经典案例，通过案例来强化理论知识3、每个章节都有高强度的作业和练习，再也不怕没有案例做，学完不会做4、包含企业开发的所有知识点，一切以企业实战为目标，高强度练习，专为就业而设计5、真实课程、真实内容、真实案例、真实项目、真实价值（19800）@适合人群：1、零基础小白2、没经济实力白嫖党3、零散学习过不够系统化学员4、懂理论不会实际上手操作者5、实习过但是不能参与项目开发者6、有几处巩固基础者@写在最后：学习非一日之功，越厉害的人，背后越努力，选择了就坚持到底，认证学习吧，少年
原生js封装transformCSS.js
拎着壳儿跑的蜗牛
09-16 3850
原生transformCSS.js方法封装 transform属性 CSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后，元素主要可以进行以下变换： 旋转(rotate) 平移(translate) 缩放(scale) 倾斜(skew) 开始transform原生封装 transform函数可以获取 我们自己设置的transform属性 tran...
js中用css定义盒子,JS中的盒子模型
weixin_39586526的博客
08-04 619
前言主要目的：由于目前掌握的获取元素样式的方法十分有限，所以盒子模型主要是用来获取元素的样式的(操作DOM)定义:基于一些属性和方法，让我们能够获取到当前元素的样式信息，例如：clientWidth 、offsetWidth等属性共计13种，分三个系列，分别是：client、offset、scroll。一、client 系列1、clientWidth / Height定义：获取盒子可视区域的宽高(...
利用css + html + js (vue框架)，完成星空+ 旋转盒子特效，配上我周董的BGM（我是如此相信），表白神器
weixin_53399156的博客
08-10 384
PS: 前面做一个简单的铺垫，当BGM 到达高潮的时候，让这个画面缓慢显示出来，效果爆炸。、 星空特效抄的作业，网上大佬的，具体地址忘记了，后来再找没找到，有需要的小伙伴可以留言，
css盒子模型
m0_61255374的博客
01-06 1448
1.什么是盒子模型 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 2.盒子的组成 一个
html5+css3+js写音乐盒子
04-22
该资源适合入门，使用原生js写一个音乐盒子，这个项目属于纯前端项目，没有任何接口，所以特别适合入门学习。并且使用了一些H5新特性，对版本低的ie不兼容
网页布局三大核心之——CSS盒子模型
lflcodeplus的博客
03-15 2743
CSS盒子模型1 盒子模型1.1 网页布局本质1.2 盒子模型（Box Model）组成1.3 边框（border）2 PS基本操作二级目录三级目录3 综合案例二级目录三级目录4 圆角边框二级目录三级目录5 盒子阴影二级目录三级目录6 文字阴影二级目录三级目录 1 盒子模型 1.1 网页布局本质 1、准备好网页相关元素，网页元素基本都是盒子box。 2、利用CSS设置好盒子样式，然后摆放到相应位置。 3、往盒子里面装内容。 1.2 盒子模型（Box Model）组成 CSS盒子包括边框、外边框、内边框和实际
前端开发基础 HTML+CSS+JS
小白典的博客
04-28 9284
HTML介绍 HTML(Hyper Text Markup Language)是超文本标记语言，并不是编程语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令用来说明文字、图像、视频、表格、链接等，目前广泛使用的是HTML5 CSS介绍 CSS(Cascading Style Sheets)是层叠样式表，用来表现HTML文件样式的标准语言。CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局
css盒子模型_css盒子模型之边框宽度，边框颜色与边框样式
weixin_39604685的博客
11-29 666
/* width和height只是设置盒子内容区的大小，而不是盒子的整个大小， 盒子可见框的大小由内容区，内边距和边框共同决定。 */.box1 { /* 设置内容区的宽度为400px */ width: 400px; /* 设置内容区的高度为400px */ height: 400px; /* 设置内容区的背景色为green */ background-color: blueviolet; /*...
HTML+CSS+JavaScript快速入门+实战演练
01-08
文章目录一篇快速入门HTML一篇快速入门CSS一篇快速入门JS演练前要明白的css盒子模型（在后面的例子中经常用到）实战演练—另类登录网页（1）实战演练—另类登录网页（2）实战演练—另类登录网页（3）实战演练—...
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
韩顺平html+css笔记
03-15
2013笔记轻松搞定网页设计html+css+javascript 内容介绍 该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容： 1、html详解； 2、css(块级元素、行内元素、标准流...
前端开发三件套HTML&CSS&JavaScript
02-23
5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM 4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局
不看后悔系列：史上最全的设计模式总结，在Github上已被标星89K
+W❤：bjmsb2019
09-26 894
前言 说到设计模式，第一次听说时，头脑一热，完全不知道是什么意思？后来就去各处搜集：设计模式（Designpattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 有过工作经验的人都知道，特别是那些在维护一个项目的人更是体会的贴切，像我就是其中一个，有的时候，一个很简单的需求，或者说，本来应该是很快就可以实现的需求，但是由于系统当初设计的时候没有考虑这些需求的变化，或者随着需求的累加，系统越来越臃肿，导致随便修改一处都可能造成不可预料的后果，或者是我本来可以修改下配置文件或者
Html5的js2,HTML5 + CSS + JS（2）
weixin_42097208的博客
06-17 91
HTML5 + CSS + JS二、CSS层叠样式表是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML (标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 目前最新版本为 CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样...
CSS实现一个雨滴滑落效果
云加速
05-28 1394
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
vue使用tailwindcss
最新发布
Haveyounow的博客
06-01 412
【代码】vue使用tailwindcss。
更改Web网站设计——css和css框架
2301_81968528的博客
06-01 397
如果使用CSS设置背景色，文字颜色，元素配置，即使是相同的HTML文件，在外观上也会产生很大的变化。也可以将CSS的内容写进HTML文件，但是为了保持结构与设计样式，大多数情况下都应该将它们保存在不同的文件中。将它们分开就可以一次性设置多个HTML文件的设计样式。虽然使用css来编写代码可以创建出非常漂亮的设计样式，但是初学者要实现一个格式统一设计是比较困难的。因此，可以使用无须从零开始设计，可以简单利用按钮和表单等设计元素的CSS框架。虽然使用HTML可以定义文章的结构，但是其中不包含设计相关的信息。
css实现一个炫酷动画loading(四)
weixin_45389051的博客
05-31 549
【代码】css实现一个炫酷动画loading(四)
html+css+js制作页面
06-02
2. 编写 CSS 文件：使用 CSS 选择器和属性设置页面的样式和布局，比如设置字体、颜色、背景、边框、盒子模型等。 3. 编写 JavaScript 文件：使用 JavaScript 语句实现页面的交互效果和动态功能，比如实现表单验证、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒回顾，半缘君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值