DIV+CSS基础总结

一、无意义标签

1.DIV

• 块级元素，会自动换行（独占一行）

2.Span

• 行内元素，内容显示在一行内

二、块级元素和行内元素

1.块级元素特点

• 总是在新行上开始，占据一整行
• 高度，行高以及外边距和内边距都可控制
• 宽度缺省是它的容器的100%，除非设定一个宽度
• 它可以容纳内联元素和其他块元素
• 宽度默认为父元素body的宽度
• 高度被内容撑起了
• 块状元素设置文本属性没用（元素之间没用空隙）

2.行内元素特点

• 和其他元素都在一行上；
• 高，行高及外距和内边距部分可改变；
• 宽度只与内容有关
• 行内元素只能容纳文本或者其他行内元素
• 外边界(margin)只对左右起作用，内边距（padding）都起作用
• 行内元素（会被当成文字看待，元素之间有空隙）

3.行内元素和块级元素的比较

• 块状元素独占一行， 行内元素可以共用一行
• 默认宽度： 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
• 块状元素可以设置宽高， 行内元素不可以设置宽高
• 大部分块状元素内部可以嵌套块状或行内， 大部分行内只能嵌套行内
• 外边距，块状没问题，行内只能设置左右

三、盒子模型

1. 每个盒子都有四个属性：

• 边界(margin)
• 边框(border)
• 填充(padding)
• 内容

四、盒子之间的关系

1.Document树

• 父元素
• 子元素
• 后代元素
• 祖先元素
• 兄弟元素（具有相同父元素）

2.标准文档流

• 行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域，它同样是DOM树中的一个节点，在这一点上行内元素和块级元素没有区别。
• 块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

3.盒子在标准流中的定位原则

• 行内元素之间的水平margin（为左右margin之和）
• 块级元素之间的竖直margin(合并margin会塌陷)
• 嵌套盒子之间的margin(子元素父元素margin合并)
  • 元素嵌套的时候，设置元素的上margin会被父元素抢走
  • 解决方案：设置overflow:hidden;或border:1px solid #ccc;
• 将margin设置为负值

五、相关CSS属性

1.布局属性

• display
  • 块状元素与行内元素的转换
    • block
    • inline：块状转换为行内
    • inline-block：会产生一个介于行内和块状元素之间
      • 除了不会独占一行，其他和块状一样，可以设置宽高了（本质上是行内）
      • img,表格,表单等元素
    • none：隐藏元素（看不见，而且不占空间）
• visibility
  • 可见属性:主要隐藏表格的一行或一列
    • hidden：隐藏（看不见，但是还占空间）
    • visible：可见（默认）
    • inherit：继承上一个对象可见性
    • collspase：
• overflow
  • 超出范围（值如下：）
    • auto：自动设置（不溢出没有滚动条，溢出有滚动条）
    • scroll：总显示滚动条
    • visible：不剪切内容，溢出内容也显示，也不添加滚动条,
    • hidden：不显示超出对象尺寸的内容
• overflow-x

• overflow-y

• float
  • 浮动属性（将文字设置在元素的周围）
    • left
    • right
    • none
• clear
  • 清除属性（是否允许有其他元素漂浮在周围，清除浮动对后面元素的影响）
    • none：允许两边都可以有浮动
    • left：
    • right
    • both：完全不允许有浮动

2.尺寸属性

• height
• min-height：最小高度，如果文字比较多会自带撑开而不会溢出（经常使用）
• max-height：最大高度（显示默认值）
• width
• min-width：显示父元素的宽度（默认值）
• max-width：最大宽度
• border

3.内补白

• padding（内边距）会影响整个盒子的大小
• padding-left
• padding-right
• padding-top

• padding-bottom

    padding：上下左右;
    padding：上下 左右;
    padding：上 左右 下;
    padding：上 右 下 左;

4.外补白

• margin（边距/外边界）
• margin-left
• margin-right
• margin-top
• margin-bottom
• p,ul等自带margin,可以自己设置为margin:0px;(0时可以不加单位)

5.定位属性

• position
  • absolute：绝对定位，脱离文档流，下面的跟上来了
    • 元素一旦设置了绝对定位，都变成块状元素
    • 如果父元素没有定位，就相对于html（屏幕）定位
    • 只要父元素定位了，就会以父元素为参照定位
  • relative：相对定位，相对于自己（对象不可层叠）
    • 一个元素一旦设置了相对定位，都变成块状元素
  • fixed：固定在指定位置（相对于浏览器窗口进行定位）
    • 永远参照html进行定位
  • static：默认值，不定位，在文档流里面
  • 文档的位置通过left/top/right/bottom属性进行规定
• top
• left
• right
• bottom
• z-index
  • 只能设置给已经定位的元素
  • 可以将元素显示在上面，数值越大越在上面
  • 设置显示层级(层叠顺序)
    • auto（表示遵循其父对象的定位属性）
    • number（没有单位的整数）可以为负值

6.属性的继承问题

• 文本类，字体，颜色（跟文字有关）的会被继承
• 背景颜色（默认值是透明），布局相关的不会被继承

转载于:https://www.cnblogs.com/1666818961-lxj/p/7257901.html