南大软院21天大神养成计划-第5天

今天是学习的第五天，因为今天是周六，所以今天一鼓作气看完了CSS的后六章，分别是：CSS格式化排版；CSS盒模型；CSS布局模型；CSS代码缩写，占用更少的带宽；单位和值以及CSS样式设置小技巧。

前面一天我开始接触了CSS，了解了一些CSS的基本属性，今天学习了CSS的格式化排版，对于文字的排版有许多的选择，比如：字体、字号、颜色、粗斜体、下划线、删除线。这些排版无意可以为网页的美观提供了巨大的帮助，既然文字有排版，那么由文字组成的段落也应该有排版，对文字的排版也只能对一些特别需要强调的文字进行编辑，如果对大量的文字排版我们就需要掌握对段落的排版了，段落的排版一般有段落的缩进、行间距、字间距以及对齐这几种，都是比较好理解的，也是比较好掌握的。

CSS的元素分类：块状元素、内联元素、内联块状元素。首先块级元素就比如在html中<div>,<p>,<form>等等都是块级元素，块级元素具有几个特点，首先每个块级元素都各自占一整行，元素的基本属性，比如高度宽度等等都是可以编辑的，元素在不设置的时候是跟随父容器一值的，内联元素的代表是<span>,<a>等等，他的特点与块级元素不一样，它的元素是可以在同一行的，元素的一些属性是不能设置的，内联块状元素结合了前俩个特点，它的元素可以在同一行，元素的属性可以改变。接下来介绍的一个是盒子模型，那什么是盒子模型呢？盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如果我们要单独给某一块属性单独设置呢，比如边界底部可以用div{border-bottom:1px
solid red;}来设置，顶部呢就可以用top,右边就可以用right,左边就可以用left。对于盒子模型的宽度的计算公式是左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是类似，盒子模型的填充的顺序是顺时针：上右下左，顺序是不能搞混的，边界的距离也和填充类似。

清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。在网页中，元素有三种布局模型：流动模型，浮动模型，层模型。这里面要属层模型最具有意义，首先什么是层模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。层模型有三种形式：绝对定位、相对定位、和固定定位。绝对定位的的语句代表是position:absolute;值得提醒的是left:100px;这个语句的意思是相对于左边界往右移100像素，不可单纯的认为由中间向右左移100像素，与绝对定位对于的是相对定位，相对定位是相对以前的定位，position:relative; left:100px; top:50px;这个代码表示的是以前的相对现在的往左移100像素，上移50像素，很容易搞反，固定因素就是不会随浏览窗口的变化而变化。

CSS的代码缩写，颜色值缩写，字体缩写等就是把具有相同特性的值用更简便的额方式表现出来，节省时间和空间。比如：p{color:#000000;}可以简写为p{color: #000;}body{ font-style:italic;font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;}、可以简写成body{ font:italic small-caps
bold12px/1.5em "宋体",sans-serif;}这样是不是感觉简便了好多，

最后讲一点CSS样式设置的小技巧，主要是水平居中和垂直居中，水平居中的代码就是通过text-align:center来实现的还有一些定宽，不定宽啊之类的都是比较好理解的，我就不一一介绍了，

CSS的学习到此就结束了，通过学习的CSS的各种功能感觉配合前面的HTML，和Sublime text3会更好，期待能够更全面的理解这几节的内容，以至于可以自己动手操作。