本文深入介绍了CSS盒模型，包括内容(content)的width和height设置，边框(border)的width、style和color，以及内边距(padding)和外边距(margin)的详细用法。学习目标包括理解盒模型概念，掌握边框属性实现效果，解决margin值问题，以及运用盒模型进行布局。同时，文章还探讨了overflow属性的应用。
目录
学习目标
-
能够说出盒模型的概念
-
熟练运用边框属性实现边框效果与小三角
-
能够说出margin值的问题及解决
-
能够使用盒模型完成课堂案例
-
掌握overflow的应用
概述
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）
所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。 （即网页布局 就是利用 CSS 摆盒子）
盒模型=外边距margin+内部距padding+边框border+有效内容（width，height）
盒模型宽度= 左外边距+右外边距+左内边距+右内边距+左侧边框+右侧边框+width
内容 content
概述 ：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。
width
-
作用：设置宽度
-
取值
-
auto默认值。浏览器可计算出实际的宽度。
-
px
-
%
-
height
-
作用：设置高度
-
取值
-
auto默认值。浏览器可计算出实际的宽度。
-
px
-
%
-
width:
div角色 块元素 width:auto 取的是父盒子有效内容宽度！！
span角色 行内元素 width:auto 取的是自身内容撑开的宽度！！
width:300px;
width:100%; 取得是父盒子有效宽度的100%
width:20rem;取得的就是html字体大小的20倍
height:
块，行内类型 height:auto 由内容撑开的高度
height:npx;
height:100%;
height:30rem;
min-width最小宽度,max-width最大宽度
min-height最小高度 max-height最大高度
边框border
边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色
border-width边框宽度
-
作用
-
设置所有边框宽度，或者单独地为各边边框设置宽度
-
-
取值
-
长度值
-
不允许指定负长度值。
-
最低0.47元/天 解锁文章
扫一扫
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
