1.1盒子模型的介绍
1.盒子的概念
1.页面中的每一个标签都可以看做一个“盒子”,通过盒子视角更方便布局
2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为“盒子”
2.盒子模型:
css中规定每个盒子由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边界区域(margin)构成,这就是盒子模型
3.记忆:可以联想现实中的盒子
<style>
/* 纸箱子,填装泡沫 */
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框线 == 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫:出现在盒子和边缘之间 */
padding: 20px;
/* 外边距 出现在两个盒子之间或者出现在盒子的外面*/
margin: 50px;
}
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body>
浏览器效果:
2.1内容区域的宽度和高度
作用:利用width和height属性默认是盒子区域的大小
属性:width/height
常见取值:数字+px
<style>
div{
width: 200px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
3.1边框(border)- 连写形式
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
如: border:10px soild red;
快捷键:bd+tab
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid 实线 */
/* border: 1px solid #000; */
/* dashed 虚线 */
/* border: 5px dashed #000; */
/*dotted 点线 */
/* border: 5px dotted #000; */
border-right: 5px dotted #000;
border-top: 5px dotted #000;
}
</style>
</head>
<body>
<div>内容</div>
</body>
3.2边框(border)- 单方向设置
场景:只给盒子的某个方向设置
属性名:border-方向名词
属性值:连写的取值
3.3边框(border)- 单个属性
作用:给设置边框粗细、边框样式、边框颜色效果
<style>
div{
/* 盒子尺寸 = width/height + 边框线 */
/* 如果 400*400 尺寸 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
备注:若要求盒子尺寸400*400,则宽高380,边框线10。
(案例)盒子边框的小案例
需求:根据设计图,通过Pxcook量取数据,通过代码在网页中完成一致的效果
<style>
div{
width: 280px;
height: 280px;
background-color: #ffc0cb;
border: 10px solid #00f;
}
</style>
</head>
<body>
<div></div>
</body>
(案例)新浪导航
需求:根据
布局顺序:
1.从外往内,从上往下
每一个盒子的样式:
1.宽高
2.辅助的背景颜色
3.盒子模型的部分:border、padding、margin
4.其他样式:color、font-、text-、....
<style>
.box{
border-top: 3px solid #ff8500;
height: 40px;
border-bottom: 1px solid #edeef0;
}
/* 后代box里的a */
.box a{
width: 80px;
height: 40px;
/* 推荐先加上:清楚看见文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
text-decoration: none;
tab-size: 12px;
color: #4c4c4c;
}
.box a:hover{
color: #ff8500;
}
</style>
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
备注:从外到内:先宽高背景色,后内容,调节内容位置;控制文字细节
4.1内边距
文字与边框之间的距离
属性名:padding
属性值:数学+px(可以连写,最多写四个,代表上右下左的内边距)
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
padding: 50px;
/* padding 属性可以当复合属性写 表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四值: 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值:上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值:上下 左右 */
padding: 10px 80px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
盒子实际大小终极计算公式
需求:盒子尺寸300*300,背景粉色,边框线10px实现黑体,上下左右20px的内边距
<style>
div{
/* 盒子尺寸=width/height+border+padding */
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
(案例)优化新浪导航
需求:增加导航的字数
<style>
.box{
border-top: 3px solid #ff8500;
height: 40px;
border-bottom: 1px solid #edeef0;
}
/* 后代box里的a */
.box a{
/* width: 80px; */
height: 40px;
/* 推荐先加上:清楚看见文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
text-decoration: none;
tab-size: 12px;
color: #4c4c4c;
padding: 0 16px;
}
.box a:hover{
color: #ff8500;
}
</style>
<!-- 从外到内:先宽高背景色,后内容,调节内容位置;控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
注:里面文字+内边距撑开盒子就能起到盒子里的a标签字数不同。
4.5CSS盒子模型(自动内减)
需求:盒子尺寸300*300,背景粉色,边框线10px实线黑色,上下左右20px的内边距
给盒子设置border或padding时,盒子会被撑大,若不想被撑大
解决方法:1.手动内减
操作:自己计算多余大小,手动在内容中减去
缺点:项目中计算量太大,很麻烦
2.自动内减
操作:给盒子设置属性 box-sizing:border-box;即可
优点:浏览器会自动计算多余大小,自动在内容中减去
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 变成CSS3的盒子模型,好处:加了border不需要手动减法 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>文字</div>
</body>
5.1内边距
盒子外部的外边距
属性名:margin
属性值:数学+px(可以连写,最多写四个,代表上右下左的外边距)
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
/* 可以添加四个值,方法与padding一致 */
margin: 50px;
}
</style>
</head>
<body>
<div>div</div>
</body>
5.4清楚默认的内外边距
场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在1项目开始需要先清楚掉这些默认margin和padding,后续自己设置
比如:body默认标签有margin:8px
比如: p标签默认有上下的margin
比如:u标签有默认由上下的margin和padding-left
。。。
解决方法:
一个使用并集选择器;一个用通配符选择器设置margin和padding为0
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>ppp</p>
<p>pppp</p>
<h1>h1</h1>
<ul>
<li>lili</li>
</ul>
</body>
版心居中
盒子在网页的中心位置
写法:margin:0 auto;
<style>
div{
width: 1000px;
height: 300px;
background-color: pink;
/* 上下根据设计稿调节 左右居中 */
margin:0 auto;
}
</style>
</head>
<body>
<!-- 版心:网页的有效内容 -->
<!-- 版心居中 -->
<div>版心</div>
</body>
综合案例-新闻列表
从外到内:先宽高背景色,后内容,调节内容位置;控制文字细节
<style>
*{
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距 */
box-sizing: border-box;
}
.news{
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 42px 30px 0;
margin: 50px auto;
}
.news h2{
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是一倍,就是字号的大小 */
line-height: 1;
padding-bottom: 9px ;
}
ul{
list-style: none;
}
/* li {}*/
.news li{
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a{
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Article</h2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中链式编程是什么</a></li>
</ul>
</div>
</body>
注: list-style: none; 可以删除列表的小圆点。
5.7外边距折叠现象-合并现象
场景:垂直布局的块级元素,上下margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免
只给期中一个盒子设置margin即可
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.one{
margin-bottom: 50px;
}
.two{
margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
5.8外边距折叠现象-塌陷现象
场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
1.给父元素设置border-top或者padding-top(分割父子元素的margin-top)
2.给父元素设置overflow:hidden
3.转换成行内块元素(不推荐)
4.设置浮动
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/*如果设计稿 没有border,不能使用这个方法 */
/* border: 1px solid #000; */
/* 推荐,没有额外添加条件 */
/* overflow: hidden; */
}
.son{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
/* 转成行内块,场景发生了改变,不推荐 */
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
5.9行内元素的内外边距问题
行内元素代表标签:
a、span、b、u、i、strong、ins、em、del...
如果想要通过margin或者padding改变行内标签的位子,无法生效
行内标签的margin-top和botton 不生效
行内标签的padding-top或bottom 不生效
<style>
span{
/* margin: 100px; */
padding: 100px;
}
</style>
</head>
<body>
<!-- 行内块元素 内外边距:margin padding -->
<!-- 如果想要通过margin或者padding改变行内标签的位子,无法生效 -->
<!-- 行内标签的margin-top和botton 不生效 -->
<!-- 行内 标签的padding-top或bottom 不生效-->
<span>span</span>
<span>span</span>
</body>