页面布局

页面布局

1. 元素显示模式

   • 块元素

     独占一行 宽度模式是父元素的100% 宽度 高度 外边距及内边距都可以控制

   • 行内元素

     相邻的元素可以显示在一行的 宽度和高度无效 默认宽度是本身的宽度

   • 行内块元素

     一行可以显示多个行内块元素 本身的宽度是它本身的宽度 宽度和高度可以设置

2. 盒子模型

   • 清除内外边距

     元素会有默认的内外边距

3. 网页的布局三种方式

   普通流 浮动 定位

   • 浮动

     可以让块元素一行显示 脱标 上边框对齐 如果父级宽度装不下这些浮动的盒子会在下一行显示

     加浮动 会有行内块元素的特性

     浮动元素经常和标准流父级搭配使用

     先用标准流的夫元素排列上下位置，之后内部子元素采取浮动排列左右位置。

   • 浮动的注意点

     上下 标准流 左右浮动

     一个元素浮动了 其他兄弟也要浮动

   • 清除浮动

     父元素的高度没写死 子元素如果加浮动（浮动的元素不占有位置，撑不开父元素）

     1 额外标签法
     最后一个浮动元素加一个标签(块内元素)
     clear: both;
     2 overflow 父元素
     overflow: hidden auto
     3 :after 伪元素法
     .clearfix:after{
         content: '',
         display: block;
         clear:both;
         height: 0;
         visibility: hidden;
     }
     4 双伪元素

4. 定位

   浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

   定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

   • 定位组成

     static relative absolute fixed

   • 边偏移

     top bottom left right

   • relative

     相对于自身原来的位置
     position: relative
     top: 
     bottom:
     left:
     right:

     保留位置

   • absoulte

     position: absolute

     如果父元素没有定位，以浏览器为参照点

     如果祖先元素有定位（relative absolute fixed）,以父元素为准

     绝对定位脱离标准流 (比浮动飘的还要高)

   • fixed

     固定到浏览器可视区的位置

     position:fixed

     脱标 不占有原先的位置