盒子模型
盒子模型规定了元素框处理元素内容、内边框、边框和外边距的方式
一个div的总宽度为width+padding(左)+padding(右)+border(左)
+border(右)+margin(左)+margin(右)
padding内边距(填充)(里面的值按顺时针)
padding: 10px(表示四边的内边距都为10px)
padding: 10px 20px;(表示上边距和下边距为10px,左边距和右边距为20px)
padding:10px 20px 30px(表示上边距为10px,右边距为20px,下边距为30px,左边距为20px)
padding: 1px 2px 3px 4px(指定四边的值)
也可以对四个方向的内边距单独控制
padding-top、padding-right、padding-bottom、padding-left
border边框
border-style样式
border-color颜色(
透明颜色:transparent
)
border-width:边框的宽度
简写:border:大小 样式 颜色
可以对四边当独设置
margin(外边距)
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
里面的设置与padding相识
margin中的auto用法表示取计算机的值
如块级元素居左
margin: 0px auto 0px 0px
块级元素居中
margin:auto
auto
外边距合并
当"两个"垂直外边距相遇时,它们将形成"一个"外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度
中的较大者如:
当一个元素包含在另一个元素中时(条件:父元素没有内边距或边框),它们的上和/或下外边距也会发生合并如:
定位(position)
定位的基本思想很简单,它允许我们定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即
“
块框
”
。与之相反,span和
strong 等元素称为
“
行内元素
”
,这是因为它们的内容显示在行中,即
“
行内框
”
。
用 display 属性改变生成的框的类型
display 属性设置为 block,可以让行内元素变成块级元素
把 display 设置为 none,用于隐藏元素
CSS 有三种基本的定位机制:普通流(默认)、相对定位和绝对定位。
static 默认
relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 绝对定位
元素框从文档流完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就好像元素原来
不存在一样。元素定位后变成一个块级元素
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
top、left、right、bottom(可以是数值、百分数)
绝对定位
使用了绝对定位的元素以它最近的一个
“
已经定位
”
的
“
祖先元素
”
为基准进行偏移。
如果没有已经定位的祖先元素、
那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置
偏移设置
left、right、top、bottom
可以为数字或百分比
z-index(面对自已为正)
调整元素定位时重叠层的上下位置
z-index属性值:整数,默认值为0
设置了positon属性为absolute时,z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方