- 盒子模型
CSS中将每一个元素都设置为了一个矩形的盒子;
将所有的元素都设置为盒子,是为了方便页面的布局;
当这些元素都是盒子以后,我们的布局就变成了在页面中摆放盒子
2. 盒子构成
盒子的可见框大小由内容区、内边距和边框共同决定
内容区
1.内容区相当于盒子存放东西的空间;
2.内容区在盒子的最里边;
3.元素的所有的子元素都是放在父元素的内容区;
4.内容区宽度:width;
5.内容区高度:height
内边距(padding)
1.内边距指的是内容区和边框之间的距离,内边距会影响盒子的大小;
2.盒子中一共有四个方向的内边距:padding-top、padding-right、padding-bottom、padding-left;
3.padding:可以同时设置四个方向的内边距,规则和border-width一致;
4.padding:上 右 下 左(写四个值);
5.padding:上 左右 下 (写三个值);
6.padding:上下 左右 (写两个值);
7.padding:上下左右 (写一个值)
边框(border)
1.边框盒子可见框最外侧,边框是盒子的边缘;
2.设置边框需要同时设置三个样式,缺一不可;
3.设置边框:border-width(边框的宽度)、border-color(边框颜色)、border-style(边框样式);
4.border-width:可以同时指定四个边框的宽度,也可以分别指定;
5.border-width:上 右 下 左(写四个值);
6.border-width:上 左右 下 (写三个值);
7.border-width:上下 左右 (写两个值);
8.border-width:上下左右 (写一个值);
9.除了上面三个属性,CSS中还提供了:border-xxx-width、border-xxx-color、border-xxx-style,xxx可以是top、left、right、bottom,通过这些可以单独设置指定边框的宽度、颜色和样式;
10.边框的简写属性:border、border-left、border-top、border-right、border-bottom,使用他们可同时设置宽度 颜色 样式,用空格分隔开
外边距(margin)
1.外边距盒子和其他盒子之间的距离,外边距不会影响可见框的大小,但是会影响盒子的位置;
2.也是具有四个方向:margin-top、margin-left、margin-right、margin-bottom;
3.简写属性与padding一致;
4.margin值:可以设置为auto、可以设置为负值;
5.设置为auto:如果单独将左右外边距设置为auto,则会将左或右外边距设置为最大值、如果同时将左右外边距设置为auto,则会将左右外边距设置为一个相等的值,通过这种方式使一个子元素在它的父元素中水平居中(例:margin:0 auto);
6.如果将margin设置为负值,则元素会向相反的方向移动;
7.外边距的重叠:水平外边距不会重叠,而是取和、相邻的垂直外边距会发生重叠现象(相邻元素的外边距会取最大值、子元素的外边距会传递给父元素)
3.内联元素的盒子模型
不支持width和height;
支持水平方向的padding,垂直方向的padding也支持,但是不会影响布局;
支持四个方向边框,但是垂直的边框不会影响布局;
支持水平方向外边距,不支持垂直方向的
4.盒子模型相关样式
display(设置元素的显示类型)
1.none:元素不会在页面中显示,并且不会占据页面的位置;
2.block:元素会作为块元素显示;
3.inline:元素会作为内联元素显示;
4.inline-block:元素会作为行内块元素显示、既具有内联元素的特点也具有块元素的特点;
overflow(设置元素如何处理溢出内容)
1.visible:默认值,元素在页面中正常显示;
2.hidden:元素不在页面中显示,但是依然在页面中占据位置;
visibility(设置元素是否在页面中显示)
1.visible:默认值,不会处理溢出的内容,在父元素以外的地方显示;
2.hidden:溢出的内容会被隐藏不会显示;
3.scroll:在父元素中同时添加水平和垂直方向的滚动条、不内容是否溢出都会添加滚动条;
4.auto:根据需要自动生成滚动条
5.文档流
文档流指的是网页中的一个位置
文档流是网页的基础,是网页的最底层,所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右,自上向下排列(和我们的书写习惯一致)
块元素
1.块元素在文档流中自上向下排列;
2.块元素在文档流中宽度默认是父元素的100%;
3.块元素在文档流中高度默认被内容撑开
内联元素
1.内联元素在文档流中自左向右排列,如果一行中不足以容下所有的内联元素,则换到下一行,继续自左至右排列;
2.内联元素在文档流中宽度和高度默认都被内容撑开