CSS 基础进阶

CSS2

引言：学习前端基础知识。第二课 CSS。

时间：2017年11月23日

作者：JustDo23

html_css_js

01. 三种布局模型

1. 流动模型 Flow

   • 默认的网页布局模式
   • 块级元素以行的形式，自上而下按顺序垂直延伸分布
   • 内联元素从左至右水平分布

2. 浮动模型 Float

   
     
   
   
   
     
   靠左悬浮
     
   靠右悬浮
   
   

   • 实现了两个块级元素在流动模型中并排一个靠左一个靠右的浮动模型
   

   css_float

3. 层模型 Layer

   层模型类似 PhotoShop 中的图层

   层模型三种定位方式：

   • 绝对定位 position: absolute
   • 相对定位 position: relative
   • 固定定位 position: fixed

4. 层模型之绝对定位

   
     
   
   
   
     
   左下角
     
   
   
   

   • 将元素从文档流中拖出来，然后使用left right top bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
   • 如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
   • 元素将随body大小位置变化而改变。
   • 同时，元素会随这网页内容滑动而滑动。
   

   css_absolute

5. 层模型之相对定位

   
     
   
   
   
     
   偏移后
     
   
   
   

   • 相对定位完成过程：首先将元素按 float 浮起来，然后使用left right top bottom属性确定元素在浮起位置的偏移位置。
   • 偏移前的位置保留不动，即后边元素相对偏移前的元素进行定位。
   • 元素将随着网页内容的滑动而滑动。
   

   css_relative

6. 层模型之固定定位

   
     
   
   
   
     
   悬浮在右下角
   
   

   • 固定定位相对于浏览器窗口，不随网页内容滑动而改变，受浏览器窗口大小及位置影响。
   

   css_fixed

7. 层模型之小结

   • absolute 相对于浏览器页面的绝对移动，不仅影响自身元素，还影响后续元素。
   • relative 相对于自己原先位置移动，影响自身元素，但不影响后续元素，可能会和后续元素重叠。
   • fixed 相对于浏览器窗口固定，用户滚动窗口时保持位置不变。

02. 相对某元素定位

  



  

    

      相对于父元素进行定位。定位在父元素底部。
    
  

css_examples

03. 开发技巧

1. 缩写

   • 字体及边框及背景等的缩写类比

2. 水平居中

   
     
   
   
   
     
   行内元素要居中
     
   定宽块级元素要居中
     
   
           
   不定宽度块级元素利用 table 实现居中
     
     
   
       
   不定宽度块级元素变身行内元素并居中
     
     
   
       
   不定宽度块级元素通过悬浮和相对位置实现居中
     
   
   

   

   css_horizontal_center

3. 垂直居中

   
     
   
   
   
     
   父元素高度确定单行文本垂直居中
   
     
   
           
   
             父元素高度确定多行文本
   利用table标签默认属性"vertical-align:middle"实现垂直居中
           
     
   
   

   

   css_vertical_center

4. 隐性改变 display 类型

   设置元素布局模型 position:absolute 或 float:left|right 两者只要出现一个，元素的显示类型会自动变为 display:inline-block ，同时可以设置元素宽度，且宽度默认不占满符元素。

04. 小结

• 在盒模型的基础上使用布局模型来进行各种布局排版
• 注意实战