day23-CSS3-基础二

一、标准流

1.标准布局

• 标签在没有添加任何布局样式的时候默认的布局方式就是标准流布局
• 1)块级标签：在标准流中，一个占一行；设置宽高有效；默认宽度是父标签的宽度，高度是内容的高度。例如：p、ul-li、div、h1-h6
• 2)行内标签：一行可以显示多个；设置宽高无效；默认大小是内容的大小。例如：a、label、font、span
• 3)行内块标签：一行可以显示多个；设置宽高有效；默认大小是内容大小

2.display属性：设置标签的类型

• block(块级)：将标签转换成块级标签
• inline(行内)：将标签转换成行内标签
• inline-block(行内块)：将标签转换成行内块标签
• none：隐藏标签

二、浮动

1.脱流/脱标：脱离标准流布局

• 标签不管用什么样的方式脱流了，标签的布局规则都变成：一行可以显示多个，设置宽高有效
• 浮动和定位都会让标签脱流

2.浮动：让竖着显示的横着来

• 设置标签的float属性为left或right
• 内容的环绕：让被环绕的内容对应的标签浮动，环绕的内容对应的标签不浮动
• 清除浮动：指的是清除因为浮动而产生的高度塌陷的问题；
• 什么时候高度塌陷：父标签不浮动并且没有设置高度，子标签浮动，这个时候父标签高度就会塌陷
• 解决方法：
  • 1)空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置空的div样式的clear属性值为both
  • 2)设置overflow：设置高度会塌陷的标签样式的overflow属性值为hidden
  • 3)万能清除法：.class:after{display:block;clear:both;content:'';visbility:hidden;height:0;}.class{zoom:1;}

3.定位

• 定位：通过设置上下左右的距离来对标签进行定位
• 1)position属性：设置定位时的参考对象
  • initial/static：默认值，表示不定位(body标签的position默认不是initial/static)
  • absolution(绝对定位)：将第一个非initial/static的父标签进行定位
  • relative(相对定位)：相对标签自己在标准流中的位置进行定位(一般会将被参考的对象设置为relative)
  • fixed(相对浏览器定位)：相对浏览器定位
  • sticky：当网页的内容没有滚动，相对标准流定位；滚动的时候相对浏览器定位
• 2)left,right,top,bottom：设置距离(如果没有设置position确定参考对象，设置距离无效)
• 注意：标签定位成功后也会脱流

三、盒子模型

1.盒子模型

• html中每个可见的标签都是一个盒子模型，由content、padding、border和margin组成
• 1)内容部分(content)：设置标签的宽度和高度其实就是设置标签的内容的大小；子标签是添加在内容部分上的，文字、图片的显示都是在内容部分；设置背景会作用于内容部分
• 2)内边距(padding)：默认情况下padding的值是0；需要通过padding相关属性去添加；给padding设置后，padding的部分可见；设置背景也会作用于padding
• 3)边框(border)：边框有4个方向，而且每个方向的粗细、颜色和样式都可以不一样
• 4)外边距(margin)：有4个方向；margin不可见但是占位置