CSS3学习笔记-盒模型
CSS盒模型是指包含内容(content)、填充(padding)、边框(border)和外边距(margin)几个方面的一个矩形框模型。
内容区(content):指元素中显示内容的区域,它的大小由width和height属性决定。
填充区(padding):用于控制内容区周围的空白区域或边距,padding属性可以控制填充区的大小。
边框(border):位于填充区之外的一层边框区域。border属性可以设置边框的宽度、样式和颜色等信息。
外边距(margin):定义元素与元素之间的距离。margin属性可以设置元素间的距离大小。
在CSS中,盒模型有两种模式:标准模式和怪异模式。
标准模式中,宽度和高度属性只包含内容区的大小,而在怪异模式中,宽度和高度属性包含了内容区、填充区和边框区的大小。
通常,我们可以通过box-sizing属性来控制盒模型的模式,有以下两个值可选:
- box-sizing: content-box; // 标准模式
- box-sizing: border-box; // 怪异模式
box-sizing为content-box时,元素的尺寸仅包含内容的宽度和高度;
box-sizing为border-box时,元素的尺寸包含了内容、填充和边框的宽度和高度。
使用盒模型可以对页面元素的布局和排版进行精细调整。下面是一些常用的CSS属性和值,可以用于控制盒模型的各个方面:
- width和height属性,控制内容区的宽度和高度。 例:width: 200px; height: 100px;
- padding属性,控制填充区的大小和颜色。 例:padding: 10px; padding: 10px 20px; padding: 10px 20px 30px 40px;
- border属性,控制边框的宽度、样式和颜色。 例:border: 1px solid #000; border-top: 2px dotted red;
- margin属性,控制元素与元素之间的距离。 例:margin: 20px; margin: 10px auto;
- box-sizing属性,控制盒模型的模式。 例:box-sizing: content-box; box-sizing: border-box;
- display属性,控制元素的显示方式。例如,块级元素会独占一行,行内元素会在一行内显示。 例:display: block; display: inline;
- position属性和top、right、bottom、left属性,控制元素的定位方式和位置。 例:position: absolute; top: 10px; left: 20px;
以上是盒模型中一些常用的属性和值,可以根据实际需求进行选择和组合使用,实现页面布局和排版的效果。
CSS3学习笔记-盒模型的更多相关文章
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- css学习笔记---盒模型,布局
1.外边距叠加 当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加,元素被包含时也有可能会发生叠加(如果没有内边距和边框),如果一个空元素没有内边距和边框本身也会发生上下边 ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理
ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理 计划时间:第二天下午 背景:数据量大,工程大 目的:自动化,批处理,定制业务流程,不写程序 教程:Pdf/343 数据:chap8/ex5 ...
- Django:学习笔记(7)——模型进阶
Django:学习笔记(7)——模型进阶 模型的继承 我们在面向对象的编程中,一个很重要的的版块,就是类的继承.父类保存了所有子类共有的内容,子类通过继承它来减少冗余代码并进行灵活扩展. 在Djang ...
- Django:学习笔记(6)——模型
Django:学习笔记(6)——模型 快速上手 模型到底是什么呢?我们可以想,如果一张数据表的各个字段可以自动映射到一个类的各个属性,则每条记录对应这个类的一个对象.那我们通过类方法来操作对象(即表记 ...
- 图解css3学习笔记
(0)css3是啥 css3是最新版本的css,添加了许多新的特性,将切图仔从繁重的工作中解救出来. css3现在主流的浏览器大部分都支持(ie9部分支持,ie8之前的都不支持) 渐进增强,优雅降级 ...
- JVM学习笔记——内存模型篇
JVM学习笔记--内存模型篇 在本系列内容中我们会对JVM做一个系统的学习,本片将会介绍JVM的内存模型部分 我们会分为以下几部分进行介绍: 内存模型 乐观锁与悲观锁 synchronized优化 内 ...
- JUC学习笔记——共享模型之管程
JUC学习笔记--共享模型之管程 在本系列内容中我们会对JUC做一个系统的学习,本片将会介绍JUC的管程部分 我们会分为以下几部分进行介绍: 共享问题 共享问题解决方案 线程安全分析 Monitor ...
随机推荐
- linux日常运维(一)
- 进程管理ps.top - 任务计划crontab 进程管理 概念:进程是在自身的虚拟地址空间运行的一个单独的程序. 进程和程序区别:程序只是一个静态的命令集合,不占系统的运行资源:而进程是一个随时 ...
- 圆角android
资源地址 <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid an ...
- Java也能做OCR!SpringBoot 整合 Tess4J 实现图片文字识别
前言 今天给大家分享一个SpringBoot整合Tess4j库实现图片文字识别的小案例,希望xdm喜欢. 文末有案例代码的Git地址,可以自己下载了去玩玩儿或继续扩展也行. 话不多说,开整吧. 什么是 ...
- Pinely Round 2 (Div. 1 + Div. 2) (CF1863)
本来开了某场远古 Div 1,然后学了一堆前置知识至今仍然不会 E.换一场写来得及吗? A. Channel 模拟,略. B. Split Sort Description 给你一个长度为 \(n\) ...
- 9.17 多校联测 Day3 总结
全程罚坐场. 模拟赛考试状态持续低迷,为明天的状态感到深深担忧. <题目并不难,请喧哗的同学不要大声 AK>,离谱. 不保证按难度顺序排序,尝试改变策略.开始第 1h 将四道题通读一遍并做 ...
- 《HelloGitHub》第 91 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
- Acwing76场周赛
题目链接 这次还是只做出来两道题,前两题都挺简单的,注意第二题需要开long long不开会wa,代码粘上来,以后可能会看吧 第一题 #include<iostream> #include ...
- JavaScript 语法:流程控制语句
作者:WangMin 格言:努力做好自己喜欢的每一件事 JavaScript流程控制语句的三种基本结构:顺序结构,选择结构,循环结构 顺序结构 从上到下执行的代码就是顺序结构,程序默认就是由上到下顺序 ...
- KingabseES例程-事实数据与规则的匹配校验
KingabseES例程-事实数据与规则的匹配校验 背景 使用规则,对数据进行校验,比如电商的用户购物订单,是否合法.这就需要订单的多维度,如 用户.地区.物流.支付手段.供应商 等各类信息,进行动态 ...
- OpenGL 摄像机视角详解
1. 摄像机 摄像机就好像是我们的眼睛,我们从摄像机的方向观察世界空间中的模型.摄像机远离模型,模型自然就变小了(透视投影下),然而,在GL中事实上并没有摄像机的概念.但是我们可以通过移动世界空间远离 ...