盒子模型
盒子模型 页面布局的三大核心,盒子模型,浮动和定位 网页布局过程 先准备好相关网页元素,网页元素基本都是盒子Box 利用CSS设置好盒子样式,然后放到相应位置 往盒子里面装内容 盒子模型的组成 所谓盒子模型:就是把HTML页面中的布局元素看做是一个矩形的盒子,也就是 一个盛装内容的容器,CSS盒子包括:边框、外边距、内边距、和实际内容 border:边框 组成:边框宽度、边框样式 、边框颜色 border:border-width|border-style|border-color 属性 作用 border-with 定义边框粗细,单位是px border-style 边框样式:solid:实线边框、dashed:虚线边框、dotted:点线边框 border-color 边框颜色 边框简写 border:1px solid red; #没有顺序 表格边框的粗细 border-collapse:collapse; collapse:合并 border-collapse:collapse;表示相邻边框并在一起 【注意】 边框会额外增加盒子的实际 大小。两种解决方案 测量盒子大小的时候不量边框 如果测量的时候包含了边框,则需要width\height减去边框宽度 content:内容 padding:内边距 用于设置内边距,即边框与内容之间的距离 属性 作用 padding-left