HTML-CSS-布局3-盒模型扩展
2019-07-31 本文已影响11人
33_6b4e
清除默认样式
*{
padding: 0px;
margin: 0px;
}
书写样式时，body、ul、dl、p、li等标签都有默认的padding和margin。
比如ul、ol有默认的 小圆点，这些也不说我们想要的。
a标签有默认的下划线和文字颜色，这些也不说我们想要的。
我们书写css第一步就是清除默认样式，然后进行书写。
<!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 type="text/css">
</style>
</head>
<body>
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<a href="#">我是一个超级；链接</a>
</body>
</html>
样式
没清除默认的样式.png
清除默认样式
就header里面的
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
ul,ol{
/* 清除小圆点的样式 */
list-style: none;
}
a{
/* 去掉下划线 */
text-decoration: none;
/* 单独设置文字颜色 */
color: black;
}
</style>
样式
去除默认样式.png
宽度剩余法
剩余法.png
从上面可以看出左边内边距的距离是固定的，右边距的距离是文字剩下的宽度, 左边固定,右边剩下。
给定一个固定的足够大的宽度,把它的左内边距固定，右内边距文字剩余多少,让他自己cheng。
盒子中的左内边距是固定的，右内边距根据文字的多少不同。我们只需要给盒子足够的宽度(足够文字放下)，左内边距是固定，右内边距设置为0,这就是宽度剩余法。
<!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 type="text/css">
*{
padding: 0px;
margin: 0px;
}
ul,ol{
/* 清除小圆点的样式 */
list-style: none;
}
a{
/* 去掉下划线 */
text-decoration: none;
/* 单独设置文字颜色 */
color: black;
}
.box{
width: 300px;
height: 400px;
padding-left: 20px;
padding-right: 0;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>蒂萨蒂萨框架的哈就开始</li>
<li>阿斯顿撒里看到是骂开了打马赛克没道理可</li>
<li>单身吗的马萨卡 里面打开懒散扣篮大赛吗烤冷面扣篮大赛穆克拉</li>
<li>多少啊</li>
</ul>
</div>
</body>
</html>
样式
样式.png
height
内容不确定，不设置高度，让内容撑开高度。一般像新闻页面，内容有多又少，不用设置盒子高度。直接让内容撑开高度。
<!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 type="text/css">
*{
padding: 0px;
margin: 0px;
}
ul,ol{
/* 清除小圆点的样式 */
list-style: none;
}
a{
/* 去掉下划线 */
text-decoration: none;
/* 单独设置文字颜色 */
color: black;
}
.box{
width: 300px;
padding-left: 20px;
padding-right: 0;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>蒂萨蒂萨框架的哈就开始</li>
<li>阿斯顿撒里看到是骂开了打马赛克没道理可</li>
<li>单身吗的马萨卡 里面打开懒散扣篮大赛吗烤冷面扣篮大赛穆克拉</li>
<li>多少啊</li>
</ul>
</div>
</body>
</html>
就是把宽度剩余法代码里面的height去掉就行。
样式
height.png
不设置height，内容有多少，撑开多少。
