您的位置:首页 > 软件资讯

CSS中的元素定位方法、详解

2020-08-01 05:34:20 dxy7810.cn

  1.盒模型

  盒模型,就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子。

  这些盒子们都要按照 可见版式模型(visual formatting model)在页面上排布。可见的页面版式主要由三个属性控制: position 属性、 display 属性和 float 属性。其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局。

  盒子属性分三组:

  边框(border)。可以设置边框的宽窄、样式和颜色。

  内边距(padding)。可以设置盒子内容区与边框的间距。

  外边距(margin)。可以设置盒子与相邻元素的间距。

  可以这么理解盒子属性:外边距是边框向 外推 其他元素,而内边距是从边框向 内推 元素的内容。

  CSS 为边框、内边距和外边距分别规定了简写属性。在每个简写声明中,属性值的顺序都是上、右、下、左(顺时针旋转)。

  示例:margin:5px 10px 12px 8px;

  注意:4 个值之间有空格,但不能是其他分隔符(比如逗号之类的)。甚至,你都不用把 4 值

  全都写出来——如果哪个值没有写,那就使用对边的值。

  示例:margin:12px 10px 6px;

  说明:缺少最后一个值(左边),使用对边(右边)的值(10px),即:margin:12px

思雨电影网[www.aikan.tv/special/siyudianyingwang/]10px 6px 10px。

  示例:margin:12px 10px;

  说明:缺少最后两个值(下边和左边),使用上边(12px)和右边(10px),即:margin:12px 10px 12px 10px;

  示例:margin:12px;

  说明:只写一个值,那么4个边都去这个值。即:margin:12px 12px 12px 12px;

  1.1 盒子边框

  边框(border)有3个相关属性:

  宽度

  可以使用 thin、medium 和 thick 等文本值,也可以使用

  除百分比和负值之外的任何绝对值。

  样式

  有 none、hidden、 dotted、 dashed、 solid、 double、 groove、

  ridge、 inset 和 outset 等文本值。

  颜色

  可以使用任意颜色值,包括 RGB、 HSL、十六进制颜色 值和颜色关键字。

  1.2 盒子内边距

  内边距(padding)用来设置盒子内容区与边框的间距。在没有设定内边距的情况下,内容会紧挨着边框。

  1.3 盒子外边距

  外边距(margin)用来设置盒子与相邻元素的间距。

  推荐使用这条规则作为样式表的第一条规则:* {margin:0; padding:0;}

  说明:这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后,所有默认的外边距和内边距都会消失。然后,你可以为那些真正需要外边距的元素再添加外边距。不同浏览器默认的内边距和外边距也不一样,特别是对表单和列表等复合元素。在这种情况下,用这条规则 中和 默认值,然后再根据需要添加,则会在各浏览器上获得一致的效果。

  1.4 叠加外边距

  垂直方向上的外边距会叠加,这可是你必须得知道的一件事。

  In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

关于星光资讯网 | 广告服务 | 联系我们 | 网站声明 | 本网招聘 | 本网动态

版权所有:星光资讯网 Copyright @2012-2021 Inc.All Rights Reserved.