14-CSS基础-盒模型

最新推荐文章于 2022-07-26 21:47:02 发布
最新推荐文章于 2022-07-26 21:47:02 发布
阅读量1.2k 收藏 28
点赞数 7
分类专栏： HTML+CSS

14-CSS基础-盒模型

 

盒模型

边框属性

  • 什么边框?
  • 边框就是环绕在标签宽度和高度周围的线条
  • 边框属性的格式
  • 连写(同时设置四条边)
  • border: 边框的宽度 边框的样式 边框的颜色;
  • 示例代码

<style>

        .box{

            width: 100px;

            height: 100px;

            background-color: red;

            border: 5px solid blue;

            /*border: 5px solid;*/

            /*border: 5px blue;*/

            /*border: solid blue;*/

        }

</style>

  • 快捷键:
  • bd+ border: 1px solid #000;
  • 注意点:
  • 连写格式中颜色属性可以省略, 省略之后默认就是黑色
  • 连写格式中样式不能省略, 省略之后就看不到边框了
  • 连写格式中宽度可以省略, 省略之后还是可以看到边框
  • 按方向连写(分别设置四条边)
  • border-top: 边框的宽度 边框的样式 边框的颜色;
  • border-right: 边框的宽度 边框的样式 边框的颜色;
  • border-bottom: 边框的宽度 边框的样式 边框的颜色;
  • border-left: 边框的宽度 边框的样式 边框的颜色;
  • 示例代码

<style>

        .box{

            width: 100px;

            height: 100px;

            background-color: red;

            border-top:5px solid blue;

            border-right:10px dashed green;

            border-bottom:15px dotted purple;

            border-left:20px double pink;

        }

</style>

  • 快捷键:
  • bt+ border-top: 1px solid #000;
  • br+ border-right: 1px solid #000;
  • bb+ border-bottom: 1px solid #000;
  • bl+ border-left: 1px solid #000;
  • 按要素连写(分别设置四条边)
  • border-width: 上 右 下 左;
  • border-style: 上 右 下 左;
  • border-color: 上 右 下 左;
  • 示例代码

<style>

        .box{

            width: 500px;

            height: 500px;

            background-color: red;

            border-width: 5px 10px 15px 20px;

            border-style: solid dashed dotted double;

            border-color: blue green purple pink;

            /*border-color: blue green purple;*/

            /*border-color: blue green;*/

            /*border-color: blue;*/

        }

</style>

  • 注意点:
  • 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
  • 这三个属性的取值省略时的规律
  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样
  • 非连写(方向+要素)
  • border-top-width: ;
  • border-top-style:;
  • border-top-color:;
  • border-right-width:;
  • border-right-style:;
  • border-right-color:;
  • border-bottom-width:;
  • border-bottom-style: ;
  • border-bottom-color:;
  • border-left-width:;
  • border-left-style:;
  • border-left-color:;
  • 示例代码

<style>

        .box{

            width: 500px;

            height: 500px;

            background-color: red;

 

            border-top-width: 5px;

            border-top-style: solid;

            border-top-color: blue;

 

            border-right-width: 10px;

            border-right-style: dashed;

            border-right-color: green;

 

            border-bottom-width: 15px;

            border-bottom-style: dotted;

            border-bottom-color: purple;

 

            border-left-width: 20px;

            border-left-style: double;

            border-left-color: pink;

        }

</style>

  • 注意点:
    • 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{

            border: 5px solid red;

            border-right:5px dashed red;

}

内边距属性

  • 什么是内边距?
    边框和内容之间的距离就是内边距
  • 格式
  • 单独设置四条边
  • padding-top: ;
  • padding-right: ;
  • padding-bottom: ;
  • padding-left: ;
  • 示例代码

<style>

        div{

            width: 98px;

            height: 90px;

            border: 1px solid #000;

            background-color: red;

        }

        .box1{

            padding-top: 20px;

            padding-right:40px;

            padding-bottom:80px;

            padding-left:160px;

       }

</style>

  • 同时设置四条边
  • padding: 上 右 下 左;
  • 示例代码

<style>

        div{

            width: 98px;

            height: 90px;

            border: 1px solid #000;

            background-color: red;

        }

        .box1{

            /*padding:20px 40px 80px 160px;*/

            /*padding:20px 40px 80px;*/

            /*padding:20px 40px;*/

            padding:20px;

        }

</style>

  • 注意点:
  • 这三个属性的取值省略时的规律
  • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
  • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
  • 上 右 下 左 > 上 > 右下左边取值和上边一样
  • 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  • 给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

  • 什么是外边距?
  • 标签和标签之间的距离就是外边距
  • 格式
  • 单独设置四条边
  • margin-top: ;
  • margin-right: ;
  • margin-bottom: ;
  • margin-left: ;
  • 示例代码

<style>

  .box1{

            margin-top:20px;

            margin-right:40px;

            margin-bottom:80px;

            margin-left:160px;

        }

</style>

  • 同时设置四条边
  • margin: 上 右 下 左;
  • 示例代码

