全栈第一步-CSS基础前言CSS基础总结

前言

作为一名后端狗，也有一个全栈梦。前端工程师第一步，CSS的基础得打好。本文仅用于记录上周学习CSS的过程，文中对于CSS知识点可能存在理解错误之处。

CSS基础

CSS主要知识点集中于盒模型，布局，选择器等

盒模型

在对html标签有了整体认识之后，在了解了文档流的概念之后，就得了解元素在整个浏览器中的展现形式。CSS盒模型如下图所示：

css盒模型

从内到外分别为content、padding、border、margin，从盒子模型可知，元素的width和height与padding/border/margin的设置大小有关系，padding,margin等都可以分别设置top、bottom、left、right大小。盒子的整体width、height计算方式比较简单。

目前存在两种不同类型的盒模型，IE盒模型和W3C标准盒模型，区别在于我们在设置的width和height包含哪些部分，从而影响整个盒子的整体高度和宽度的计算。这篇文章对于两种盒模型的区别和计算方法讲得很充分。区别在于IE对于设置的width不仅包含content width，还包含了border和padding。在使用过程中为了统一认识，使用box-sizing:border-box比较好。

上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。html元素有块级元素（block-level elements）和行内元素(inline elements)等。在文档流中，块级元素通常被现实为独立的一块，独占一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

常见的分类有：

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

但是我们可以通过设置元素的display属性来改变布局级别。常见的display属性有三种，block、inline、inline-block；区别如下：摘自网络

display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。 display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

布局

布局算是css非常重要的一块应用吧，常见的网页设计可能会分为顶部导航栏，左侧菜单栏，右侧内容区，底部版权声明等。布局主要靠两种属性，float和postion

float

float有几个属性值，left、right，none等，使用float后元素会脱离文档流，使元素display:block,float不会对其上方的元素产生影响，会对其下方的元素产生影响，可以使用clear:both清除影响。

float的属性值有none、left、right，有几个要点： 只有横向浮动，并没有纵向浮动。 当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。 会将元素的display属性变更为block。 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

position

这篇文章对于position和float讲得非常清楚

1、static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。 2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。 3、absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。 4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。 - fixed这个元素比较重要的一点是参照的对象是浏览器窗口，例如标题栏header或者顶部的导航栏啥的可以选择固定 - fixed与absolute最大的区别就是fixed参照对象是浏览器窗口，而absolute的“根元素”是可以被设置的，默认的话是body标签 static与fixed的定位方式较好理解，在此不做分析。下面对应用的较多的relative和absolute进行分析 比较重要的一点是: relative是相对于自身位置进行定位， absolute是相对于static定位以外的第一个父元素进行定位，包括fixed情况。

总结

本文对近期的CSS学习做个总结，总结过程中发现自己对于position定位还不是特别清楚，后续使用过程中得继续体会，接下来准备学习下bootstrap和jquery。