CSS笔记(8)
已经好久没有学习了!!!从期末复习,到后来去做暑假工培训,好多天了!!超级难受,不过我还是有复习过的,继续继续.
外边距的典型应用
上一节学习到了如何让一个盒子在网页中水平居中,做法是:
①给盒子一个宽度,
②并且设置外边距margin的左右外边距设置为auto.
如果想要将行内元素或者行内块元素(如图片)设置为水平居中,那么只要给他们的父元素设置text-align:center即可,否则是不会起效果的.
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并.
嵌套块元素外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有外边距,此时父元素会塌陷较大的外边距值.(比如:父元素设置了上边距的同时,子元素也设置了上边距,子元素的上边距此时是不起效果的,反而父元素的上边距会更大)
解决方案
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加 overflow:hidden
最后的效果都是相似的
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致.因此我们在布局前,首先要消除下网页元素的内外边距.
这就作为CSS的第一行代码!!!请刻入DNA
案例:快报模块
思路:
1.首先,可以看到这个模块应该是由三个盒子组成的.
所以我们先放一个类名叫box的大盒子.
2.由于"品优购快报"是一个大标题,所以我们用标题标签来作为盒子
3.下面的应该是无序列表,所以是ul标签组成的.
4.开始排版.
第一步:消除所有的内外边距
* {
padding: 0;
margin: 0;
}
然后我们在body里面写入
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="#">[特惠] 母亲节,健康好礼低至5折</a></li>
<li><a href="#">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="#">[特惠] 9.9元洗100张照片</a></li>
<li><a href="#">[特惠] 长虹智能空调立省1000</a></li>
</ul>
</div>
现在用CSS对这些盒子进行布局
.box {
width: 248px;
height: 163px;
margin: 100px auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
background-color: pink;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
现在的页面是这样的:
这就涉及到一个新的知识点:如何去掉无序列表前面的小圆点
使用一行代码即可
list-style: none
最后再将内外边距,行高调整一下就好啦.
最后展示一下所有的代码
<!DOCTYPE html>
<html lang="zh-cn">
<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>快报模块</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 248px;
height: 163px;
margin: 100px auto;
border: 1px solid #ccc;
}
.box h3 {
height: 32px;
/* background-color: pink; */
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
li {
list-style: none;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul {
margin-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="#">[特惠] 母亲节,健康好礼低至5折</a></li>
<li><a href="#">[特惠] 爆款耳机5折秒!</a></li>
<li><a href="#">[特惠] 9.9元洗100张照片</a></li>
<li><a href="#">[特惠] 长虹智能空调立省1000</a></li>
</ul>
</div>
</body>
</html>
视频进度:(165/541)