css盒模型以及如何计算盒子的宽度
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值。
示意图:
元素设置display:none后不存在于可访问性树中,不被浏览器绘制。 ︎
css盒模型以及如何计算盒子的宽度的更多相关文章
- CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- 干货篇:揭开CSS盒模型神秘的面纱
写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...
- 第七十三节,css盒模型
css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- css盒模型研究
css的盒模型一直是一个重点和难点,最近由后端的学习转到前端,觉得有必要深入研究一下css的盒模型. 1.万物皆盒子 我们必须要有一个理念,在html的世界里,万物皆盒子,那就是任何一个html元素都 ...
随机推荐
- 创建gitHub账户并配置秘钥
1. 登录注册地址 https://github.com/ 2.点击注册 Sign up 3.输入邮箱 密码 进行注册 4.注册成功后,登录邮箱验证 .然后通过邮箱和密码登录gitHub.设置 set ...
- WebRTC 系列之音频会话管理
WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的 API.W3C 和 IETF 在2021年1月26日共同宣布 WebRTC 1. ...
- 如何用JavaDoc命令生成帮助文档
如何用JavaDoc命令生成帮助文档 文档注释 在代码中使用文档注释的方法 /** *@author *@version * */ 生成帮助文档 打开java文件所在位置,在路径前加入cmd (注意有 ...
- redis的两种持久化的机制,你真的了解么?
redis提供了两种持久化的机制 RDB和AOF机制 RDB(redis Database):RDB保存某一个时间点之前的快照数据. AOF(Append-Only File):指所有的命令行记录以r ...
- RabbitMQ之TTL(Time-To-Live 过期时间)
本文转载自RabbitMQ之TTL(Time-To-Live 过期时间) 概述 RabbitMQ可以对消息和队列设置TTL. 目前有两种方法可以设置.第一种方法是通过队列属性设置,队列中所有消息都有相 ...
- 20201228 买卖股票的最佳时机 IV(困难)
给定一个整数数组 prices ,它的第 i 个元素 prices[i] 是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 k 笔交易. 注意:你不能同时参 ...
- 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 ...
- 前端问题录——在导入模块时使用'@'时提示"Modile is not installed"
前情提要 为了尽可能解决引用其他模块时路径过长的问题,通常会在 vue.config.js 文件中为 src 目录配置一个别名 '@' configureWebpack: { resolve: { a ...
- Python 学习笔记(3)
Python 文件I/O 读取键盘输入: Python提供了两个内置函数从标准输入读入一行文本,默认的标准输入是键盘: 1. raw_input #函数从标准输入读取一个行,并返回一个字符串(去掉结尾 ...
- R语言barplot ,掌握本篇的内容,基本的条形图都可以画了
本篇主要想复现文章中的一张图,原图来源(Antibiotic resistome and its association with bacterial communities during sewag ...