一、（5）CSS盒子样式

CSS盒子样式

一、背景 Background（重点）

background-color 背景颜色

作用： 设置或检索对象的背景颜色。

语法： background-color :transparent| color

参数：

transparent : 　背景色透明
color : 　指定颜色。

示例：

p { background-color: red; }

background-image 背景图片

作用： 设置或检索对象的背景图像。

语法： background-image :none| url (url)

参数：

none : 无背景图
url : 使用绝对或相对地址指定背景图像

示例：

/* 背景图路径不用加引号 */
p { background-image: url(comet.jpg); }

background-repeat 背景平铺

作用： 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

语法： background-repeat :repeat| no-repeat| repeat-x| repeat-y

参数：

repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺

示例：

/* Y轴平铺 */
p { background: url(images/aaa.gif); background-repeat: repeat-y;}
/* X轴平铺 */
p { background: url(images/aaa.gif); background-repeat: repeat-x;}
/* 不平铺 */
p { background: url(images/aaa.gif); background-repeat: no-repeat;}
/* Y轴X轴都平铺（默认） */
p { background: url(images/aaa.gif); background-repeat: repeat;}

示例：

p { background: url(images/aaa.gif);background-attachment: fixed; }

background-position 背景图起始位置

作用： 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

语法： background-position :position|| position

参数：

length : 百分比 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right

示例：

p{ background: url(images/aardvark.gif); background-position: left top; }

注：

　　如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值是纵坐标。值可以写英文，也可以写数字，甚至可以是负数。常用于 CSS sprites（CSS精灵）该属性定位不受对象的补丁属性(padding)设置影响。

background-attachment 属性

作用：设置背景图像是否固定或者随着页面的其余部分滚动。

语法：background-attachment: fixed| scroll

参数：

scroll 默认。背景图像会随着页面其余部分的滚动而移动。（绑定到body上）
fixed 当页面的其余部分滚动时，背景图像不会移动。（绑定到HTML标签上）

background 背景复合属性（重点）

作用： 设置背景属性，该属性是复合属性，是前面5个知识点的集合。

语法：background:background-color||background-image||background-repeat||background-position

示例：

/* 完整写法：*/
p{ 
　　backgrouond-color:red; 
　　background-image:url(aaa.jpg);
　　background-position: left 30px; 
　　background-repeat: repeat-x; }
/* 常见写法（简写）*/
p { background: red url(aaa.jpg) repeat-x left 30px fixed; }

CSS3新背景（重点）

　　CSS3中包含几个新的背景属性，提供更大背景元素控制。

新增背景属性：

background-size：设置背景图片的大小；(重点)
background-origin：指定了背景图像的位置区域，很少使用；
background-clip：规定背景的绘制区域，很少使用。
Background-image: CSS3中图像多背景的使用(重点)

background-size背景尺寸属性（重点）

　　background-size ：设置背景图片的大小。

语法：background-size：<bg-size> [ , <bg-size> ]*<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值：auto
取值：

<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

background-image多背景（了解）

　　css3中可以在一个元素中显示多个背景图片，这样可以让我们的页面变得更加丰富多彩。

多背景图片：

<style type="text/css">
#box1{
background-image: url(img/daxiong.jpg),url(img/meimei.jpg);
background-position: 0px 0px,97% 97%;
border: 1px solid red;
background-repeat: no-repeat,no-repeat;
background-size: 200px auto,200px auto;
width: 600px;
height: 400px;
}
</style>
<div id="box1">
</div>

　　注：css中通过逗号分隔符来分隔多个属性，所以以上代码多个背景图片对应的属性设置我们都通过“,”分隔，如果设置多个背景保证第一个背景图片设置为no-repeat或者后面的背景图片会被第一个背景图片遮盖住。

多背景颜色：

