CSS3秘笈:第七章

第七章  margin、padding和border

1.盒模型:四个属性:

(1)padding:内容与其边框线之间的空间。

(2)border:盒子周围的直线

(3)background-color:用来填充边框内部空间的,包括padding区域。

(4)margin:一个标签和另一个标签之间的间隔。

2.padding和margin的区别:padding是在内容和边框之间增加空间。避免内容被硬塞在方框里面,它还包括背景区域,因此padding占用的空间也可以为空白的内容。而margin则是在元素之间增加空白。

3.边距冲突:

当元素的bottom margin碰到另一个元素的top margin时,浏览器不是把这两个边距相加,而是应用它们中较大的那一个。

4.用margin负值消除空格:

margin负值代表移除空间。

5.块级盒子和行内盒子:

CSS有两种不同的盒子类型:block box(块级盒子)和inline box(行内盒子),它们分别对应于两个标签类型:块级标签和行内标签。块级标签在其前后会产生空格,行内标签在其前后不会产生空格。

6.行内元素只能设置left/right padding或margin,无法设置top/bottom padding或margin,除了<img>标签之外。display 属性可以让块级元素像行内元素那样显示,也可以让行内元素像块级元素那样显示。

7.添加边框:边框是环绕在元素周围的直线。每个border都通过color、width、style三个属性控制。样式还可以控制边框线的类型:solid(实现)dashed(虚线)等。

8.添加圆角:border-radius属性可以给盒子添加圆角。只写一个值时,它就会将这个值应用给一个元素的所有4个角,写四个值时,它会从左上角开始按顺时针应用于各个角。有些浏览器不支持border-radius属性,因此需要加上供应商前缀:-webkit-用于chrome、-moz-用于Firefox、-o-用于Opera、-ms-用于IE。

9.添加阴影:

box-shadow属性可以给元素的边界添加阴影。语法:box-shadow:-4px 6px 8px #000000;

第一个值为水平偏移量,这个值会将阴影移到元素的左边或者右边。正值是右边,负值是左边。第二个值为垂直偏移量,阴影的位置在元素的上方或者下方。正值是下方,负值是上方。第三个值是阴影的半径。决定阴影的模糊度和宽度。值为0时完全不模糊。第四个值是阴影的颜色。box-shadow属性中包括两个可选的值:inset关键字和阴影的尺寸。关键字inset告诉浏览器要将阴影画在方框内部,还可以添加一个阴影的尺寸作为第4个值。阴影的尺寸会将阴影扩展指定的量。可以在一个样式中添加多个阴影,用逗号隔开。

例如:box-shadow:10px 5px 8px #ff00ff,-5px -10px 20px 5px rgb(0,33,255);

10.确定高度和宽度:

height和width属性时构成部分CSS盒模型的另外两个CSS属性,它们十分适用于给对象设置尺寸。盒子的实际宽度和高度是margin、border、padding、width属性值的总和。假如你设置了下列属性:

width:100px;

padding:15px;

border-width:5px;

margin:10px;

浏览器分配给盒子的宽度是160px。left/right margin为20px、left/right border为10px、left/right padding为30px,再加上宽度值100px。

11.height属性适合用来控制包含图片的div的高度以及横幅区域的设置。用来控制文本时要注意溢出。

12.用overflow控制溢出文本:overflow用4个关键字来控制溢出盒子边沿的那部分内容改如何显示:

(1)visible:这是浏览器通常的做法。

(2)scroll:添加滚动条。

(3)auto:要使滚动条变成可选,就用auto选项。

(4)hidden:隐藏任何超出盒子的那部分内容。

13.高度和宽度的最大化和最小化:

(1)max-width属性:用于设置元素的最大宽度。

(2)max-height属性:设置最大高度。

(3)min-width属性:设置元素的最小宽度。

(4)min-height属性:设置元素的最小高度。

14.浮动包围内容:float属性可以把元素移到左边或者右边。float属性值有三种:left、right、none。浮动标签的HTML代码必须出现在任何包围浮动元素的内容之前。浏览器会包围浮动元素周围的文本但是不会包围边框或者背景,消除背景元素在浮动元素之下的方法有两种:(1)给设置了浮动下方跑动的背景或边框的样式添加一条规则:overf:hidden。(2)在浮动元素周围添加边框:即设置足够粗的边框。

15.停止浮动:clear属性会指示元素不要包围浮动项目。clear属性接受以下选项:left样式将落至左浮动元素的下方、right:强迫样式落至右浮动对象的下方、both:强迫样式落至左浮动和右浮动元素的下方、none:完全关闭清楚属性。

上一篇:artTemplate-master的应用


下一篇:python学习之路-9 socket网络编程