CSS页面

开发工具与关键技术：MVC/C#
作者：张文静
撰写时间：2019/4/7
1、pt:指绝对长度
即px：pixel，像素，屏幕上显示的最小单位，主要用于网页设计，同样px的元素在不同分辨率的显示器中会呈现为不同的大小；
pt：point，是一个标准的长度单位（一般音译为磅），1pt＝1/72英寸，即1px=0.75pt，主要用于印刷业，同样pt的元素在不同的打印机中打印出来大小都是一样的。见截图

2、box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。它的语法包含box-sizing:content-box和box-sizing:border-box和box-sizing:inherit，即
box-sizing:content-box（规定宽度和高度，宽度和高度分别应用到内容框，在元素之外绘制内边距和外边距）
box-sizing:border-box（为元素设定的宽度和高度决定了元素的边框盒，也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。）
box-sizing:inherit（规定应从父元素继承box-sizing属性的值），见截图

3、rem 指em ，即1rem=16px ,em：即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。见截图

4、max-width 定义元素的最大宽度,即
max-width:none(默认，定义元素的最大宽度没有限制 )
max-width:length(定义元素的最大宽度值 )
max-width:%(定义基于包含它的块级对象的百分比最大宽度)
max-width:inherit(规定应该从父元素继承max-width属性的值)，见截图

5、text-align 文本对齐方式，包括
text-align:conter （文本排列到中间），
text-align:left（文本排列到左边），
text-align:right （文本排列到右边），
text-align：justify （实现两端对齐文本），
text-align:inherit（规定应该从父元素继承text-align属性的值），见截图

6、margin:外边距，外边距属性，分别设置上、右、下、左外边距，即margin-top、margin-right、margin-bottom、margin-left，见截图

7、padding：内边距 ，内边距属性，分别设置上、右、下、左内边距，即padding-top、padding-right、padding-bottom、padding-left，见截图

8、font-weight 该属性设置文本的粗细，值分别有
font-weight:normal(默认值，定义标准的字符)、
font-weight:bold(定义粗体字符)、
font-weight:bolder(定义更粗的字符)、
font-weight:lightter(定义更细的字符)、
当font-weight:normal、font-weight:bold见截图图1和图2；当font-weight:bolder、font-weight:lightter见截图图3和图4，

9、border 边框，即四种边框，分别是
border-left（设置左边框，一般设置左边框样式使用）
border-right（设置右边框，一般设置右边框样式使用）
border-top（设置上边框，一般设置上边框样式使用）
border-bottom（设置下边框，一般设置下边框样式使用），见截图

10、display:flex 布局方式，flex是Flexible Box的缩写，意思是”弹性布局”，用来盒状模型提供最大的灵活性，见截图

11、nth-child(n)选择器的意思， :nth-child选择器匹配属于其父元素的第n个子元素，不论元素的类型。n可以是数字、关键字、或公式。Odd和Event是可用匹配下标是奇数和偶数的子元素的关键词（第一个子元素是下标1），使用公式（an+b）。描述：周期的长度，n是计数器（从0开始），b是偏移量。CSS中 “>” 号，表示css3特有的选择器，即当A>B表示选择A元素的所有子B元素。与A B的区别在与，A B选择所有后代元素，而A>B只选择一代。列子：
first-child表示选择列表中的第一个标签
last-child表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第3个标签
nth-child(2n) 这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签
nth-child(2n-1) 这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签
nth-child(n+3) 这个表示选择列表中的标签从第3个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从0到3，即小于3的标签。
nth-child(3n)表示选择列表的标签从3的倍数开始
nth-last-child(3) 这个表示选择列表中的倒数第3个标签。
见截图：

页面的样式和它的运行结果，见截图：