box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

1.行盒，display属性=inline的元素，不换行（默认值）

2.块盒，display属性=block的元素，换行

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都有下面4个部分组成，从内到外分别是：

①内容区域 content

内容盒：content-box

width  height

②填充区     padding

填充盒：padding-box（内容区+填充区）

padding-left   padding-right   padding-top   padding-bottom 简写 padding:上 右 下 左（顺时针）

③边框　　  border

边框盒：border-box（内容区+填充区+边框）

边框样式border-style  边框宽度border-width（简写）  边框颜色border-color（简写）

border-top-width  border-right-width  border-bottom-width  border-left-width

④外边距　  margin

边框到其他盒子的距离

margin-top  margin-right  margin-bottom  margin-left

简写margin

CSS学习（8）盒模型的更多相关文章

  1. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  2. css学习_css盒模型及应用

    1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red                (solid/ ...

  3. css学习笔记---盒模型，布局

    1.外边距叠加 当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加,元素被包含时也有可能会发生叠加(如果没有内边距和边框),如果一个空元素没有内边距和边框本身也会发生上下边 ...

  4. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  5. 浅谈css中的盒模型（框模型）

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  6. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  7. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  8. （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

  9. 一分钟让你明白CSS中的盒模型

    想必初学者对CSS盒模型总是很困惑吧.下面一分钟让你彻底明白盒模型: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...

  10. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

随机推荐

  1. [CF891C] Envy - Kruskal,并查集

    给出一个 n 个点 m条边的无向图,每条边有边权,共 Q次询问,每次给出 \(k\)条边,问这些边能否同时在一棵最小生成树上. Solution 所有最小生成树中某权值的边的数量是一定的 加完小于某权 ...

  2. nginx 部署php项目 404

    服务器重启了一下 然后访问程序报错404的情况 文件存在位置没有问题 niginx配置根目录没有问题 最后检查到端口的时候发现php-fpm的9000端口未打开 service php-fpm res ...

  3. JUC之CountDownLatch和CyclicBarrier的区别 (转)

    CountDownLatch和CyclicBarrier的功能看起来很相似,不易区分,有一种谜之的神秘.本文将通过通俗的例子并结合代码讲解两者的使用方法和区别. CountDownLatch和Cycl ...

  4. 复选框与bitmap算法实践

    bitmap(位图)算法 bitmap算法是利用数据二进制的每一位的值来表示数据的算法,可用来压缩保存数据集. 如何保存 如 5(int)的二进制表示为 101b,第一位和第三位的值是1就可以表示数据 ...

  5. 06 部署redis缓存数据库

    1 安装redis $ sudo apt-get install redis-server 安装完成后,Redis服务器会自动启动,检查Redis服务器程序 注:在安装过程中,腾讯服务器会中途停止. ...

  6. 运筹学学报-运行问题之新版TeX系统支持修改

    <运筹学学报>的LaTeX模板基本上是CCT的典型而且是停留在LaTeX2.09 的时代,故而很多用户下载其模板无法在新TeX系统里使用,这里提供以下解决方案.源文件中的前几行:\docu ...

  7. C++-随机数的产生

    一.随机数 以前学C语言的时候感觉随机数没啥用的,现在想想是自己无知啦,在帮人做一个项目的时候发现随机数还是相当有用的,我们可以利用随机数来生成大量的测试数据. 有两种方法可以让你的程序每次运行结果不 ...

  8. 隐写工具F5-steganography的使用

    1.git clone https://github.com/matthewgao/F5-steganography 2.进入F5-steganography-master文件夹,在空白处 ctrl+ ...

  9. 题解【洛谷P2341】 [HAOI2006]受欢迎的牛

    题面 题解 \(Tarjan\)缩点后统计每个点的出度. 如果有多个点出度为\(0\),就直接输出\(0\),否则输出出度为\(0\)的强连通分量里的点数. 代码 #include <iostr ...

  10. mac visual stdio 2019 自动格式化代码的选项

    1 打开Visual Stdio >点开菜单的visual stdio 的选项卡>首选项>文本编辑>行为>保存时格式化文档 (将这个选项 勾上)>确定 2 以后代码 ...