CSS基础知识之盒模型以及浮动布局

谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是 内容(content)、填充(padding)、边框(border)、边界(margin)；这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的`盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。盒子由几部分组成：

物品 + 填充物 + 外包装 + 外边距

content + padding + border + margin

/* margin 后面接多个值 */

/* 上 右 下 左 */

margin:50px 30px40px 20px;

/* 上 左右 下 */

margin:50px 30px 40px;

/* 上下 左右 */

margin:50px 30px;

/* 上下左右 */

margin:50px;

通常情况下：

父子关系产生边距一般用padding

兄弟关系产生边距一般用margin

p标签的基本样式

p{

font-family:"微软雅黑";

/* em */

font-size:1em;

/*

italic 斜体

oblique 倾斜

*/

font-style:oblique;

/* 100 - 900 */

/* bold 加粗 */

/* lighter */

/* normal */

font-weight:lighter;

/* 复合属性 */

font:italic 9002em "宋体";

/* 文本设置 */

/* underline */

/* overline */

/* line-through */

/*text-decoration: line-through;*/

/* 缩进 */

/* 数值，可用用px 也可用 em，可以为负值 */

text-indent:-10px;

/*left, right, center*/

/* justify 两边对齐 */

text-align:justify;

/* 行间距 */

/* 如果一行内容的情况下，可以用作垂直居中 */

line-height:-1px;

/* 字(单词)间距 */

/* 可以为负值 */

word-spacing:-50px;

/* 字符间距 */

/* 可以为负值 */

letter-spacing:-5px;

}

插入背景图片

/* 背景图片，平铺 */

background-image:url("img/1.gif");

/* 背景图片是否重复 x y */

background-repeat:repeat-y;

/* 背景图片大小 宽 高 */

/*background-size: 100% 100%;*/

/* 1. 可以使用像素值

2. 可以使用方向值

3. 可以使用百分比

*/

background-position:30% 80%;

}

/* 伪类

hover 鼠标悬停

*/

.p1:hover{

width:400px;

height:400px;

}

css基本样式一览

css 属性名：

width: 宽度

height: 高度

margin: 外边距

padding: 内边距

border: 边框

background: 背景

display: 显示方式

font: 字体

font-weight 文字着重

font-family 字体

font-size 文字大小

font-style 文字样式

letter-spacing 字母间距

word-spacing 单词间距

text-align 文本对齐方式

text-decoration 文本修饰

text-indent 首行缩进

background-repeat 背景图片重复

background-image 背景图片

background-size 背景图片大小

float 浮动

浮动布局

float: left 左浮

float：right 右浮

清除浮动的方式：

1. clear:both;

2. 在父级中加上overflow:hidden; 变为BFC(单独布局的小单位)

3. 用浮动去清浮动。

文档流：在当前文档下，给元素排列时所占用的位置。

浮动：元素直接脱离文档流，按照指定的方向移动。直到遇到父级的边界，或者其他的浮动元素停止。