提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

CSS笔记(8)

笔记CSS
2023-06-13 09:12:59 时间

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)

相关文章