HTML+CSS复习之CSS基础篇

内容简述

关于CSS，确实太繁杂了，内容多。写好不易，基本上就这个调了。你们确定听过CSS奇淫技巧吧，关于这个我尚未去深刻了解，只是说普通的效果啥的，我基本没问题了。我以前学CSS的时候也是感受很心累，体会到了设计不当，对CSS属性理解不深，继而形成的牵一发而动全身的恐怖事件！！，太可怕了！！

只要我稍微改动一下，搞很差整个页面都乱了，我以前在百度前端技术学院里作任务，让我体会到了这一点，不过那是以前，后来写的页面多了，看看别人总结的经验，慢慢的明白CSS应该如何写了，若是你研究过Bootstrap的源码，那么你的css确定不差，后面我也会研究BT的源码，到时候再更新吧。

这篇文章讲的是CSS入门核心，你只要把这个学会了，天然CSS大致定格了，那么究竟讲啥子呢？ 我分红以下几部分来说解：

tips: : 如下例子，均以Google浏览器为准

• 外补白(margin)

• 内补白(padding)

• 继承特性(inherit)

• 标准文档流(normal)

• 浏览器默认样式(user agent stylesheet)

• 布局(layout)

• 定位(position)

• 样式层叠(优先选择模式)

温故而知新,能够为师矣

外补白(margin)

学习CSS，必定要会看盒子模型!! 看下面代码：（如下代码，浏览器默认样式均没有）

你们立刻就知道，页面上该是啥样了吧，可是确定也会有你理解错的地方啦，咱们一块儿来看看
首先看总体效果：

嗯，和我想的同样，再来看one的盒子模型：

能够看到，盒子one的四周都有20px的间隔，这个就是margin，也就是说，在我周围20px范围内是不容许有任何东西的！！
其实盒子two的盒子模型也是同样的，因此咱们很容易理解总体效果了。咱们如今知道了

margin做用于兄弟元素，也就是说，同级别的，个人margin就是个人保护区，不管你是谁，你都不准靠近个人保护区，你只能在外面站

可是，下面这个你可能不知道了，能够看到，咱们这个代码，对one和two来讲，有共同一个父级，咱们看到，原来，左边也有20px的距离呢！

看明白了吧，其实对于父元素而言，margin只会在水平方向起做用，竖直方向不起做用哦，因此，你是否是有经历。改了子元素的margin-top，握草，整个布局都乱了，就是这个道理，父元素的顶部是紧贴子元素的。还有一点，body的盒子模型和container是同样的
接着分析，看下面：

咦，怎么这里又顶部有了20px呢？不是说不起做用吗？，其实，这个是html的盒子模型，下面会讲到浏览器的默认样式，html默认是没有margin和padding的，也就是说，全部的内容，都是html的content区域

margin-top 的20px虽然没有对父级元素起做用，可是它让父级元素的父级元素body的 margin-top 为20px了，这个很重要.

margin的性质

有一个性质，那就是不叠加，取最大！仍是上面那个例子，若是我设置container的margin-top为20px 是不会有任何变化的，为何呢？由于container , body是父子关系，根据上面说的，他们两顶部一直贴边，你设置了container的margin-top为20px，原本就有20px的间距，你同样的值，他固然不会变，若是你设置成30，那么就会往下移动10px了，这是特性。

内补白(padding)

上面讲了外补白，这里讲内补白，其实内补白没有什么难的，可是呢，不少人，也会掉坑里，平时写CSS的时候不注意，容易掉坑，简单的东西都要写好久，就是由于没有理解其特殊性。
内补白和外补白都须要理解盒子模型，那么在外补白咱们已经见过盒子模型了，也有padding，margin，content，border呀,看一下我改动的代码：

一会儿贴了三张图，padding是什么呢？说白了就是父与子的关系，只存在父子关系，全部设置了padding的元素，那么里面的东西，都只能在盒子padding里面写入，这个属性，通常用于，内容区域与边框有必定的规律性间隔，用padding是最合适的了，注意哦，此时盒子one的总大小不是120 * 120了哟，而是140 * 140啦，这是个坑！！ 总结一下：

padding 是针对父与子的，父元素设置了padding，子元素排布不在顶边，而是与父元素边框有距离了。

tips ：这里要注意一点，就是你设置的width和高度是不包含padding的，因此一旦设置了width和height，你在设置padding的时候，必定要注意，有可能会打乱布局，咱们应该加入box-sizing:border-box，这样的话，width就包含padding了，仔细观察盒模型

• 最后总结：标准盒模型，在盒子浏览器占据的总宽度是这样计算的：border+padding+content （你设置的width，height是content的宽度）

• 在标准文档流下，一个盒子占据浏览器的位置 ：margin+border+padding+content ( 也就是说，这些区域不能有其余的元素占据 )

继承特性(inherit)

继承特性，这个就很差讲的很细，可是你想要好写好CSS，不只仅你要理解继承 ，并且继承还要用的妙，这样在你写CSS的过程当中，能够精简不少代码。我如今看之前写的CSS代码，很垃圾，彻底就是堆叠代码，惨不忍睹。

继承性是指指被包在内部的标签将拥有外部标签的样式性，即子元素能够继承父元素的属性，例以下面的代码，div中包含2个p标签，1个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，于是会显示红色。 在CSS中以text-、font-、line- 开头的属性都是能够继承的。

CSS里面有许多属性是能够继承的，注意了，继承必定是继承父级元素的样式！！

在这里我就列出能够继承的属性，和不能继承的属性啦

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

全部元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

举例：

• a 标签的字体颜色不能被继承，例如将上面代码的div标签中代码改成以下的代码后，a标签的字体颜色是不会改变的，经过页面的F12能够查看获得，a标签是有一个默认的 color: -webkit-link;字体颜色属性，因此给父元素设置颜色是不能改变a标签字体的颜色

