css盒模型以及如何计算盒子的宽度

盒模型

每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子[1]

每个盒子都可以看成由4部分组成,它们分别是 — 元素外边距(margin)元素边框(border)元素内边距(padding)元素内容(content)

元素外边距(margin)

元素外边距(margin)用来控制元素与相邻元素之间间隔大小。

用法:

/*上方对外边距12像素*/
margin-top: 12px;
/*右方对外边距24像素*/
margin-right: 24px;
/*下方对外边距6像素*/
margin-bottom: 6px;
/*左方对外边距3像素*/
margin-left: 3px;
/*上方、右方、下方、左方皆对外边距12像素*/
margin: 12px;
/*上方、下方对外边距12像素 左方、右方对外边距24像素*/
margin: 12px 24px;
/*上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距3像素*/
margin: 12px 24px 6px 3px;

按照left与right对应以及top与bottom对应,自动补充缺省值

/*上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距24像素*/
margin: 12px 24px 6px;

水平方向相邻元素的margin值不会叠加

<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>margin-horizontal-test</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #f00;
}
.margin-horizontal-test {
display: inline-block;
margin: 0 50px;
}
</style>
</head>
<body>
<div class="margin-horizontal-test"></div>
<div class="margin-horizontal-test"></div>
</body>
</html>

效果图:

垂直方向相邻元素margin值会叠加,最终以两者之间最大值为准

<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>margin-vertical-test</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #f00;
}
.margin-vertical-test {
margin: 50px 0;
}
</style>
</head>
<body>
<div class="margin-vertical-test"></div>
<div class="margin-vertical-test"></div>
</body>
</html>

效果图:

利用margin属性使块级元素水平居中

<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>利用margin属性使块级元素水平居中</title>
<style type="text/css">
body {
border: 1px solid black;
}
p {
margin: 0 auto;
width: 100px;
}
</style>
</head>
<body>
<p>Fatman</p>
</body>
</html>

效果图:

元素边框(border)

元素边框(border)位于元素外边距与元素内边距之间。

用法:

/*边框样式为实线*/
border-style: solid;
/*边框宽度为12像素*/
border-width: 12px;
/*边框颜色为黑色*/
border-color: black;
/*边框角度为36像素*/
border-radius: 36px;
/*边框宽度为12像素 样式为实线 颜色为黑色*/
border: 12px solid black;

border的属性也可以像margin一样根据上下左右设置,笔者就不再一一举例了。

利用边框颜色差设置3D按钮

<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>border</title>
<style type="text/css">
button {
width: 200px;
height: 96px;
background-color: #888888;
border: 12px solid ;
border-color: #cccccc #444444 #444444 #cccccc;
color: white;
}
</style>
</head>
<body>
<button>按钮</button>
</body>
</html>

效果图:

元素内边距(padding)

元素内边距(padding)是用来定义元素内容距离元素边框之间间隔大小。

内边距和外边距的区别在于 — 外边距位于边框外部,而内边距位于边框内部。

用法:

/*上方对内边距12像素*/
padding-top: 12px;
/*右方对内边距24像素*/
padding-right: 24px;
/*下方对内边距6像素*/
padding-bottom: 6px;
/*左方对内边距3像素*/
padding-left: 3px;
/*上方、右方、下方、左方皆对内边距12像素*/
padding: 12px;
/*上方、下方对内边距12像素 左方、右方对内边距24像素*/
padding: 12px 24px;
/*上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距3像素*/
padding: 12px 24px 6px 3px;

padding也可以按照left与right对应以及top与bottom对应,自动补充缺省值

/*上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距24像素*/
padding: 12px 24px 6px;

使用padding增大元素的可点击范围

<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>使用padding增大元素的可点击范围</title>
<style type="text/css">
img {
width: 48px;
height: 48px;
padding: 24px;
}
</style>
</head>
<body>
<!-- 注意你的本地可能没有这个文件 -->
<img id="click-img" src="./assets/icon.jpg"> <script type="text/javascript">
let img = document.getElementById('click-img');
//点击padding处也可以触发点击事件
img.addEventListener('click',function(){
alert('click img');
})
</script>
</body>
</html>

