盒子模型的学习记录

盒子模型可以用以下几张图片，直观的展示出来

Content：为输入的内容，

Padding：与父元素的边框的距离（可比作包裹内容的容器），

Border：父元素的边框，（容器的壁）

Margin：容器与Body的距离

再往外就是浏览器的边框了

盒子模型包括的属性：

一，padding 属性: 元素的内边距；

——————————————————————————————

• padding-top 属性设置元素的上内边距（空间）。
• padding-right
• padding-botton
• padding-left
• padding接受 长度值或者百分比值，但不允许使用负值。

 padding *同时设定四个边距

 padding **分别设置上下，左右边距

 padding ***分别设置上，左右，下边距

 padding ****分别设置上，右，下，左边距

————————————————————————————————

二，border 属性： 元素的边框，是围绕元素内容和内边距的一条或多条线；

三，margin 属性：元素的外边距；

以上三个元素的属性的尺寸：

1，height 设置元素的高度。属性值：auto：默认。/px，cm等单位定义高度，/百分比

2.width 设置元素的宽度。属性值：auto：默认。/px，cm等单位定义高度，/百分比

注意：当width设置为auto时，没有元素不会显示出来

当属性用百分比定义时，是相对于父元素的尺寸来说的

 

四，边距的合并

如果两个模型上下边框重合，则互相合并，并且显示较大的一个边距

五，溢出的处理

overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪

1，overflow-x

2，overflow-y

• visible 不裁剪内容，可能会显示再边框外
• hidden 裁剪内容
• scroll 裁剪内容，提供滚动机制

auto 如果溢出，则自动提供滚动机制

通常和 white-space：nowrap；text-overflow:ellipsis配合使用

 

六，定位

CSS的三种定位方式，普通流，浮动和绝对定位。

1，普通流：根据元素再HTML中的位置定位

元素定位的属性：

position 把元素放置到一个静态的，相对的，绝对的，或固定的位置中。

• static 默认值，没有定位。
• absolute 绝对定位，相对于父元素进行定位，通过绝对定位，元素课可以放置到页面上任何位置，元素位置通过，left，top，right，bottom，属性规定，（相对于最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位）
• relative 相对定位，相对于HTML中正常位置进行定位，元素位置通过，left，top，right，bottom，属性规定。
• fixd 绝对定位，相对于浏览器窗口进行定位，如果内容很多向上划屏幕，这个元素不动，元素位置通过，left，top，right，bottom，属性规定

绝对定位和相对定位的区别：

绝对定位对象可以叠加，相对定位对象不可以，

相对定位占用原来位置（只是内容移动了，空间是占着，相当于空格），绝对定位不占用

七，z-index 设置元素的堆叠顺序

八，浮动 float

• left 元素向左浮动，
• right 向右浮动

none，元素不浮动

九，清除浮动

clear 浮动的清除，常用属性值 both/left/right/none