复习2-HTML-CSS

94 阅读2分钟

经过上次发的那篇文章来看,把全部知识点的发文章,我觉得效果并不是很好,并且是复习而且还又多又很基础的发出来,所以我觉得复习终究还是复习,接下来我就不会一点点的去总结知识,我会把大章节里的一些我个人觉得这个知识点重要发出来并总结一下

1.盒子模型

我们在网页上看到大部分元素其实都是一个盒子连接另一个盒子组成的,css将页面中所有元素都设置为一个矩形的盒子,这个盒子默认是由以下组成:

  1. 内容区(concat)
  2. 内边距(padding)
  3. 边框(border)
  4. 外边距(margin)

有时候明明设置了宽高结果这个盒子还是超出的我的想象,导致了所有布局都乱了,有可能就是因为你设置了border 内边距 外边距这些样式,设置这些属性还会导致重绘,那么这时候该怎么办,css有个样式 box-sizing:border-box,设置完之后,盒子的组成就是以下组成

  1. 内容区(concat)(concat=width+height+border+padding+margin),也叫IE盒模型

2.文档流

网页是一个多层结构,一层叠加又一层 用 css可以分别设置每一层的样式 我们所创建的元素默认都是在文档流中进行排列

元素在文档流中有什么特点

-块元素

​ -块元素会在页面独占一行(自上往下垂直排列)

​ -默认宽度是父元素的全部(会把父元素撑满)

​ -默认高度是被内容撑开(子元素)

​ -行内元素

​ -行内元素不会独在页面的一行,只占自身的大小

​ -行内元素在页面从左往右水平排列,如果一行不够,则元素换行到第二列继续排列

​ -行元素的默认宽度和高度都是被内容撑开的