网页布局需要的基础知识总结

1. block inline inline-block

2. 盒模型

css box model 包含4大属性,分别是 content padding border margin
content 元素的内容
boder 框线 边界
padding 内容和框线之间的距离
margin 框线和其他元素之间的距离

padding的部分是背景颜色会覆盖的
如果元素是一个可点击的元素,例如超链接,padding的部分也会纳入可点击范围,而margin不会
margin在垂直方向会出现边界重叠现象,取最大

以上属性是基于block元素的
在inline元素下,margin和padding在垂直方向的效果是特殊的.就是说inline的属性并不会影响垂直方向的版面布局

content-box:就是宽度的设定是content这一层的宽度
border-box: 就是宽度的设定是border这一层的宽度

3. 浮动

元素浮动,后续(同级元素或者父类后面的元素)的内容排版依然会被影响(遮住,环绕)
所以要清楚浮动:

• clearfix
• 伪类:after
• 设定为bfc

可以实现文字环绕效果.

三列布局:

4. position

作用是将元素在网页中定位
设定值有: static absolute relative fixed sticky

5. 上下左右居中

左右居中

元素左右居中是一件很容易的事

• 元素dispaly属性是inline或inline-block,使用text-align:center就能将它左右居中
• 元素dispaly属性是block,将margin-left和margin-right设定为auto就可以

上下居中

元素的上下居中就没那么容易,常用的3个上下居中的方法

1. 第一种方法
   
   

   这时候,元素的左上角就会对应画面的中心点.
   要将元素的中心点对齐画面的中心点,将它向左偏移一半距离和向上偏移一半距离,可以通过transform属性
   
   
   这样就可以达到上下居中效果了.

2. 第二种方法
   

3. 第三种方法
   
   总结:
   
   第一种方法是将元素自己与画面中居中,只需调整元素本身的属性就可以
   第二种和第三种,是先将容器调整成与画面具备相同的大小,然后再设它的内容的对齐方式

6. BFC

• 为什么会有BFC
  理论上,被包含在父元素里的元素是不会影响到父元素旁边的元素,但实际上却并不总是如此
  如何让里面的元素和外部真正的隔离开–你可以试试BFC(块级格式化上下文)
• BFC是什么
  
  只需记住,BFC目的就是 形成一个完全独立的空间,让空间中的子元素不会影响到外部的布局
• 如何触发BFC
  
  就是让元素脱离文档流
  触发了BFC的容器就是页面上一个完全隔离开的容器
  触发了BFC的元素,为了让子元素不影响外部,会自己做出一定的改变,而不是子元素变.
• BFC可以解决的问题
  

7. css单位

8. flex布局

9. grid布局