门户网站主要特点和功能,郑州通告最新,cms系统首页,机械加工网红订单学习目标#xff1a;
能够认识盒子模型的组成 #xff0c;能够掌握盒子模型边框、内边距、外边距的设置方法。
学习路径#xff1a;
盒子模型的介绍内容区域的宽度和高度边框#xff08; border #xff09;内边距#xff08; padding #xff09;外边距#xff08;…学习目标
能够认识盒子模型的组成 能够掌握盒子模型边框、内边距、外边距的设置方法。
学习路径
盒子模型的介绍内容区域的宽度和高度边框 border 内边距 padding 外边距margin
一、盒子模型的介绍
1. 盒子的概念
页面中的每一个标签都可看做是一个 “盒子”通过盒子的视角更方便的进行布局。浏览器在渲染显示网页时会将网页中的元素看做是一个个的矩形区域我们也形象的称之为盒子。
2. 盒子模型 ➢ CSS 中规定每个盒子分别由内容区域content、内边距区域padding、边框区域border、外边距区域margin构成这就是盒子模型。3. 记忆可以联想现实中的包装盒。 二、内容区域的宽度和高度
1.内容的宽度和高度
➢ 作用利用 width 和 height 属性默认设置是盒子 内容区域 的大小 ➢ 属性width / height ➢ 常见单位px例如20px 三、边框
1.边框border) - 单个属性
➢ 作用给设置边框粗细、边框样式、边框颜色效果 ➢ 单个属性 2.边框border- 连写形式
➢ 属性名border ➢ 属性值单个取值的连写取值之间以空格隔开如给盒子设置四周 20像素、实线、蓝色的边框属性应该如何设置 border20px solid blue
3. 边框border- 单方向设置
➢ 场景只给盒子的某个方向单独设置边框 ➢ 属性名border - 方位名词 ➢ 属性值连写的取值
如给盒子设置上边框 10像素、虚线、黄色的边框属性应该如何设置 • border-top10px dashed yellow
4.盒子实际大小初级计算公式
➢ 需求盒子尺寸 400*400背景绿色边框10px 实线 黑色如何完成• 注意点 ① 设置width和height是内容的宽高② 设置border会撑大盒子。 ➢ 盒子实际大小初级计算公式 • 盒子宽度 左边框 内容宽度 右边框 • 盒子高度 上边框 内容高度 下边框 ➢ 解决当盒子被border撑大后如何满足需求• 解决计算多余大小手动在内容中减去手动内减 四、内边距 padding 1.内边距padding- 取值
➢ 作用设置边框与内容区域之间的距离 ➢ 属性名padding ➢ 常见取值 设置顺序从上开始赋值然后顺时针赋值如果设置赋值的看对面的 2.内边距padding- 单方向设置
➢ 场景只给盒子的某个方向单独设置内边距 ➢ 属性名padding - 方位名词 ➢ 属性值数字 px
例如给盒子设置左侧50px的内边距可以通过什么属性设置padding-left : 50px ;
3.盒子实际大小终极计算公式
➢ 需求盒子尺寸300*300背景粉色边框10px实线黑色上下左右20px的内边距如何完成 •注意点① 设置width和height是内容的宽高② 设置border会撑大盒子 ③ 设置padding会撑大盒子 ➢ 盒子实际大小终极计算公式 • 盒子宽度 左边框 左padding 内容宽度 右padding 右边框 • 盒子高度 上边框 上padding 内容宽度 下padding 下边框 ➢ 解决当盒子被border和padding撑大后如何满足需求 • 自己计算多余大小手动在内容中减去手动内减 4.CSS3盒模型自动内减
➢ 需求盒子尺寸300*300背景粉色边框10px实线黑色上下左右20px的内边距如何完成 • 给盒子设置border或padding时盒子会被撑大如果不想盒子被撑大 ➢ 解决方法 ① 手动内减 • 操作自己计算多余大小手动在内容中减去 • 缺点项目中计算量太大很麻烦 ➢ 解决方法 ② 自动内减 • 操作给盒子设置属性 box-sizing : border-box ; 即可 • 优点浏览器会自动计算多余大小自动在内容中减去
五、外边距margin 1.外边距margin- 取值
➢ 作用设置边框以外盒子与盒子之间的距离 ➢ 属性名margin ➢ 常见取值 ➢ 记忆规则从上开始赋值然后顺时针赋值如果设置赋值的看对面的
2.外边距margin - 单方向设置
➢ 场景只给盒子的某个方向单独设置外边距 ➢ 属性名margin - 方位名词 ➢ 属性值数字 px
例如给盒子设置左侧50px的外边距可以通过什么属性设置• margin-left : 50px ; 3.清除默认内外边距
➢ 场景浏览器会默认给部分标签设置默认的margin和padding但一般在项目开始前需要先清除这些标签默认的 margin和padding后续自己设置 • 比如body标签默认有margin8px • 比如p标签默认有上下的margin • 比如ul标签默认由上下的margin和padding-left • …… ➢ 解决方法
*{
margin:0;
padding:0;
}
六、行内元素的margin和padding无效情况
➢ 场景行内元素设置margin和padding时 ➢ 结果 1. 水平方向的margin和padding布局中有效 2. 垂直方向的margin和padding布局中无效
七、块级盒子水平居中
让一个块级盒子实现水平居中必须
盒子必须指定宽度width然后就给左右的外边距都设置为auto
实际工作中常用这种方式进行网页布局示例代码如下
.header{ width:960px; margin:0 auto;}文字居中和盒子居中区别
盒子内的文字水平居中是 text-align: center;而且还可以让行内元素和行内块级元素居中对齐。块级盒子水平居中左右margin 须设置为 auto。
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就可以了上下margin都可以 */
