个人学习笔记

文章目录

• • 1.什么是盒子模型？
  • 2.外边距
  • 3.css边框
  • 4.内边距

1.什么是盒子模型？

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
盒子模型用四个边界描述：margin（外边距），border（边框），padding（内边距），context（内容区域）。内容所占高度由height属性决定，内容所占宽度由width决定。

2.外边距

元素的外边距指盒子模型的边框与其他盒子之间的距离，使用margin属性定义。

• margin：10px；表示4个方向的外边距都是10px
• margin：10px 5px；表示上下外边距是10px，左右外边距是5px
• margin：10px 5px 15px；表示上外边距是10px，左右外边距是5px，下外边距是15px
• margin：10px 5px 15px 20px；表示上外边距是10px，右外边距是5px，下外边距是15px，右外边距是20px

也可以使用margin-top，margin-right，margin-bottom和margin-left四个属性对上外边距，右外边距，下外边距和左外边距分别设置。

center
left
right
    

双飞翼布局

改变窗口大小的双飞翼布局

3.css边框

元素的边框（border）是围绕元素内容和内边距的一条或多条线，css中使用border属性设置元素边框的样式，宽度和颜色。
注意，边框线是绘制在“元素的背景之上”，这样，当有些边框是“间断的”，例如虚线，元素的背景就出现在边框的可见部分之间。

边框样式

dotted 定义点状边框
dashed 定义虚线
solid 定义实线
double 定义双线
groove 定义3d凹槽边框

边框的宽度可以通过border-width属性指定，可以使用3个关键字，分别是thin，medium（默认值），和thick。

文档中的一些文字
文档中的一些文字
    

4.内边距

内边距指盒子模型的边框与显示内容之间的距离，使用padding属性定义。

h1 {padding:10px;}//h1元素的各边都有10像素的内边距
h1 {padding:5px 6px 7px 8px;}//含义是上内边距5px、右内边距6px、下内边距7px、左内边距8px。

h1{
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}

这个表格单元的每个边拥有相等的内边距

这个表格的上和下边距是50px，左和右内边距是40px