摄影学校网站模板,wordpress 绑定域名,企业邮箱大全号码大全,青岛慧思网站建设CSS 的盒模型
在HTML里#xff0c;每一个元素就相当于是一个矩形的 “盒子” #xff0c;这个盒子由以下这几个部分构成#xff1a;1.边框border#xff0c;2.内容content#xff0c;3.内边距padding#xff0c;4.外边距margin 边框border
基础属性描述border-width粗…
CSS 的盒模型
在HTML里每一个元素就相当于是一个矩形的 “盒子” 这个盒子由以下这几个部分构成1.边框border2.内容content3.内边距padding4.外边距margin 边框border
基础属性描述border-width粗细border-style样式border-color颜色
注border-style属性默认是没边框 border-style: solid; 实线边框 border-style: dashed; 虚线边框 border-style: dotted; 点线边框 示例代码
运行效果 发现的现象: 边框会撑大盒子 可以看到 width, height 是 200*100, 而最终整个盒子大小是 220 * 120. 原因: 上边距的边框是10个像素下边距的边框也是10个像素高度height为1001010变成120像素宽度也是同理。
如何解决这个现象 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子 结果 border属性的简写写法 示例
border-color: black;
border-style: solid;
border-width: 10px; 等效于(对于3个属性值没有顺序要求) border: black solid 10px;内边距padding
padding设置内容和边框之间的距离默认内容是顶着边框来放置的 控制四个方向上边距的属性分别为padding-toppadding-bottom padding-leftpadding-right
实现效果: 内容左边和上方留有一部分区域
示例代码
运行效果
简写写法 可以把多个方向的 padding 合并到一起 第一种padding: 5px; 表示四个方向都是 5px第二种padding: 5px 10px;表示上下内边距 5px, 左右内边距为 10px第三种padding: 5px 10px 20px;表示上边距 5px, 左右内边距为 10px, 下内边距为 20px第四种padding: 5px 10px 20px 30px;表示上5px, 右10px, 下20px, 左30px(顺时针)
示例
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;等效于
padding: 10px;外边距margin
margin控制盒子和盒子之间的距离默认距离0 控制四个方向上边距的属性分别为margin-topmargin-bottom margin-leftmargin-right
示例代码
运行结果
简写写法 规则和padding一样
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
