CSS高级操作 -盒子模型-浮动-position定位

目录

盒子模型

边框（border）

外边距（margin）

display属性

浮动—float属性

position定位属性

---

盒子模型

margin 外边距

border 边框

padding 内边距

margin: 0px auto; /*块级元素居中显示*/

边框（border）

border-style 边框样式 dashed虚线 solid实线 dotted 圆点double双实线

border-color 边框颜色

border-width 边框宽度

border-radius 10px 20px 30px 40px 设置边框圆角 顺序是 左上10px 右上20px 右下30px 左下40px 

属性	说明	样式值
border-top-style	上边框样式	none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应用于表解决边框冲突 ……
border-right-style	右边框样式
border-bottom-style	下边框样式
border-left-style	左边框样式
border-style	设置四个边框样式

外边距（margin）

margin: 3px 4px 7px 4px 边框粗细排序是 上 右 下 左

margin: 3px 4px  边框粗细排序是 上 下3px 左右4px

计算盒子模型的尺寸

box-sizing盒子属性

box-sizing：content-box内容盒子 盒子的width和height只是定义盒子中的内容的宽和高

box-sizing：border-box边框盒子 盒子的width和height包括了盒子中的内容+填充+边框的宽和高

标准文档流的组成

块级元素 <h1>…<h6>、<p>、<div>、列表  特点：独占一行

内联元素  <span>、<a>、<img/>、<strong>... 特点：指的是只占自身大小的元素，不会占用一行

display属性

值	说明
none	设置元素不会被显示
inline	元素会被显示为内联元素
block	元素会被显示为块级元素
inline-block	行内块元素

浮动—float属性

属性值	说明
left	元素向左浮动
right	元向右浮动
none	默认值，元素不浮动

浮动：脱离标准文档流（在z轴上处里0层面之上）

clear属性

清除浮动

clear清除其他元素浮动对本元素的影响

属性值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

使用clear扩展盒子高度  可以在元素里面加一个div负责清除左右两侧浮动

overflow属性

对于超出区域内容的部分进行溢出处理  

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

使用overflow属性扩展盒子高度

/* 当元素中的内容因为浮动超过元素区域时，默认扩展元素的高度达到浮动元素的高度*/

两种扩展盒子高度的区别

使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，从而提高了代码的可读性和网页性能

如果页面中有定位元素，并且元素超出了父级的范围，就必须使用clear属性来清除浮动来扩展盒子高度

position定位属性

属性值	说明
static	默认值，没有定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

relative属性值  

/*相对于原本的位置发生位移，对于标准文档流不可知*/

相对自身原来位置进行偏移

偏移设置：top、left、right、bottom

单位：px

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

设置了相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移

absolute属性值

脱离文档流

做绝对定位之前要先给父级窗口做一个相对的定位；这样他就以父级窗口的位置来进行偏移；

/* 绝对定位：失去标准文档流中的位置，相对于发生定位的第一个父辈元素移动*/

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

fixed固定定位

脱离文档流

/* 固定定位 ：失去标准文档流中的位置，相对于整个页面元素定位*/

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方