2021-05-17

栅格：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。（十二栅格系统）栅格系统通过行（row）与列（col）组成页面布局，页面内容就放入这些创建好的容器中。内容必须放在创建好的"container"容器中。在行(.row)中可以添加列(.col)，但列数之和不能超过平分的总列数12。具体内容应当放置在列容器（col）之内，而且只有列（col）才可以作为行容器(.row)的直接子元素。通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外（margin）来抵消内距(padding)的影响。将 .container 修改为 .container-fluid，就可以将固定宽度改变成100%宽度。（.container：居中效果，两边会有一个默认为15px的margin边距。.container-fluid：铺满。）如果你的内容想在手机上显示那么你就可以调用.col-xs-。如果你的内容想在平板上显示那么你就可以调用.col-sm-。如果你的内容想在pc上显示那么你就可以调用.col-md-。
栅格特点：
“行（row）”必须包含在 .container（固定宽度）或 .container-fluid （100% 宽度）中
行使用的样式“.row”，列使用样式“col-屏幕尺寸-列数” 元素内容应当放置于“列（column）”内
基本的书写方式必须是：容器—行---列—内容
HTML表格：定义一个表格----行-----单元格
栅格参数：“col-屏幕尺寸-占用列数”
图示：
为了在列里面再次嵌套行，新行两边必须要先消去原列的15px的padding，来保证加入新行之后两列的距离为仍然为30px的padding因为列的两边有-15px的margin，所以列的左右超出了容器，因此需要扩大容器左右两边，所以在左右两边增加了15px的padding，同时也是为了保持15px的槽宽,这里的margin-right与margin-left是控制容器水平居中的。

css和html：
如果我们把一个网页看成一个楼，那么：html：就是楼的结构部分，如梁、柱，地基。体现了网页的基本骨架。css：好比楼房的装修，让网页变得美观。即HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现（外观控制），就像网页的外衣，如标题字体、颜色变化，或为标题加入背景图片、边框等。
html是用来定义文档内容结构的，包含了用户需要浏览的内容，包括图文、视频，即构成网页的基本元素；html是网页的结构（Structure），需要有多种框架和布局，比如frameset框架集、iframe内联框架、div+css布局、table布局等，同时支持表单提交（HTML Form），包括基础表单、input输入框、输入框类型、文本域、列表、label等。html的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
css用于定义html文档的样式，即外观，比如网页上的动态文字、文字的色彩、字体、动画效果，都可以由css来实现。css的主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。
图示：

心得：一开始我并不知道html和css结合的方法，以及栅格的个别概念，但是我从百度和CSDN上找到许多资料，对比阅读，最终解决。