900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Web前端基础知识:CSS盒子模型 绝对定位和相对定位

Web前端基础知识:CSS盒子模型 绝对定位和相对定位

时间:2023-01-06 22:06:50

相关推荐

Web前端基础知识:CSS盒子模型 绝对定位和相对定位

一:CSS盒子模型

CSS盒子模型概念:CSS盒子模型包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)、宽度(width)、高度(height)几个要素,如图(图为标准盒子模型)

Content:所写的内容;

Padding:边框内的距离,设置时一般是上右下左的顺序,例如padding:10px(上),20px(右),30px(下),40px(左);

Border:将内容框起来的一个边框。border有三个属性,粗细(width),样式(style),颜色(color)。width可以设置为thin、thick和length,length为具体数值。style可以设置为none、hidden、solid等,none是不显示border,hidden可以解决边框中多余的内容,solid表示是实线。例如上图的边框可表示为border:10px solid red,“10px”表示的是边框的粗细;

Margin:盒子与盒子之间的距离(或者说是边框与边框之间的距离);

Width:宽度(这是标准盒子的宽度,IE的宽度与标准盒子的宽度不同);

Height:高度(同上)。

二:绝对定位和相对定位

绝对定位(absolute)的概念:如果设置它的偏移量,将会影响其他元素的位置。如下图(图来自百度)

设置绝对定位时,元素会相对于离自己最近的设置了绝对定位的父元素进行定位。如上图就可以看出,离“第二个块”最近的设置了绝对定位的父元素是div02。【相对定位同理】

相对定位(relative)的概念:通过设置可使边框“相对于”它的起点移动,不影响其他元素的位置,依旧占据着原来的空间。如下图(图来自百度)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。