CSS之布局（盒子模型--外边距）

盒子模型--外边距：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型--外边距</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;border: solid 10px orange;/*外边距(margin);-外边距不会影响盒子可见框的大小-但是外边距会影响盒子的位置-一共由四个方向的外边距:margin-top;-上外边距,设置一个正值,元素会向下移动margin-right默认情况下，设置margin-right不会产生任何效果margin-bottom-下外边距，设置一个正值，其下边的元素会向下移动margin-left-左外边距,设置一个正值,元素会向右移-元素在页面中是按照自左向右的顺序排列的,所以默认如果我们设置的左和上外边距则会移动元素本身而设置下和右外边距会移动其他元素-margin的简写属性同时设置四个方向的外边距-margin会影响到盒子实际占用空间*/margin-top: 100px;}</style></head><body><div class="box1"></div></body>
</html>

CSS之布局（盒子模型--外边距）相关推荐

11.前端笔记-CSS盒子模型-外边距margin
1.margin 1.1 margin的语法盒子与盒子之间的距离 <!DOCTYPE html> <html lang="en"> <head> ...
CSS - 盒子模型 - 外边距
文章目录一.外边距属性二.margin的简写方式三.外边距可以让块级盒子水平居中四.行内元素和行内块元素水平居中五.外边距合并相邻块元素垂直外边距的合并六.嵌套块元素垂直外边距的塌陷 ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
CSS之布局（盒子模型--内边距）
盒子模型--内边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
【前端学习笔记】(五)（CSS布局盒子模型）
目录盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
文章目录一.内边距复合写法 1.语法 2.代码示例 - 设置 1 个值 3.代码示例 - 设置 2 个值 4.代码示例 - 设置 3 个值 5.代码示例 - 设置 4 个值一.内边距复合写法 1. ...
CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型内边距(padding) 属性设置内盒尺寸计算 padding什么时候不影响盒子大小盒子模型内边距(padding) pa ...
CSS（三）：CSS特性与盒子模型
目录 CSS三大特性层叠性继承性行高的继承优先级权重的叠加盒子模型网页布局的本质盒子模型组成边框(border) 表格细线边框边框会影响盒子实际大小! 内边距(padding) p ...
Day05-CSS布局-盒子模型
CSS布局-盒子模型一.CSS三大特性 3.1 优先级的介绍 3.2 权重叠加计算 3.3 (拓展)权重叠加计算案例 4.1 Chrome调试工具二.PxCook的基本使用三.盒子模型 1.1 ...

CSS之布局（盒子模型--外边距）

盒子模型--外边距：

CSS之布局（盒子模型--外边距）相关推荐

最新文章

热门文章