盒子模型
2020-01-25 本文已影响0人
山猪打不过家猪
盒子模型
一张图搞定盒子模型
盒子模型
1.边框
div {
width: 500px;
height: 500px;
border-width: 1px; //边框宽度
border-style: solid; //边框样式
border-color: green; //边框颜色
}
简写
div {
width: 500px;
height: 500px;
border: 1px solid green;
}
边框指定各个边的样式
<style>
input {
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid ;
}
</style>
</head>
<body>
<div>
用户名： <input type="text">
</div>
</body>
也可以这么写
input {
border: none;
border-bottom: 1px solid ;
}
表格的边框会重叠，导致设置为1px的两个盒子，边框重叠过后是2px
table,td{
border-collapse: collapse; //合并相邻边框
}
2.内边距padding
- 操控盒子里内容的位置
当给盒子指定padding值后发生了2件事
1）内容和边框有了距离，添加了内边距
2）盒子会变大
div {
padding: 50px;
}
padding简写规则其他通用
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | padding：上下左右内边距; |
| padding:5px 10px; | padding: 上下内边距 左右内边距 ； |
| padding: 5px 10px 20px | padding：上内边距 左右内边距 下内边距； |
| padding: 5px 10px 20px 30px | padding: 上内边距 右内边距 下内边距 左内边距 ； |
应用：
字数不同的导航栏设计（重点）
新浪导航栏.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
a {
font-size: 12px;
display: inline-block;
text-decoration: none;
color:rgb(44, 44, 34);
line-height: 41px;
/* background-color: pink; */
padding: 0 20px; //已经居中不需要设置上下，只需要设置左右
}
.nav a:hover{
background-color: #eeeeee;
color: rgb(255,132,0);
}
</style>
</head>
<body>
<div class="nav">
<a href="">设为首页</a>
<a href="">新浪手机网</a>
<a href="">移动客户端</a>
<a href="">博客</a>
<a href="">微博</a>
<a href="">关注我</a>
</div>
</body>
</html>
3.内盒尺寸计算
- 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
- 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
- 如果盒子没有指定宽度或者高度，padding不会撑开盒子
4.外边距margin
- 操控盒子的位置
- 规则几乎和padding相同
<style>
div {
width: 600px;
height: 400px;
background-color: pink;
margin: 0 auto;
}
</style>
5.块级元素居中和文本元素居中的区别
- 块级元素自动居中使用
margin: auto; - 文字水平居中
text-align:center，也可以让行内元素和行内块级居中
6.插入图片和背景图片的区别
- 插入图片：页面中的重要图片或者产品展示都是插入图片
<img src="" alt="">；如果要移动图片的位置就需要用盒模型padding或者由于img是行内块元素，可以通过margin来移动
<style>
.pic,
.bg {
width: 500px;
height: 500px;
border: 1px solid red;
padding: 30px; //方法一
}
.pic img {
margin: 30px; //方法二
}
</style>
- 小图标 小按钮 一般使用
background；如果移动图片需要使用background-position
7.外边距合并
1）上下外边距合并
当上下两个盒子相遇时，下边距或者上边距大的那个会吞并小的那个，只显示一个
合并规则.png
- 解决方案：尽量只给一个盒子添加Margin值
2）嵌套块元素垂直外边距合并（塌陷）
父子关系，如果给子块元素设设置margin父子会一块跟着动
- 解决方案：
①给父元素定义上边框
②给父元素定义内边距
③给父元素添加overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*1. 可以为父元素定义上边框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以给父级指定一个 上 padding值*/
/*padding-top: 1px; */
/*3. 可以为父元素添加overflow:hidden。*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
综合案例
新闻.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.news {
width: 298px;
height: 198px;
border: 1px solid rgb(204, 204, 204);
margin: 50px auto;
padding:15px;
background: url(images/line.jpg);
}
.news h2{
font-size: 18px;
border-bottom: 1px solid #cccccc;
padding: 5px 0;
margin-bottom: 5px;
}
.newslist li{
border-bottom: 1px dashed #cccccc;
height: 30px;
line-height: 30px;
background: url(images/arr.jpg) no-repeat 5px center;
/* background-repeat: no-repeat; */
}
.newslist a{
text-decoration: none;
color: #333;
font-size: 12px;
/* 因为li没有宽度，所以padding不会撑开盒子 */
padding: 20px;
}
.newslist a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="news">
<h2>最新文章/New Articles</h2>
<div class="newslist">
<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>
</div>
</body>
</html>
查漏补缺：
1）emm语法快速生成标签ul>li*5>a
2）去掉页面上所有列表的样式list-style:none;
3）对于最外层的盒模型，我们可以直接设置padding来对盒内所有模型控制边距，这样就需要一个一个设置其他的小盒子，例如，对.news设置padding后里面的h2以及newslist就不需要设置margin了
4）背景的通用写法background: url(images/arr.jpg) no-repeat 5px center;
5）盒内文字的位置可以使用padding或者margin都可以，只要盒子没有width都不会影响盒子的大小
6）对于盒子的分析要明确，这里是三个盒子，外边框一个，标题h2为行内块也算一个，最后一个就是li ；
CSS3圆角边框
圆形：
先写一个正方形，然后border-radius: 50%;
矩形圆角：
先写一个矩形，然后变为矩形高度的一半border-radius: height/2 px;
