css盒子模型实验报告总结_DIV+CSS学习笔记总结篇：盒子模型和块元素、行元素与溢出...

第十三章 盒子模型

盒子模型：

盒子模型就是一个有高度和宽度的矩形区域

所有html标签都是盒子模型

div标签自定义盒子模型

所有的标签都是盒子模型

class和id的主要差别是：class用于元素组(类似的元素，或者可以理解为某一类元素)，而id用于标识单独的唯一的元素。

盒子模型的组成

盒子模型组成部分：

自身内容： width、height 宽高

内边距： padding

盒子边框： border 边框线

与其他盒子距离： margin 外边距

内容+内边距+边框+外边距=面积

border 边框

常见写法 border:1px solid #f00;

单独属性：

border-width:

border-style:

dotted 点状虚线

dashed(虚线)

solid(实线)

double(双实线)

border-color (颜色)

padding 内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下 左右

padding:10px 10px 10px; 上 左右 下

padding:10px 10px 10px 10px; 上 右 下 左(设置4个点-->顺时针方向)

单独属性：

- `padding-top:` - `padding-right:` - `padding-bottom:` -` padding-left:`

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

第十四章 块元素、行元素与溢出

基本概念

块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；

行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距

行块转换

display:none; 不显示

display:block; 变成块级元素

display:inline; 变成行级元素

display:inline-block; 以块级元素样式展示，以行级元素样式排列

溢出

overflow:hidden; 溢出隐藏

overflow:scroll; 内容会被修剪，浏览器会显示滚动条

overflow:auto; 如果内容被修剪，则产生滚动条

文本不换行：white-space:nowrap;

长单词换行：word-wrap:break-word;

常见块元素和行内元素

块元素(block element)

address - 地址

center - 举中对齐块

div - 常用块级容易

dl - 定义列表

form - 交互表单 (只能用来容纳其它块元素)

h标签

hr - 水平分隔线

ol - 无需列表

ul-有序列表

p - 段落

pre - 格式化文本

内联元素：

a - 锚点

b - 粗体(不推荐)

br - 换行

code - 计算机代码(在引用源码的时候需要)

em - 强调

i - 斜体

img - 图片(特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高)

当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}

input - 输入框

label - 表格标签

select - 项目选择

strong - 粗体强调

textarea - 多行文本输入框

u - 下划线

var - 定义变量

替换元素有如下：(和img一样的设置方法)

、、、、都是替换元素，这些元素都没有实际的内容。