大前端笔记05

HTML第一阶段day05-浮动

1、盒子类型转换

1. display:block; 转换成块级
2. display:inline; 转换成行内
3. display:inline-block; 转换成行内块
4. display:none; 隐藏

2、标签的嵌套规则

1. 行内标签里面不能嵌套块级标签,只能放行内或者行内块
   • a标签里面不能再套a标签
2. 块级标签里面可以放块级、行内、行内块级
   • 一些特殊语义的标签不能再继续嵌套块级比如 h1里面不能再套p或div , p标签里面不能再放div
   • 固定搭配 ul,ol 里面 直接子标签只能是 li , dl 子标签只能是 dt 和 dd

3、常用其他属性

1）、列表编号样式
list-style: type postion image

• list-style-type 编号类型
• list-style-position 编号的位置 outside inside
• list-style-image: url() 图片作为编号
• list-style:none; 去掉编号
  2）、内容溢出处理
  overflow:
  • visible 显示
  • hidden 隐藏
  • auto 自动 ： 不溢出不显示滚动条，溢出显示滚动条
  • scroll 显示滚动条 ：始终显示滚动条
    3)、垂直对齐方式
    vertical-align: middle; 图片或者表单中线对齐 ,可以解决图片下方多出的空白
    4)、图片下方多出空白解决方法。
    A、vertical-align: middle;
    B、display:block;
    C、把图片父元素 font-size和line-height设置为0 , 相邻的两个行内块之间的间距也可以同通过这个方法解决

浮动

• 布局方式： 文档流、浮动布局、层布局（定位）
• 文档流： 标签按照本身的属性进行排列，比如块元素从上往下排列，行内元素从左往右排列
• 浮动布局： 用来实现水平排列的模块（左右结构，左中右。。。）
• 左浮动 ： float:left
  • 左浮动的元素尽可能往左走，直到碰到父元素的边缘，或者相邻的浮动的元素停止
  • 多个左浮动的元素，从左往右依次排列
  • 左浮动的元素会脱离文档流
• 右浮动 : float:right
  • 右浮动的元素尽可能往左走，直到碰到父元素的边缘，或者相邻的浮动元素停止
  • 多个右浮动的元素，从右到左依次排列
  • 右浮动的元素会脱离文档流
• 取消浮动 : float:none; 元素会回到文档流

clear属性

• 用来清除浮动元素对文档流内元素的影响
• clear:left; 清除左浮动的影响
• clear:right;清除右浮动的影响
• clear:both; 清除左右浮动的影响

清除浮动： 解决浮动元素无法撑开父级高度问题

• 解决方案：
  1、给父级设置height值 （不够灵活）
  2、给父级设置 overflow:hidden;
  3、在浮动的元素之后添加一个文档流内的元素，给其添加 clear:both属性
  4、给需要清除浮动的父元素添加clearfix

      .clearfix:after {
          content: '';
          display: block;
          clear: both;
      }
      
      .clearfix{  //处理ie低版本的兼容问题
          *zoom:1;
      }