Day3标准流层模型浮动模型

2019-01-23  本文已影响0人  ququququ

一、标准流

1.什么是标准流

​ 标签在没有添加布局相关的样式的时候,在浏览器中默认的布局方式

​ 块级标签在标准流中是一个占一行(不管宽度大小),默认宽度是父标签的宽度;设置宽高是有效的

二、display属性

display属性(CSS属性):

  1. ​ block(块)
  2. ​ inline(行内)
  3. ​ inline-block(行内块)- 默认左右间隙,这个间隙可以通过将父标签的字体大小设置为0 来去掉
  4. ​ none(隐藏)

三、浮动

浮动会让标签脱流

​ 脱流 - 让标签脱离标准流布局,不管什么标签脱流了,

​ 都是按'一行可以显示多个,默认大小是内容大小,并且设置宽高有效'的方式布局

​ float属性

​ left

​ right

应用:文字环绕(被环绕的标签浮动,文字标签不浮动)

四、清除浮动

1.高度塌陷

​ 当父标签不浮动,子标签浮动的时候,父标签就会产生高度塌陷的问题

2.清除浮动

​ 清除浮动指的是因为浮动而产生的高度塌陷

a.方法一:添加空盒子

​ 在高度会塌陷的父标签的最后添加一个空的div;然后给空的div添加样式设置clear属性,属性的值为both

b.方法二:overflow

​ 给高度会塌陷的那个父标签,添加样式设置overflow属性值为hidden

(记)c.方法三:万能清除法

​ 选中高度会塌陷的那个父标签,给after状态添加样式display: block;clear: both;content: "";visibility: hidden;height: 0;

​ 然后再给这个父标签添加样式:zoom:1

五、定位

1.定位

​ 定位会让标签脱流

2.定位属性:

​ 以上4个属性想要有效,必须通过position属性来说明参考对象

​ position属性:

  1. initial和static - 默认值,不能定位(定位无效)

  2. absolute - 绝对定位;以第一个position的值不是默认值的父标签进行定位(注意:body标签的position不是initial和static)

  3. relative - 相对定位;相对于标准流定位:(相对自己在标准流中的位置进行定位);

    ​ 一般使用relative是在标签本身不要定位,但是希望自己的子标签相对自己定位的时候使用

  4. fixed - 相对浏览器定位

  5. sticky - 当浏览器内容没有超过一屏的时候,显示在内容的最下面;当浏览器内容超过一屏bottom有效,并且显示在浏览器的底部

    (top和bottom有效,left和right无效)

六、盒子模型

1.盒子模型

​ 网页上所有的可视标签都是一个盒子模型:

​ 一个标签是由4个部分组成,分别是:内容(content)、padding、border、margin;

​ 其中content、padding、border是可见的,margin不可见,但是占位

2.盒子模型的每个部分

​ content - 标签内容;设置标签的宽高其实是作用于content;标签中的文字和子标签都是添加在content上的

​ padding - 在内容外部,默认是0;可见的,并且背景颜色也作用于padding(padding和content的颜色一样);有4个方向

​ border - 边框; 默认是0,可见的,有四个方向;颜色和大小都可以单独设置

上一篇 下一篇

猜你喜欢

热点阅读