CSS3基础（3）

盒模型

我们的部件（标签）可以看作一个盒子，由width、height、border、padding等组成，称为盒模型。

width为盒子中内容的宽度。
height为盒子中内容的高度。
盒子的总宽度 = width + 左右padding + 左右border
盒子的总高度 = height + 上下padding + 上下border

	.box {
	 	width: 200px;
	 	height: 200px;
	 	background-color: red;
	 	/* 边框、快捷键bd	solid表示实线 */
	 	border: 10px solid #000;
	 	/* 内边距 */
	 	padding: 20px;
	}

<div class="box">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

效果:

width属性

width属性表示盒子内容的宽度，单位通常为px，移动端开发也会涉及百分数、rem等单位。
当块级元素没有设置width属性时，将会自动撑满，但不意味着width可以继承。

height属性

width属性表示盒子内容的宽度，单位通常为px，移动端开发也会涉及百分数、rem等单位。
不论是块级元素，还是行内元素，如果盒子的height属性没有设置，它将会被其内容自动撑开，如果没有内容，则height默认为0。

padding属性

padding属性是盒子的内边距,即盒子边框内壁到文字的距离。
padding属性有四个方向的。可以分别用4个属性进行设置。

属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding属性还有四数值写法，数值分别表示 上、右、下、左 的padding值。

	padding：10px 20px 30px 40px;

padding属性还有三数值的写法，数值分别表示 上、左右、下 的padding值。

	padding: 10px 20px 30px;

padding属性的两数值的写法，数值分别表示 上下、左右 的padding值。

	padding: 10px 20px;

margin属性

margin属性表示盒子的外边距，就是盒子和其他盒子之间的距离。

margin的四个方向：

属性	意义
margin-top	上margin
margin-right	右margin
margin-bottom	下margin
margin-left	左margin

水平方向上的margin属性是可以叠加的。

竖直margin的塌陷现象：小的margin会塌陷到大的margin中，所以margin不会叠加，只会以大值为准。

一些元素有默认的maring值，在开始制作网页的时候，要将他们清除。

	/* 通配符选择器表示选择所有元素*/
	* {
		maring: 0;
		padding: 0;
	}

	/* 通配符有效率问题，应该使用并集选择器 */
	body,ul,p {
		margin: 0;
		padding: 0;
	}

盒子的居中

将盒子左右两边的margin都设置为auto，盒子将水平居中。

	.box {
		margin: 0 auto;
	}

文本居中和盒子水平居中不是一个概念。
盒子的垂直居中需要用到绝对定位技术。

section {
            width: 600px;
            height: 100px;
            background-color: red;
            /* 盒子水平居中 */
            margin: 0 auto;
            /* 文字居中 */
            text-align: center;
            /* 行高等于盒子高,让文字垂直居中 */
            line-height: 100px;
        }

	<section>文字</section>

效果：

盒模型的计算

盒子中实际可使用范围为：width 和 height 的范围。

body, ul, p {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 400px;
            height: 300px;
            padding: 10px;
            border: 5px solid rgb(46, 153, 230);
            margin: 40px auto;
        }
        .box2 {
            width: 378px;
            height: 178px;
            padding: 5px;
            border: 6px solid rgb(68, 200, 116);
            margin-bottom: 10px;
        }
        .box3 {
            width: 378px;
            height: 70px;
            padding: 5px;
            border: 5px solid rgb(148, 235, 16);
        }

	<div class="box1">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>

效果：

box-sizing属性

将盒子添加box-size: border-box;之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为了“内缩”的，不在”外扩“。

display属性

display属性类型	是否并排显示	是否设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i等

行内块，既能设置宽度高度，也能够并排显示。
img 和 表单元素就是特殊的行内块。

行内元素和块级元素的转换

使用

	display: blank;

即可将元素转为块级元素。
例子：

	.mybutton {
            /* 转为块级元素 */
            display: block;
            background-color: blue;
            width: 200px;
            height: 60;
            color: white;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            /* 圆角 */
            border-radius: 6px;
        }
        a:hover {
            background-color: rgb(227, 89, 89);
        }

   <a href="" class="mybutton">按钮</a>

效果：

—————————————————————————————————————————————————————————————
使用

	display: inline;

可以将元素转为行内元素。不常用。

—————————————————————————————————————————————————————————————

使用：

	display: inline-block;

即可将元素转为行内块。
行内元素的width、height、margin是失效的，并且使用padding时是会侵入其他元素中。
就像这样：

元素的隐藏

使用 display: none; 可以将元素隐藏，元素将彻底放弃位置，如同没有写它一样。
使用 visibility: hidden; 也可以将元素隐藏，但是不放弃自己的位置。