文章目录
盒子模型
,就是帮助我们做布局的
盒子模型由 内容区域content 、内边距区域 padding、 边框区域 boder、外边距区域margin
构成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300;
background-color: pink;
/* 边块线 */
border: 1px;
/* 内边距:就是填充泡沫 :出现在内容和盒子边缘之间*/
padding: 10px;
/* 外边距 :出现在两个盒子之间 或者说盒子的外面*/
margin: 50px;
}
</style>
</head>
<body>
<div>
内容;电脑
</div>
<div>内容;电脑</div>
</body>
</html>
记住这些颜色
给内容要定义宽和高
边框
属性值连写:boder:
盒子实际大小计算
记得算上边框线的宽度
案例:新浪导航小项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: solid 1px #7f91b4;
}
/* 后代: box里面的 a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上,清楚看到文字位置 */
background-color: #edeef0;
/* 转换模式,使得设置宽高之后效果生效 */
display: inline-block;
/* 文本居中 */
text-align: center;
line-height: 40px;
/* 文字大小调整 */
font-size: 12px;
color: #4c4c4c;
/* 去掉下划线 */
text-decoration: none;
}
/* 设置悬停效果 */
.box a:hover {
background-color: #ff8400;
}
</style>
<!-- 从内到外:先 宽高背景色,放内容,调节内容位置,控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
padding多值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
padding: 50px;
/* padding 属性可以当作复合属性使用,表示单独设置某个方向的内边距 */
/* padding 最多取四个值 */
/* 四个值: 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
color: blueviolet;
/* 三个值:上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两个值:上下 左右 */
padding: 10px 80px;
}
/* 多值写法:永远都是从上开始顺时针转一圈,如果数不够,看对面 */
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
盒子实际大小中级计算公式:
需求:盒子尺寸300*300 背景粉色 边框10px实线黑色 上下左右20px的内边距如何实现?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 能够撑大盒子的: border padding; */
width: 300px;
height: 300px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
案例-新浪导航-优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: solid 1px #7f91b4;
}
/* 后代: box里面的 a */
.box a {
/* 使得左右更加灵活 */
padding: 0 16px;
/* width: 80px; */
height: 40px;
/* 推荐先加上,清楚看到文字位置 */
background-color: #edeef0;
/* 转换模式,使得设置宽高之后效果生效 */
display: inline-block;
/* 文本居中 */
text-align: center;
line-height: 40px;
/* 文字大小调整 */
font-size: 12px;
color: #4c4c4c;
/* 去掉下划线 */
text-decoration: none;
}
/* 设置悬停效果 */
.box a:hover {
background-color: #ff8400;
}
</style>
<!-- 从内到外:先 宽高背景色,放内容,调节内容位置,控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
css3盒子模型-自动内减
需求: 盒子尺寸300*300 背景粉色 边框10px实线黑色 上下左右20px的内边距如何实现?
分析:给盒子设置border 或 padding 时,盒子会被撑大,如果不想盒子被撑大,如何实现
方法一:手动实现
方法二:自动内减
1.给盒子设置属性 box-sizing:boder-box;
优点 :浏览器会自动计算多余大小,自动在内容中减去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
border: solid 10px #000;
padding: 20px;
/* 内减模式 */
/* 变成css3 的盒子模型: */
/* 好处:加 border 和 padding 不需要手动做减法 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
盒子模型-外边距
相关设置和内边距的是一样的
清除默认的内外边距
*{
margin:0;
padding:0;
}
版心居中
版心:网页的有效内容
版心一般都是居中的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 300px;
background-color:pink;
/* 版心居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>版心</div>
</body>
</html>
案例-新闻列表
实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 内减一般放在这里:所有的便签都可能用到 */
box-sizing: border-box;
}
/* div布局 */
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
/* 版心居中 */
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍,就是字号的大小 */
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-style: 18px;
}
</style>
</head>
<body>
<!-- 布局原则-从内到外 -->
<div class="news">
<h2>最新文章/New Articles</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>
</html>
外边距的问题
margin 、
塌陷:坑爹现象
就是相互嵌套的 块级元素 ,子元素的 margin-top 会作用在父元素上面
导致父元素一起向下移动
解决方法:
①给父元素设置 border-top 或者padding-top
但是如果设计稿中没有边框的时候,就不能用这个解决
②给父元素设置 overflow:hidden
③转换成行内块元素
④设置浮动
行内元素的内外边距的问题
加行高解决