• h标签字体的大小也是不能被继承的，以下代码给父元素在设置一个字体属性20px，在div中添加一个h2标签，在浏览器中能够发现h2标签中的字体大小不会改变，由于h2标签中也有一个默认的默认的font-size: 1.5em;字体大小属性，

• div 标签的高度若是不设置由内容来决定（没有内容高度为0），宽度默认由父元素继承过来，下面的代码就很好的演示了div的宽高，在每一个div标签后面添加了一个br标签来强制换行，由于若是不使用br标签来强制换行的话，div就会牢牢挨着一块儿，看不不出来div的高度，第一个div由于没有内容，因此在浏览器上不显示出来，而第二div里面添加了一句话，可是高度是由里面的内容撑出来的，第三个div里面也是一句话，而且在内容当中使用了一个br标签来强制换行，这样就会发现该div的高度会比第二div的高度要高，若是继续向div标签里面添加内容，高度也会随之相应的变高。

a元素涉及到浏览器默认样式，下面会讲到默认样式

标准文档流(normal)

• 块级：占一行，无论有多大，我就占一行，占了一行，谁都不能再占我这一行,设置宽高起做用，占一行以后，不够一行的位置，均是用margin替代,这一行不够一整行的位置，我就另起一行。

• 行级：有多大，占多大，有空位子我就占,对此种标签设置宽高不起做用，每一个行级标签默认有间隔，没法取消

• 规则：无论怎么占据，已经被占据的位置，必定不能再被占

浏览器默认样式(user agent stylesheet)

每一个标签都有默认的样式，好比a标签，默认蓝色，下划线，img标签默认有边框，p,ul li,dt,dd标签默认有margin或者padding什么的，H1~H6标签字体形状和大小，都会有其默认的样式
已下是HTML，和body的默认样式

html 
width :浏览器宽度
height = 8px
padding 0,margin 0 border 0

body
height : 0
width:浏览器宽度
padding 0 margin 8px border 0

来看一段代码:

能够看到，默认样式原来是这样的呢！

 

还有不少标签的默认样式，这里就不一一举例，你们平时多看看，就记得住了。每一个浏览器可能表现不同。

布局(layout)

• display : none | inline-block | inline | block |

• visibility : visible | hidden | collapse

• float: left | right

• clear: left | right | both

• overflow : hidden scorll | auto

float: 脱离标准文档流 ，不按正常路线走, 我飘起来了，在空中呢，其余的元素当我不存在
设置浮动后，宽度再也不默认父级元素的宽度(全部浮动的元素都是依次排，位置不够往下走)
浮动以后，父级元素坍塌，你能够理解，我在空中，我在顶层，我是最外面的图层，其余人占了个人位置，可是只显示我，由于我是最外的图层。
看这个布局，你就明白了

提出几个问题：

1. div是快级元素，为何会和盒子one站在一块儿呢？不是说块级元素必定要占一行吗?

2. two盒子没有设置宽度，那么宽度就是100%了，也就是body的宽度，为何没有溢出body容器呢？

当你真正理解，我问的问题就都不是问题了！理解布局，什么页面你都能搞定的！

clear：清除浮动，后面的元素对前面设置浮动的元素，不理睬，常常用在受浮动影响的元素（咱们是不但愿他受影响）
其实前面元素浮动了，对后面同级元素确定会受影响的，同级元素当他不存在，确定就从浮动的元素位置排布嘛，确定有影响的，并且父元素高度坍塌，这个很影响布局
因此咱们要考虑周全，深入理解特性。

overflow : 超出隐藏 overflow-x/-y 在水平方向或者垂直方向隐藏

tips:overflow属性，通常不用再比较高的祖先辈元素，其继承特性很危险！！！

定位(position)

人人都说定位难，定位是干啥用的呢？定位的用处就是，你要精确地控制元素的位置，比较特殊的位置，普通文档流和布局都搞不定的时候，就要用到定位了

position: static(默认) | relative | absolute | fixed

元素

• absolute: 绝对定位， 定位？ 根据谁来定？ （若是父级元素不存在定位元素 相对html定位）若是父级存在非static定位元素，则按照就近原则定位 , 一旦定位, 有了新的图层，（脱离文档流 ），图层顶层

• relative:相对定位，没有脱离文档流，占位置，相对本身原来的位置定位

• fixed:固定定位,相对于浏览器窗口定位，不随内容变化，一只固定在窗口位置

• z-index: (int)number 改变图层，用于定位元素（非static）

• top,right,bottom,left : px percentage 只用于定位元素(非static定位),移动

定位就这么多内容了，这些应该是比较容易理解，可能应用上就懵逼了，哈哈，初学的话，都是这样的

样式层叠（优先选择样式）

样式有几大引入方式
内嵌，内部样式表，外部样式表，默认样式，继承样式

• 内嵌：就是写在标签里面的

• 内部样式表：就是直接写在页面上的

• 外部样式表：是一link形式引入的

• 默认样式：就是浏览器给的也叫（user agent stylesheeet）

• 继承样式：继承父元素的样式

图解：

记住规则：

• 就近原则，内嵌>内部样式表>外部样式表

• 默认样式>继承样式（这两种样式都是最低级的那种）

其余属性

其余属性，遇到难理解的在着重讲一个，属性太多，有的很简单，没有记录的必要，不过我以为针对移动端布局，这个仍是很重要的，想看移动端布局CSS请看我这篇文章：[HTML+CSS入门之CSS3移动端布局]()

CSS参考手册：推荐这个网站的不错：CSS参考手册_WEB前端开发参考手册系列