background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 即内边距也是透明的 border:边框 content:内容 二、盒子模型(Box model) 接下来将讲述HTML和CSS的关键——盒子模型(Box model)。理解Box model的关键便是margin和padding属性,而正确理解这两个属性也是学习用css布局的关键。
background-color属性则用于设置元素的背景颜色,这个颜色会填充元素的整个区域,包括内容和padding,但不包括边框(除非设置了background-clip: border-box,但这是特殊情况)。2. 选择要设置背景色的元素 首先,你需要选择要应用背景色和padding的元素。例如,这里我们选择一个<div>元素: ...
值:border-box | padding-box | content-box 默认是:border-box 【看栗子】 .box8{padding: 25px; border: 10px dotted #000; background-color: yellow;} border-box 背景会延伸到外边界的边框,但边框在上,背景在下。 Lorem ipsum dolor sit amet. padding-box 从补白区域开始显示背景,背景延伸到最外边...
同样,outline的简写中,outline-style也是必须的,另外两个值则可选,默认值和border相同。 背景(background) background是最常用的简写之一,它包含以下属性: 1 2 3 4 5 background-color:color||#hex|| RGB(% ||0-255)|| RGBa;background-image:url();background-repeat:repeat||repeat-x||repeat-y||no...
background-color:yellow; } p.padding { padding:25px50px; } 这是一个没有指定填充边距的段落。 这是一个指定填充边距的段落。 Padding属性,可以有一到四个值。 padding:25px 50px 75px 100px; 上填充为25px 右填充为50px 下填充为75px ...
background 的常见背景属性 css2.1中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff;设置元素的背景颜色。 background-image:url(images/2.gif);将图像设置为背景。 background-repeat: no-repeat;设置背景图片是否重复及如何重复,默认平铺满。(重要) ...
background-color: #f0f; margin-bottom: 20px; box-sizing: border-box; } 效果,就回归 200px 啦。 2. 计算实际宽度: 如果不使用 box-sizing: border-box;,而是采用默认的 content-box,则需要手动计算实际的宽度,包括 padding 在内。例如,如果想要一个总宽度为 240px 的元素,并且设置了 20px 的 paddin...
padding: 30px; border: 5px dashed red; margin: 20px; /* background-color: slateblue; 背景颜色 */ background-image: url(images/lagouwang.jpg); } 如果图片不重复,从 border 以内开始加载 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背 景颜色 ...
background-color: #beceeb; margin: auto; } } 3. border border-with不支持百分比 border-color 默认颜色就是 color 色值 hover时只要改color,就可以把border颜色一起改变 &:hover{color:#34538b;cursor:pointer;} image.png 3.1. border的用途
1.padding-box : 从padding区域开始显示背景图像。(默认值) 2.border-box : 从border区域开始显示背景图像。 3.content-box : 从content 区域开始显示背景图像 九、复合属性 语法:background : [background-color]背景颜色 | [background-image] 背景图片| [background-position]背景定位 | [background-size]背...