CSS布局与定位

文章目录

概述

一、盒子模型

二、CSS定位机制

---

概述

container  容器      header   页眉    navbar  导航条  main  （menu菜单   content  主要内容  sidebar 边条 ）  footer页脚

每个小盒子所占的大小以及页面的位置，指的就是页面的布局和定位；

---

一、盒子模型

• 概念：页面上区域，图片，导航，列表，段落，都可以是盒子；每个盒子都占据一定页面空间
• 组成：content内容    height高度  width宽度   border边框 padding内边距  margin外边距（都是CSS样式的属性）

• 盒子模型实现方式：soild(实线框)

• 防止溢出 overflow属性：scroll（显示滚动条）  hidden （超出部分不可见）auto（有超出部分，显示滚动条）
• 边框 border 属性：

• 对浏览器默认的设置清零    *{ margin:0;padding:0;}
• margin （内边距）padding（外边距） 取值用px,%   ,使用方法如下：

• margin的合并：垂直方向合并，水平方向不合并（如果两个模块垂直合并的外边距不一样，合并会选择高的那个作为合并之后的外边距）
• 水平居中：margin:0  auto;  (0 上侧下侧的值  auto表示margin-left  margin-right 意味着浏览器会自动的根据外层盒子的一个宽度和div区域的一个宽度除以2)

 

二、CSS定位机制

• 文档流定位（从左到右，从上到下，只不过有些元素单独占了一行，有些和别的元素在一行显示）默认方式

1. 元素分类：block (独占一行 )     inline(不单独占用一行，inline元素之间有一个间距问题） inline-block（不独占一行）

     

     2.  元素转换   display ：black;(转化为块状元素)   display:inline(转化为行元素)  display:inline-block(转化为  行 内块元素)  displsay:none(元素不会被显示)

• 浮动 float    left(左浮动)   right(右浮动)   none(不浮动) 三列的布局就都左浮动

1. 清除浮动  clear  both（清除左右两边的浮动） left和right（只能清除一个方向的浮动）  none（默认值，只需要移除已指定的清除值时用到）
2. 清除浮动并不是清除没有这个元素，而是让它周围都没有浮动元素 这样就要要另起一行

• 层  layer 用 position来实现(z-index:值大在上面)

1. static:  默认值     没有定位，元素出现在正常的流中
2. fix:固定定位     相对于浏览器窗口进行定位
3. relative：相对定位    直接父元素进行定位，无论父元素是什么定位   定位的元素脱离正常的文档流，但其在文档流中的原来位置依旧存在
4. absolute:绝对定位    相对于static 定位以外的第一个父元素（可以是absolute和relative,而这个父层并不一定是其直接父层）
5. 子绝父相