HTML5+CSS3基础（day11）

最新推荐文章于 2024-08-27 17:15:42 发布

澈如冬雪^

最新推荐文章于 2024-08-27 17:15:42 发布

阅读量84

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128596554

版权

一、CSS盒子模型（续）

1.padding不会撑开盒子的情况

示例

<title>padding不会影响盒子大小的情况</title>
    <style>
        h1 {
            /* 如果给一个盒子不制定宽度，则默认跟他父亲的宽度一样，这里h的父亲是body body是浏览器的宽度 */
            /* 只要设定了宽度，不管多少，都会因为padding改变 */
            /* width: 100%; */
            height: 200px;
            background-color: pink;
            /* 宽度没有变，高度多加了60px */
            padding: 30px;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
            /* 如果p指定宽度，则会比父亲多出60像素距离 */
            /* width: 100%; */
            /* p没有指定宽度，默认和父亲一样宽 有了padding p标签还是300*60像素 */
            /* 遇到这种嵌套，孩子和父亲一样宽就没有必要写宽度了 */
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

2.盒子模型外边距margin

在这里插入图片描述

示例

<title>盒子模型之外边距margin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 
        .one {
            margin-bottom: 20px;
        } */
        /*效果一样 */

        .two {
            /* margin-top: 20px; */
            /* margin: 30px; */
            margin: 30px 50px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

3.外边距典型应用-块级盒子水平居中对齐

示例

<title>外边距典型应用-块级盒子水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            /* margin-left: auto;  */
            /* margin-right: auto; */
            /* 最常用 */
            /* margin: 0 auto; */
            /* 上下左右都凹凸 */
            /* margin: auto; */
            /* 想要上边距更大一些 */
            margin: 100px auto;

        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

4.行内元素和行内块元素水平居中

示例

 <title>行内元素/行内块元素水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
        }

        /* 行内元素或者行内块元素水平居中给其父元素添加 text-align: center即可 */
    </style>
</head>

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="../img/2.png" alt="">
    </div>
</body>

5.外边距合并-嵌套块元素塌陷

在这里插入图片描述

示例

 <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 1.可以为父元素定义上边框 */
            /* border: 1px solid red;
            border: 1px solid transparent; */
            /* 2.可以为父元素定义上内边距 */
            /* padding: 1px; */
            /* 3.可以为父元素添加overflow:hidden */
            overflow: hidden;
            /* 第三种方式不会让盒子撑大 */
        }

        /* 有一个父盒子有一个子盒子，父元素子元素都有上外边距，父元素就会塌陷 */
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

6.清除内外边距

在这里插入图片描述

示例

<title>清除内外边距</title>
    <style>
        /* 这句话也是我们CSS的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: pink;
            /* 行内元素尽量只设置左右内外边距 发现只有左右外边距变化了 */
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>abcd</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

7.ps的基本操作

在这里插入图片描述

8.综合案例

在这里插入图片描述

（1）综合案例-产品模块布局分析

在这里插入图片描述

（2）综合案例-box布局

在这里插入图片描述

（3）综合案例-图片和段落制作

（4）综合案例-评价和详情制作

（5）综合案例-竖线细节制作

示例

<title>综合案例-产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }


        .box img {
            /* 宽度高度只设置一个 会等比例缩放 */
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            /* padding和margin都可以 */
            /* 因为这个段落没有 width属性 所以 padding不会撑开盒子的宽度 */
            /* 这个盒子有高度 如果再指定一个padding-top会撑大盒子 所以我们考虑用margin就不用去减去盒子的高度 */
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            /* 因为没有设置宽度高度 这里怎么改都可 */
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;

        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../img/122.png" alt="">
        <p class="review">啄木鸟、乌云和松果，暑热和针叶，全都化成了苍白的飞沫。</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <!-- <span style="color: #cecece">|</span> -->
            <!-- border ?-->
            <!-- 盒子与盒子之间的距离通过margin实现 -->
            <span>99.9元</span>
        </div>
    </div>
</body>

（6）综合案例-快报模块布局分析

在这里插入图片描述

（7）综合案例-快报模块头部制作

在这里插入图片描述

（8）综合案例-快报模块列表制作

在这里插入图片描述

示例

<title>新闻快报模块头部制作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            /* 因为盒子有个底边框 用margin的话 底边框也会右移 */
            /* margin-left: 15px; */
            /* 这里用padding才对 盒子不会撑大 因为h3没有写宽度属性*/
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        /* 页面中的小li都去掉了小圆点 */
        li {
            list-style: none;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            /* 因为没有设置宽度 */
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <!-- ul>li*5>a -->
        <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>

9.圆角边框

（1）圆角边框原理

在这里插入图片描述

示例

 <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

（2）圆角边框的使用

在这里插入图片描述

示例

<title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半 等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* 左对角线和右对角线 */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1.圆形的做法：
    <div class="yuanxing"></div>
    2.圆角矩形的做法：
    <div class="juxing"></div>
    3.可以设置不同的圆角：
    <div class="radius"></div>
</body>

10.盒子阴影

在这里插入图片描述

示例

<title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 水平阴影 数值减小左移 垂直阴影 数值减小上移 blur为0是实的 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3) inset; */
            /* box-shadow: 10px 10px; */

        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        /* 原先盒子没有阴影，当我们鼠标经过盒子就添加阴影效果 */
    </style>
</head>

<body>
    <div></div>
</body>

11.文字阴影

在这里插入图片描述

示例

 <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        你是阴影，我是火影
    </div>
</body>

澈如冬雪^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3基础（day11）

* 这个盒子有高度如果再指定一个padding-top会撑大盒子所以我们考虑用margin就不用去减去盒子的高度 *//* 如果给一个盒子不制定宽度，则默认跟他父亲的宽度一样，这里h的父亲是body body是浏览器的宽度 *//* p没有指定宽度，默认和父亲一样宽有了padding p标签还是300*60像素 *//* 有一个父盒子有一个子盒子，父元素子元素都有上外边距，父元素就会塌陷 *//* 只要设定了宽度，不管多少，都会因为padding改变 */
复制链接

扫一扫