web前端问题总结---CSS，HTML

◆内边距撑大盒子的问题  

影响盒子宽度的因素

内边距影响盒子的宽度  padding会撑大盒子的大小

边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

◆继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

◆垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的是设置较大的值。

◆嵌套的盒子外边距塌陷：直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷

解决方法:  1  给父盒子设置边框(不推荐使用)

                  2 给父盒子overflow:hidden;   bfc   格式化上下文

    BFC的详解:   http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

◆行内元素关于padding和margin问题

    两个注意:行内元素不要给上下的margin和padding 上下的margin和padding会被忽略

    左右margin和padding会起作用

◆绝对定位

Position:absolute;

特点：

★元素使用绝对定位之后不占据原来的位置（脱标）

★元素使用绝对定位，位置是从浏览器出发。

★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。

★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

◆相对定位

Position: relative;

特点：

★使用相对定位，位置从自身出发。

★还占据原来的位置。

★子绝父相（父元素相对定位，子元素绝对定位）

★行内元素使用相对定位不能转行内块

◆Display总结

/* inline */
1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断
2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下
3.content由文本内容撑开
4.inline标签只嵌套inline标签

/* inline-block */
1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示
2.支持所有css样式
3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)
4.inline-block标签不建议嵌套任意标签

/* block */
1.异行显示, 不管自身区域多大, 都会独占一行
2.支持所有css样式
3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高
4.block可以嵌套任意标签

◆OverFlow总结

/* 本质 */
1.overflow: 处理内容超出盒子显示区域
  overflow: auto | scroll | hidden
  auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示
  scroll: 一直采用滚动方式显示
  hidden: 隐藏超出盒子显示范围的内容

◆浮动布局

float: 浮动布局, 改变BFC的参照方位
为什么要使用: 使用它, 块级盒子就会同行显示

float: left | right;  左 | 右 浮动
left: BFC参照方向从左向右
right: BFC参照方向从右向左

浮动的区域有父级的width决定

 

◆清浮动

浮动问题: 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题

清浮动: 解决上面的问题, 通过使父级获取一个合适的高度, 这样子级就不会和父级的兄弟布局发生重叠

clear: left | right | both

① 设置父级的死高度
② 通过兄弟设置 clear: both

③ 设置父级overflow属性
.sup {
    overflow: hidden;
}

④ 通过父级:after伪类
.sup:after {
    content: "";
    display: block;
    clear: both;
}

基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style 

    分类: 单双 | dispaly 
    inline: span | b | i | a 
    inline-block: img | input 
    block: div | h1-h6 | p | ul | hr | br 

◆浮动布局总结

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

◆盒子显隐

 display: none;
在页面中不占位, 显示会影响其他标签布局,采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时

opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时