05_CSS入门和高级技巧(3)

上节课复习

!important不能影响就近原则，远的标签如果加上!important也干不过近的标签！

!important不能影响继承权重是0，通过继承的标签加上!important也干不过直接选中的标签！

盒模型

网页中的所有标签都是盒子，都是矩形，都有width、height、padding、border、margin属性的。

最重要的一个知识点，就是width和真实宽度的关系。

1.会看懂盒模型图

div{

	width: 200px;

	background-color: greenyellow;

	padding: 20px;

	border:30px solid red;

}

也就说，padding、border都是外扩的。

2.padding内边距

padding就是内边距，指的是边框内侧到内容的距离。

padding的设置有很多方法

padding:50px;设置四个方向的padding都是50px;

四个值：

padding:10px 20px 30px 40px;等价于单独设置了上、右、下、左的padding分别分10、20、30、40等价于

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:40px;

三个值：

padding:10px 20px 30px;

等价于

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:20px;   /*左边的值没有指定，所以和右边相同*/

两个值：

padding:10px 20px;

等价于

padding-top:10px;

padding-right:20px;

padding-bottom:10px;

padding-left:20px;

注意，一些元素默认带有padding：比如ul等等，

为了防止这些默认的padding、margin影响我们制作页面，我们要在页面开头书写：

<style type="text/css">

*{

    padding:0;

    margin:0;

}

</style>

就能把所有标签的默认的padding、margin都去掉。

当然这么写有效率问题，别担心，项目课将告诉你最正确的清除默认padding、margin的方法。

3.border边框

边框有三要素：粗细、线型、颜色。

border:1px solid red;

px就是边框的宽度， solid就是边框的线型， red就是边框的颜色。

线型：

工作中只许使用solid(实线)和dashed(虚线)，其他的所有的线型都有兼容性问题，如果想制作其他类型的边框，必须切图！

兼容性问题，IE浏览器中和Chrome浏览器中的边框，明显长得不一样。

注意，三要素分别对应了三个小属性：

border:10px solid red;

等价于

border-width:10px;

border-style:solid;

border-color:red;

我们称呼border为“复合属性”。

特别的，如果我们想为某一个边，单独设置三要素，那么可以拆分为12个小属性：

border:10px solid red;

等价于：

border-top-width:10px;

border-top-style:solid;

border-top-color:red;

border-right-width:10px;

border-right-style:solid;

border-right-color:red;

border-bottom-width:10px;

border-bottom-style:solid;

border-bottom-color:red;

border-left-width:10px;

border-left-style:solid;

border-left-color:red;

更特别的，boder-color是可以按照上右下左的顺序书写：

border-color:red yellow green;

上边是红色，左边、右边是黄色，下边是绿色。

小练习1：

border:10px solid black;

border-left-color:red;

小练习2：

border:10px solid black;

border-color:black red;

小练习3：

border:10px solid red;

border-width:20px 10px;

border-color:black red blue green;

如果某一个边框我们不想要，那么就写none

border-bottom:none;

下边框就没有了。

4.margin外边距

自己这个盒子的边框外侧，到其他盒子边框外侧的距离

margin有四个方向，分别是 margin-top、margin-right、margin-bottom、margin-left。

塌陷现象：

去掉ul的小圆点，要给ul加

ul{

     list-style:none;

}

居中策略

1.文字水平居中

如果想让盒子中的文字水平居中，那么要给盒子设置

text-align:center;

这个属性继承。

它还有两个可能的值：

text-align:left;

text-align:right;

这个方法，只能居中文本流的东西(文字、图片、表单元素)。一定要记住，这个属性要设置给盒子，不能设置给这些文字、图片、表单元素。

2.盒子水平居中

让盒子设置：margin:0 auto;

margin: 0 auto; 是给盒子用的，要加给盒子自己。它将在自己的父元素内部居中。

3.单行文本的垂直居中

line-height:盒子的高度;

行高=盒子高，此时单行文本就将在盒子中居中。注意，这个方法只能适用于单行文本，多行不适用。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>Document</title>

	<style type="text/css">

		p{

			width: 400px;

			background-color: yellow;

			border: 1px solid #ABCDEF;

		 	line-height: 60px;

		 	text-align: center;

		 	height: 60px;

		}

	</style>

</head>

<body>

	<p class="tip">点击查看更多</p>

</body>

</html>

标准文档流

1.什么是标准文档流

我们发现，Fireworks作图，可以在任何一个地方落笔；word这个软件则不一样，有一个“光标”位置，你必须在当前光标位置去书写文字。

第二行文字的位置，仰赖于第一行文字，比如第一行文字多，第二行文字就下移了；比如第一行文字大，第二行文字又下移了。

网页也是这样，从左至右、从上到下，有一个“光标”的概念。标准文档流中，内置了很多性质。

2.标准文档流有什么性质

1.空白折叠现象

标签内的文字，不管有多少个空格、换行、tab，都会缩减为同一个空格。

2.高矮不齐，底边对齐

最最重要的性质来了，就是标准文档流中，把元素分为“块级元素”和“行内级元素”两种。

3.块级元素和行内级元素

块级元素是能单独在一行的，行内元素是不能单独在一行的。

我们把HTML标签分为两大类：

块级元素(block level)：div、h系列、p、ul、li、dl、dt、dd
行内级元素(inline level)：span、a、b、u、i、em、strong

块级元素：

能够设置宽度、高度；
不能并排；
不设置宽度，那么宽度将默认变为父亲的width

行内级元素：

不能设置宽度、高度；(但是可以设置行高)
可以并排；

4.行内元素和块级元素可以自由转换

给任何一个元素，设置

display:block;

它将转为块级元素，拥有块级元素的所有性质；

相仿的，给任何一个元素，设置

display:inline;

它将转为行内元素，拥有行内元素的所有性质；

有什么用？

把一个块 → 行内丝毫无用，工作10年都遇不见。

但是行内 → 块非常有用！

我们发现标准文档流是做不出网页的，因为它太迂腐：能设置宽高的不能并排，能并排的不能设置宽高。

所以脱离标准流！脱离标准流一共有三种方法：浮动、绝对定位、相对定位。

浮动

浮动的理论知识挺多的，头头是道。但是我们为了考虑吸收，我们今天忽视科学性，就看一些皮毛的“浮动”。下次课我们深入研究浮动。

今天只用，不研究。

1.浮动 —— 做并排用的

float就是英语“浮”的意思，left就是左浮动。要浮动就是两个都要浮动的。

float:left;

right右浮动。

float:right;

浮动的元素会去贴父盒子的边，贴边的过程中，如果被它的哥哥们挡住了，就会贴在哥哥的边上。

如果要保证儿子的并排，父亲要有足够的width。

我们下节课将详细研究浮动，记住一个结论：浮动的元素不能撑高父亲了。