<style>

  .box1{

            margin:20px 40px 80px 160px;

            /*margin:20px 40px 80px;*/

            /*margin:20px 40px;*/

            /*margin:20px;*/

        }

</style>

  • 注意点:
    • 这三个属性的取值省略时的规律
    • 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    • 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
    • 上 右 下 左 > 上 > 右下左边取值和上边一样
  • 外边距的那一部分是没有背景颜色的
  • 外边距合并现象
  • 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
  • 示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外边距合并现象</title>

    <style>

        span{

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

        div{

            height: 100px;

            border: 1px solid #000;

        }

        .hezi1{

            margin-right:50px;

        }

        .hezi2{

            margin-left:100px;

        }

        .box1{

            margin-bottom:50px;

        }

        .box2{

            margin-top:100px;

        }

    </style>

</head>

<body>

<span class="hezi1">我是span</span><span class="hezi2">我是span</span>

<div class="box1">我是div</div>

<div class="box2">我是div</div>

</body>

</html>

  • margin-top问题
  • 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
  • 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
  • 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
  • 示例代码

<style>

        .big{

            width: 500px;

            height: 500px;

            background-color: red;

            /*不设置边框, big也会被small的顶部外边距顶下去*/

            border: 5px solid #000;

        }

        .small{

            width: 200px;

            height: 200px;

            background-color: blue;

            margin-top:150px;

            margin-left:150px;

        }

    </style>

  • text-align:center;和margin:0 auto;区别
  • text-align: center; 是设置盒子中存储的文字/图片水平居中
  • margin:0 auto;是让盒子自己水平居中
  • 示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>53-盒子居中和内容居中</title>

    <style>

        .father{

            width: 800px;

            height: 500px;

            background-color: red;

            /*文字图片会居中*/

            /*text-align: center;*/

            /*盒子自身会居中*/

            margin:0 auto;

        }

        .son{

            width: 100px;

            height: 100px;

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="father">

    我是文字<br/>

    ![](images/girl.jpg)

    <div class="son"></div>

</div>

</body>

</html>

盒模型

  • 什么是CSS盒模型?
  • CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
  • CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
  • 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

https://i-blog.csdnimg.cn/blog_migrate/cffcd386f05d1fdd657566710e839bd6.webp?x-image-process=image/format,png

  • 示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>48-CSS盒子模型</title>

    <style>

        span,a,b,strong{

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 6px solid #000;

            padding: 20px;

            margin: 20px;

        }

 

    </style>

</head>

<body>

 

<span>我是span</span>

<a href="#">我是超链接</a>

<b>我是加粗</b>

<strong>我是强调</strong>

 

</body>

</html>

  • 盒模型宽度和高度
  • 内容的宽度和高度
  • 就是通过width/height属性设置的宽度和高度
  • 元素的宽度和高度
  • 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  • 高度 同理可证
  • 规律
  • 增加了padding/border之后元素的宽高也会发生变化
    - 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
  • 元素空间的宽度和高度
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  • 高度 同理可证

box-sizing属性

  • CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
  • box-sizing取值
  • content-box
  • 元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box
  • 元素的宽高 = width/height的宽高
  • 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度
  • 示例代码

<!--增加padding/border之后元素宽高会变大-->

<style>

.box1{

    width: 200px;

    height: 200px;

    background-color: blue;

    float: right;

    border: 20px solid #000;

    padding: 20px;

}

</style>

 

<!--增加padding/border之后元素宽不会变大-->

<style>

.box1{

 box-sizing: border-box;

    width: 200px;

    height: 200px;

    background-color: blue;

    float: right;

    border: 20px solid #000;

    padding: 20px;

}

</style>

 

ZLMika
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
前端CSS基础—盒模型
木的又
04-08 693
盒模型基础盒子模型的重要性什么是盒模型盒子的组成部分1.内容2.内边距3.边框4.外边距开发实用技巧1）div的宽高问题2）背景的覆盖问题3）溢出处理4）溢出处理的简单应用 盒子模型的重要性 盒子模型是CSS中最重要的知识点之一，它是一个非常重要的知识点，如果没有理解好盒子模型的概念，那么在以后的网页设计开发中没有办法布局出一个优美的网页，它是你接下来学习布局的基础。 什么是盒模型 盒模型是CSS...
【CSS基础】盒子模型
weixin_42044884的博客
01-25 422
盒子模型概述 盒子模型即 box model，无论是 div、span 还是 a 都是盒子模型。 盒子模型中的区域 Margin（外边距）- 清除边框区域。Margin 没有背景颜色，它是完全透明 Border（边框）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响 Content（内容）- 盒子的内容，显示文本和图像，有 width 和 height 元素的宽度和高度 元素宽度： 总元素的宽度=宽度+左填充+右填充
移动导航图标
cunya6061的博客
09-21 81
Jeremy Keith just wrote a post about mobile navigation icons wherein he talks about the “three lines” icon that Andy Clarke also advocated when he explored the topic earlier. 杰里米·基思(Jeremy Keith)刚刚写...
2.9-CSS基础--盒子模型（上）
我的成长历程
07-26 529
盒子内容区域、内边距区、边框区、外边距区
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型 CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承...
Day05-CSS布局-盒子模型
07-06
在实际项目中，我们可能会遇到盒模型兼容性问题，尤其是当涉及到老版本的IE浏览器时。为了确保跨浏览器的一致性，可以使用`box-sizing`属性来指定元素的盒子模型类型，例如`box-sizing: border-box;`。 总的来说，...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
推选文档HTML-CSS结合-基础讲解PPT.ppt
11-16
* 盒模型：包括内容区域、内边距、边框和外边距 * 布局模型：包括块级元素和行内元素 八、CSS 高级应用 CSS 高级应用包括： * CSS 媒体查询 * CSS 伪元素 * CSS 动画和过渡 本资源摘要信息涵盖了 HTML 和 CSS 的...
浅谈CSS3 box-sizing 属性 有趣的盒模型
12-13
盒模型是CSS布局的基础，由内容(content)、内填充(padding)、边框(border)和外边距(margin)四部分组成。传统上，存在两种盒模型：标准盒模型和IE盒模型。 在标准盒模型中，元素的宽度和高度仅仅指的是内容区域的...
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
“人力资源+大数据+薪酬报告+涨薪调薪”
07-22
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
安装graphviz和pygraphviz
07-22
pygraphviz 是一个Python库，它是Graphviz图形可视化软件的Python接口。Graphviz是一个开源的图形可视化软件，广泛用于创建和编辑有向图和无向图。pygraphviz使得Python开发者能够轻松地创建和操作图形，以及执行图形的布局和可视化。 一、pygraphviz的主要功能 创建和编辑图形：pygraphviz允许开发者通过Python代码来创建图形，包括添加节点、边等元素，并且可以编辑这些元素的属性，如颜色、形状、标签等。 图形布局：pygraphviz支持多种图形布局算法，如dot、neato、circo等，开发者可以根据需要选择合适的算法来优化图形的布局。 图形可视化：pygraphviz可以将创建和编辑好的图形保存为图片文件，支持多种图片格式，如PNG、JPEG等，方便开发者进行展示和分享。
BrainF**k Devlopment Toolkit
07-22
BrainF**k Devlopment Toolkit(BFDTK)，可用于开发BrainF**k程序。
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图）
07-22
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图） 1、使用UC3875为控制芯片； 2、NCP1253为辅助电源设计，输出12V，给控制芯片供电； 3、UC3845做BOOST升压控制，实现市电整流升压到400V； 4、全桥拓扑设计结构； 5、后级输出同步整流设计； 6、过压硬件保护电路； 7、过流硬件保护电路； 8、提供原理图、PCB图；
毕业设计javajsp大学兼职信息网sqlserver-qp源码含文档工具包
07-22
毕业设计javajsp大学兼职信息网sqlserver-qp源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 （1）网站前台功能： A、信息搜索功能（分类检索） B、用户登录、注册 C、查看发布兼职信息 D、预定兼职 E、个人简历的编辑（也可以上传自己制作的简历） F、用户投诉 G、留言版 H、新闻公告（职场资讯） I、职场攻略（包含面试技巧以及简历指导） （2）管理员后台功能： A、用户信息管理
磁力链,Magnet2Torrent - 磁力链转种子利器
07-22
磁力链,Magnet2Torrent —— 磁力链转种子利器
mvn install jar in repository
07-22
maven将jar包安装到本地仓库的小工具，可批量导入，需配置好JAVA_HOME和MAVEN_HOME环境
巴比达内网穿透.docx
07-22
内网穿透，也被称为内网映射或NAT穿透，是一种网络技术，旨在实现位于不同局域网（内网）中的设备通过公网（外网）进行相互通信。以下是关于内网穿透的详细介绍： 一、定义与原理 定义：内网穿透是一种技术手段，通过该手段，内网（如公司局域网、家庭网络）中的设备能够被外网（如互联网）上的其他设备访问。 原理：内网穿透技术通常依赖于地址和端口的转换，以及在某些情况下，利用反向代理或隧道技术来打破内外网络的壁垒。具体来说，它可以将内网的IP地址和端口映射到公网上的一个地址和端口上，使得外网设备能够通过这个公网地址和端口来访问内网设备。 二、实现方式 内网穿透可以通过多种方式实现，包括但不限于以下几种： 端口映射：在路由器或防火墙上设置端口映射规则，将公网上的某个端口映射到内网设备的某个端口上。这种方式较为简单，但通常需要路由器具有端口映射功能。 反向代理：在内网中设置反向代理服务器，该服务器负责接收外网的请求，并将其转发到内网的目标设备上。反向代理服务器还可以处理内网设备对外网设备的响应，并将其转发回外网设备。 内网穿透软件：使用专门的内网穿透软件（如Frp、Ngrok、花生壳等），这些软件通常
CSS盒模型详解：基础教学与关键应用
首先，课程从CSS基础讲起，包括如何通过行内样式、内部样式表（如标签）和外部样式表（如.css文件）在网页中嵌入CSS规则。此外，讲解了文字排版的重要部分，如CSS颜色表示，长度单位的选择（如像素、百分比等），...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值