css笔记完整版（四）之DIV+CSS布局（共四部，加起来就是css完整笔记）

目录

零、码仙励志

一、div和span

二、盒模型

三、布局相关的属性

1.position 定位方式

2.定位left（左），right（右），top（上），bottom（下）

3.z-index 层覆盖先后顺序（优先级）

4.display 显示属性

5.float 浮动属性

6.clear 清除浮动

7.overflow 溢出处理

---

零、码仙励志

生活没有太多的十全十美，所有的酸甜苦辣都是最好的回忆

一、div和span

    
    



    
div是块级元素
    
div是块级元素

    span是内联元素
    span是内联元素

二、盒模型

    
    



    
盒模型

三、布局相关的属性

1.position 定位方式

2.定位left（左），right（右），top（上），bottom（下）

正常定位  relative

根据父元素进行定位  absolute

根据浏览器窗口进行定位  fixed

当拖动浏览器滚动条时在浏览器窗口中的位置不变

3.z-index 层覆盖先后顺序（优先级）

默认z-index的值为0，z-index 的值越大，越在上面

默认效果：

添加z-index后：

4.display 显示属性

默认效果：

    
    



    
div
    
div
    
div
    span
    span
    span

使用display效果：

    
    



    
div
    
div
    
div
    span
    span
    span

5.float 浮动属性

默认效果：

使用float以后：

6.clear 清除浮动

默认效果：

使用clear以后：

7.overflow 溢出处理

默认效果：

    
    



    

    	码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
    

hidden

    
    



    

    	码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
    

scroll

auto

本篇博客来自于麦子学院视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901