盒子模型的理解，值得收藏 盒子模型示意图
yuyutoo 2024-10-11 21:38 8 浏览 0 评论
盒子模型
什么是盒子?
html中的标签(元素)统统都是一个矩形的平面框, 在立体上, 它由多个平面构成, 这称为盒子模型.
从底层到顶层的立体结构: margin->background-color->background-image->padding->content->border
三大盒子属性:
border(边框)
padding(内边距)
margin(外边距)
经验:
这三大属性可以结合top right bottom left来使用!
当同时设置4个值时,遵循顺时针顺序: 上右下左, 如: padding: 9px 10px 11px 12px;
border: 边框宽度(border-width) 边框风格(border-style) 边框颜色(border-color);
边框风格: solid(实线), dashed(虚线), dotted(点线)
margin的特殊用法:盒子在其容器中水平居中.
margin-left: auto;
margin-right: auto;
margin可以取负值, 但padding不可以.
部分元素有默认的内/外边距:
body,h1-h6,p,ul,ol,dl,dd
盒子尺寸(box-sizing)
box-sizing: content-box | border-box;
context-box的含义:
为盒子设置的width属性仅表示内容区宽度, 实际宽度=width+padding+border
border-box的含义:
为盒子设置的width属性就是实际宽度
为盒子设置的padding和border自动从width中扣除, 内容区宽度自动缩减.
盒子的圆角
border-radius: 圆角半径;
border-top-left-radius: 左上角半径
盒子的阴影
box-shadow: 阴影类型 x-offset y-offset blur-radius color;
阴影类型如果是inset, 表示阴影的方向是朝向盒子内
相关推荐
- 对volatile，synchronized,AQS的加锁解锁原理的一些理解
-
一、为什么要加锁，要实现同步多线程编程中，有可能会出现多个线程同时访问同一个共享、可变资源的情况，这个资源我们称之其为临界资源；这种资源可能是：对象、变量、文件等。...
- 注意，不能错过的CAS+volatile实现同步代码块
-
前言：最近看到有人说可以使用CAS+volatile实现同步代码块。心想，确实是可以实现的呀！因为AbstractQueuedSynchronizer（简称AQS）内部就是通过CAS+...
- 面试并发volatile关键字时，我们应该具备哪些谈资?
-
提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch.top/提前发现更多精彩内容，请访问https://dayarch...
- 无锁同步-JAVA之Volatile、Atomic和CAS
-
1、概要本文是无锁同步系列文章的第二篇，主要探讨JAVA中的原子操作，以及如何进行无锁同步。关于JAVA中的原子操作，我们很容易想到的是Volatile变量、java.util.concurrent....
- C/C++面试题(二):std::atomic与volatile
-
volatile是C/C++中的一个关键字，用于告知编译器某个变量的值可能会在程序的控制之外被意外修改（例如被硬件、中断服务程序、多线程环境或其他外部代理）。为了防止编译器对代码进行某些可能破坏...
- VOCs(Volatile Organic Compounds)挥发性有机化合物及测试方法
-
经常看到一些三防漆、涂料、油漆类产品的介绍中提到VOC、VOCs等概念，那么什么是VOC、VOCs和TVOC，VOCs主要包括哪些物质？VOCs的来源有哪些？VOCs的危害及国家标准是什么?一、V...
- 对volatile 及happen—before的理解
-
happen—before规则介绍Java...
- 这一篇我们来了解Synchronized、Volatile、Final关键字
-
题外话：蓝银王觉醒了！！--来自于一个斗罗大陆动漫爱好者（鹅，打钱！）湿兄这两天回家了，办了点大事，回来的时候我弟弟还舍不得我，哭着不愿意让我回京（我弟还是小学），我也心里很不舍，但是还是要回京奋斗...
- 关于 Java 关键字 volatile 的总结
-
1什么是volatilevolatile是Java的一个关键字，它提供了一种轻量级的同步机制。相比于重量级锁synchronized，volatile更为轻量级，因为它不会引起线程上下文...
- 大白话聊聊Java并发面试问题之volatile到底是什么?
-
用最简单的大白话，加上多张图给大家说一下，volatile到底是什么？...
- 为什么要有volatile关键字（volatile 关键字为什么不能保证原子性）
-
在嵌入式编程和多线程编程中，我们常会见到volatile关键字声明的变量。下面说一下volatile关键字的作用：1.保持变量内存可见简而言之就是用volatile声明的变量会告诉编译器和处理器，这个...
- Java的volatile到底怎么理解?（java volatitle）
-
我们都知道，在Java中有很多的关键字，比如synchronize比如volatile，这些都是一些比较关键的，还有final，今天我们就来聊一下这个volatile因为这个vo...
- Java多线程编程中的volatile关键字:解密神秘的共享内存
-
Java多线程编程中的volatile关键字：解密神秘的共享内存在Java多线程编程的世界里，volatile关键字就像一位低调却至关重要的守护者。它默默无闻地站岗放哨，确保多个线程之间能够正确地共享...
- 你了解volatile关键字的作用吗?（关键字volatile有什么含意?并举出三个不同的例子?）
-
【死记硬背】volatile关键字主要用于保持内存的变量可见性和禁止重排序。变量可见性：当一个线程改变了变量的值，那么新的值对于其他线程也是可以立即获取到的。禁止重排序：...
- 谈谈你对volatile 关键字作用和原理的理解
-
一位6年工作经验的小伙伴，在某里二面的时候被问到“volatile”关键字。然后，就没有然后了…同样，还有一位4年的小伙伴，去某团面试也被问到“volatile关键字“。然后，也没有然后了…...
欢迎 你 发表评论:
- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
推荐7个模板代码和其他游戏源码下载的网址
-
其实模版网站在开发工作中很重要，推荐几个参考站给大家
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
- 最近发表
-
- 对volatile，synchronized,AQS的加锁解锁原理的一些理解
- 注意，不能错过的CAS+volatile实现同步代码块
- 面试并发volatile关键字时，我们应该具备哪些谈资?
- 无锁同步-JAVA之Volatile、Atomic和CAS
- C/C++面试题(二):std::atomic与volatile
- VOCs(Volatile Organic Compounds)挥发性有机化合物及测试方法
- 对volatile 及happen—before的理解
- 这一篇我们来了解Synchronized、Volatile、Final关键字
- 关于 Java 关键字 volatile 的总结
- 大白话聊聊Java并发面试问题之volatile到底是什么?
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)