效果图:

元素内容(content)

当box-sizing属性值为content-box时:

元素内容宽度 === 元素设置宽度

盒子宽度 === 元素左右外边距和 + 元素左右边框宽度和 + 元素左右内边距和 + 元素内容宽度

比如:

div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid blue;
margin: 20px;
background-color: red;
box-sizing: content-box;
}

20 + 10 + 20 + 100 + 20 + 10 + 20

= 200

整个盒子的宽度为200px,元素内容的宽度值等于width值。

示意图:

当box-sizing属性值为border-box时:

元素内容宽度 === 元素设置宽度 - 元素左右边框宽度和 - 元素左右内边距和

盒子宽度 === 元素左右外边距和 + 元素设置宽度

比如:

div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid blue;
margin: 20px;
background-color: red;
box-sizing: border-box;
}

20 + 100 + 20

= 140

整个盒子的宽度为140px,元素内容的宽度值等于width值减去padding值和border值。

示意图:


  1. 元素设置display:none后不存在于可访问性树中,不被浏览器绘制。

css盒模型以及如何计算盒子的宽度的更多相关文章

  1. CSS盒模型的介绍

    CSS盒模型的概念与分类      CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...

  2. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  3. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  4. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  5. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  6. 干货篇:揭开CSS盒模型神秘的面纱

    写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...

  7. 第七十三节,css盒模型

    css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...

  8. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  9. css盒模型研究

    css的盒模型一直是一个重点和难点,最近由后端的学习转到前端,觉得有必要深入研究一下css的盒模型. 1.万物皆盒子 我们必须要有一个理念,在html的世界里,万物皆盒子,那就是任何一个html元素都 ...

随机推荐

  1. 创建gitHub账户并配置秘钥

    1. 登录注册地址 https://github.com/ 2.点击注册 Sign up 3.输入邮箱 密码 进行注册 4.注册成功后,登录邮箱验证 .然后通过邮箱和密码登录gitHub.设置 set ...

  2. WebRTC 系列之音频会话管理

    WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的 API.W3C 和 IETF 在2021年1月26日共同宣布 WebRTC 1. ...

  3. 如何用JavaDoc命令生成帮助文档

    如何用JavaDoc命令生成帮助文档 文档注释 在代码中使用文档注释的方法 /** *@author *@version * */ 生成帮助文档 打开java文件所在位置,在路径前加入cmd (注意有 ...

  4. redis的两种持久化的机制,你真的了解么?

    redis提供了两种持久化的机制 RDB和AOF机制 RDB(redis Database):RDB保存某一个时间点之前的快照数据. AOF(Append-Only File):指所有的命令行记录以r ...

  5. RabbitMQ之TTL(Time-To-Live 过期时间)

    本文转载自RabbitMQ之TTL(Time-To-Live 过期时间) 概述 RabbitMQ可以对消息和队列设置TTL. 目前有两种方法可以设置.第一种方法是通过队列属性设置,队列中所有消息都有相 ...

  6. 20201228 买卖股票的最佳时机 IV(困难)

    给定一个整数数组 prices ,它的第 i 个元素 prices[i] 是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 k 笔交易. 注意:你不能同时参 ...

  7. Expression #4 of SELECT list is not in GROUP BY clause and contains nonaggregated column

    Error: javax.servlet.ServletException: java.sql.SQLSyntaxErrorException: Expression #4 of SELECT lis ...

  8. 前端问题录——在导入模块时使用'@'时提示"Modile is not installed"

    前情提要 为了尽可能解决引用其他模块时路径过长的问题,通常会在 vue.config.js 文件中为 src 目录配置一个别名 '@' configureWebpack: { resolve: { a ...

  9. Python 学习笔记(3)

    Python 文件I/O 读取键盘输入: Python提供了两个内置函数从标准输入读入一行文本,默认的标准输入是键盘: 1. raw_input #函数从标准输入读取一个行,并返回一个字符串(去掉结尾 ...

  10. R语言barplot ,掌握本篇的内容,基本的条形图都可以画了

    本篇主要想复现文章中的一张图,原图来源(Antibiotic resistome and its association with bacterial communities during sewag ...