css定位基础



  • 盒模型

    内容区宽度: width

    内边距: padding

    边框: border

    外边距: margin

    基本布局与定位

    块元素从上往下流,各元素之间有一个换行

    内联元素从左上到右下流

    内联元素与块元素的外边距

    浏览器并排放置两个内联元素时,会将它们的外边距叠加

    浏览器上下防止两个块元素时,会将它们共同的外边距折叠

    当元素互相嵌套时,只要两个垂直外边距碰到一起,它们就会折叠。例如如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,也就不会折叠。

    float:浮动元素

    1. 浮动一个元素时,如果希望他在某个元素后面,就将要浮动的元素的HTML紧挨在那个元素的下面
    2. 块元素会忽略浮动元素;内联元素围绕浮动元素排列
    3. 块元素、内联元素都可以浮动
    4. 浮动元素的步骤
      • 指定一个标识
      • 指定一个宽度(width)
      • 设置float属性

    绝对定位

    1. 当指定一个元素绝对定位时,浏览器将它从流中完全删除
    2. 浏览器根据left、right、top、bottom属性定位该元素
    3. 块元素、内联元素都会忽略绝对定位的元素
    4. 块元素、内联元素都可以使用绝对定位
    5. 绝对定位的位置是相对于距离它最近的父元素指定的
    6. 相对于浮动定位,绝对定位可以保证内容的顺序

    相对定位

    1. 相对定位与绝对定位很类似,但元素仍在页面流中
    2. 相对定位是相对其外围包含元素定位

    固定定位

    1. 固定定位是相对于浏览器窗口边界 的,而不是页面边界。

 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.