/*多背景颜色,线性渐变*/
     /* 格式：
        (角度，颜色1，颜色2，颜色3....)
        (to left,#f00......)
        (0deg,#f00......)
        (to right,#f00......)
*/
background: linear-gradient(0deg,#f00,#0ff);

background-clip背景裁剪属性（了解）

作用：

background-clip属性是用来定义背景图像的裁剪区域。
border-box：从border区域（不含border）开始向外裁剪背景。
padding-box：从padding区域（不含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Wekit

二、盒子模型（了解）

“盒子”与“模型”的概念

　　定义：网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，这些都是CSS盒子具备属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

　　特点：每个盒子都有：边界、边框、填充、内容四个属性；并且每个盒子都有尺寸。每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置。

盒子模型详解

盒子有尺寸，用CSS写法为宽度（width）和高度（height）
盒子有边框，用CSS写法为上下左右边框（border）
盒子有内边距，CSS写法为上下左右内边距（padding）
盒子有外边距，CSS写法为上下左右外边距（margin）

　　在HTML中，所有的容器标签都可以认为是一个盒子，但是行内标签与块标签有着明显的差别。行内标签无法设置尺寸（宽度和高度）等等，块标签是一个完整的盒子。

三、尺寸 width、height（重点）

宽度width

作用： 检索或设置对象的宽度。

语法： width :auto| length

示例：

p { width: 200px; }

只有块元素才可以设置宽度，行内元素无法设置宽度。

高度 height

作用： 检索或设置对象的高度。

语法： height:auto| length

示例：

p { height: 200px; }

只有块元素才可以设置高度，行内元素无法设置高度。

最小高度min-height

作用： 检索或设置对象的最小高度。

语法： min-height :none| length

示例：

p { min-height: 200px; }

　　只有块元素才可以设置最小高度，行内元素无法设置最小高度。实际高度大于最小高度时，以实际高度为准。

最大高度max-height

作用： 检索或设置对象的最大高度。

语法： min-height :none| length

示例：

p { max-height: 200px; }

　　只有块元素才可以设置最大高度，行内元素无法设置最大高度。实际高度大于最大高度时，超出内容的处理方式可以通过overflow决定是否显示。

四、内边距 padding（重点）

　　内边距也称为内补丁，是边框与内容之间的距离。

上边内边距 padding-top

作用： 检索或设置对象的上边内边距。

语法： padding-top :length

示例：

p { padding-top: 36px; }

右边内边距 padding-right

作用： 检索或设置对象的右边内边距。

语法： padding-right:length

示例：

p { padding-right: 36px; }

下边内边距 padding-bottom

作用： 检索或设置对象的下边内边距。

语法： padding-bottom :length

示例：

p { padding-bottom: 36px; }

左边内边距 padding-left

作用： 检索或设置对象的左边内边距。

语法： padding-left:length

示例：

p { padding-left: 36px; }

内边距 padding（重点）

作用： 检索或设置对象四边的内边距。

语法： padding :length

示例：

p { padding: 20px; }

如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

五、外边距 margin（重点）

　　外边距也称为外补丁，是边框与其它标签之间的距离。

上边外边距 margin-top

作用： 检索或设置对象的上边外边距。

语法： margin-top :length

示例：

p { margin-top: 36px; }

右边外边距 margin-right

作用： 检索或设置对象的右边外边距。

语法： margin-right:length

示例：

p { margin-right: 36px; }

下边外边距 margin-bottom

作用： 检索或设置对象的下边外边距。

语法： margin-bottom :length

示例：

p { margin-bottom: 36px; }

左边外边距 margin-left

作用： 检索或设置对象的左边外边距。

语法： margin-left:length

示例：

p { margin-left: 36px; }

外边距 margin

作用： 检索或设置对象四边的外边距。

语法： margin:length

示例：

p { margin: 20px; }

如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
外边距在不同浏览器的效果会有很大不同，建议尽量少用。
技巧：版块居中可以使用左右自动外边距。

六、边框 border（重点）

　　边框宽度 border-width

作用： 检索或设置对象的边框宽度。

语法： border-width :medium| thin| thick| length

示例：

p { 
border-style: solid; 
border-width: 1px; 
border-color: #666666;}

如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
要有边框线型的情况下，才能设置边框的宽度。
通常边框宽度都会设置成一个实际的象素值。

边框线型 border-style

作用： 检索或设置对象的边框线型。

语法： border-style :none| dotted| dashed| solid| double

参数：

none（无边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（凹槽）
ridge（凸槽）
inset（凹边）
outset（凸边）

示例：

p { border-style: double; }

注：如果写多个值，边框线型的数量和顺序与边框的宽度一致。

　　边框颜色 border-color

作用： 检索或设置对象的边框颜色。

语法： border-color : color

示例：

p { border-color: red; }

　　color的表现方式有三种，顺序同上。

边框 border（重点）

作用： 检索或设置对象的边框。这是一个复合属性。

语法： border : border-width|border-style|border-color

示例：

/* 设置 p标签的边框为： 宽度2px ， 线型实线 ， 颜色为红色 */
p { border:2px solid red; }
/* 另一种写法，定义宽度和高度 */
.box{border: solid 2px #f00;width:200;height:100px;}

边框复合属性的细节控制（了解）

5.1 上边框 border-top

作用： 检索或设置对象的上边框。这是一个复合属性。

语法： border-top: border-width|border-style|border-color

示例：

/* 设置 p标签的上边框为： 宽度2px ， 线型实线 ， 颜色为红色 */
p { border-top:2px solid red; }

5.2 下边框 border-bottom

作用： 检索或设置对象的下边框。这是一个复合属性。

语法： border-bottom : border-width|border-style|border-color

示例：

/* 设置 p标签的下边框为： 宽度2px ， 线型实线 ， 颜色为红色 */
p { border-bottom:2px solid red; }

5.3 左边框 border-left

作用： 检索或设置对象的左边框。这是一个复合属性。

语法： border -left: border-width|border-style|border-color

示例：

/* 设置 p标签的左边框为： 宽度2px ， 线型实线 ， 颜色为红色 */
p { border-left:2px solid red; }

5.4 右边框 border-right

作用： 检索或设置对象的右边框。这是一个复合属性。

语法： border -right: border-width|border-style|border-color

示例：

/* 设置 p标签的右边框为： 宽度2px ， 线型实线 ， 颜色为红色 */
p { border-right:2px solid red; }

阴影和边框（重点）

6.1盒子阴影

　　box-shadow属性：设置盒子的阴影。

语法：box-shadow：none | <shadow> [ , <shadow> ]*<shadow> = inset? && [ <length>{2,4} && <color>? ]

默认值： none

取值：
none：无阴影

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

例1：

<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px red;">
外阴影
</div>

例2：

<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 0px 0px 50px red inset;">
内阴影
</div>

6.2圆角边框（重点）

　　Css2实现一个圆角边框的盒子，非常的麻烦，而在Css3中我们只需要设置border-radius属性即可。

border-radius：设置边框为圆角。

语法：border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

默认值：0
取值：

<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

<!-- 例1：-->
<div style="width: 200px;height: 200px;border: 1px solid black;border-radius: 20px;">
圆角边框
</div>
<!-- 例2：--> 
<div style="width: 200px;height: 200px;border: 1px solid black;border-radius: 20px 20px 0px 0px;">
圆角边框
</div>

注意点：
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

6.3边框图片（了解）

　　border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

语法:

border-image: 资源地址剪裁位置平铺方式;
round 会自动调整尺寸（拉伸/压缩），完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不显示。
Stretch 拉伸默认值;

七、标准模式与怪异模式

标准模式与怪异模式

　　盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。当创建网页时通常会在第一行写上标准声明，如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML>

　　以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

标准盒子模型（重点）

　　标准模式的盒子模型：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 。

示例：

div {
background:#ddd; 
width:500px;
padding:20px;
box-sizing:content-box;
border:30px solid #f00;
height:100px;
margin:10px;
}

怪异盒子模型

　　怪异模式的盒子模型：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。
示例：

div {
background:#ddd; 
width:500px;
padding:20px;
box-sizing:border-box;
border:30px solid #f00;
height:100px;
margin:10px;
}

Box-sizing 盒模型组成模式

作用：设置或检索对象的盒模型组成模式。

语法：box-sizing：content-box | border-box

默认值：content-box

content-box：将对象定义为标准模式下的盒模型，{element width=border+padding+content}。
border-box：将对象定义为怪异模式下的盒模型，{element width=content}。

八、面试题

1. 在CSS中,背景属性里有哪些值?

2. 什么是标准模式和怪异模式?

3. 标准模式中怎么来计算宽度和高度?

posted @ 2020-12-14 16:11 全村的希望、阅读(460) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码

一、（5）CSS盒子样式

一、背景 Background（重点）

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺

background-position 背景图起始位置

background-attachment 属性

background 背景复合属性（重点）

CSS3新背景（重点）

background-size背景尺寸属性（重点）

background-image多背景 （了解）

background-clip背景裁剪属性（了解）

二、盒子模型（了解）

“盒子”与“模型”的概念

盒子模型详解

三、尺寸 width、height（重点）

宽度width

高度 height

最小高度min-height

最大高度max-height

四、内边距 padding（重点）

上边内边距 padding-top

右边内边距 padding-right

下边内边距 padding-bottom

左边内边距 padding-left

内边距 padding（重点）

五、外边距 margin（重点）

上边外边距 margin-top

右边外边距 margin-right

下边外边距 margin-bottom

左边外边距 margin-left

外边距 margin

六、边框 border（重点）

边框线型 border-style

边框 border（重点）

边框复合属性的细节控制（了解）

5.1 上边框 border-top

5.2 下边框 border-bottom

5.3 左边框 border-left

5.4 右边框 border-right

阴影和边框（重点）

6.1盒子阴影

6.2圆角边框（重点）

6.3边框图片（了解）

七、标准模式与怪异模式

标准模式与怪异模式

标准盒子模型（重点）

怪异盒子模型

Box-sizing 盒模型组成模式

八、面试题

公告

background-image多背景（了解）