【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

news2024/11/24 16:30:53

文章目录:

1.清除默认样式
- 1.1清除内外边距
- 1.2清除列表圆点(项目符号)
3.外边距问题-合并现象
4.外边距问题–塌陷问题
5.行内元素垂直内外边距
6.圆角与盒子阴影
- 6.1圆角
- 6.2 盒子模型-阴影(拓展)

综合案例一产品卡片
综合案例二新闻列表

1.清除默认样式

在实际设计开发中,要清除默认的样式,默认的内外边距

1.1清除内外边距

box-sizing可以加到这里面写,控制盒子大小

*{ bn
margin: 0;
padding: 0;

box-sizing: border-box;
}

1.2清除列表圆点(项目符号)

li {
list-style: none;
}

2.盒子模型–元素溢出

作用:控制溢出元素的内容的显示方式
属性名: overflow
属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动(无论是否溢出,都显示滚动条位置)
auto	溢出滚动(溢出才显示滚动条位置)

3.外边距问题-合并现象

场景:垂直排列的兄弟元素，上下margin会合并
现象:取两个margin中的较大值生效
在这里插入图片描述

.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}

4.外边距问题–塌陷问题

在这里插入图片描述
解决方法:

取消子级margin，父级设置padding
父级设置overflow: hidden
父级设置border-top

5.行内元素垂直内外边距

场景:行内元素添加margin和 padding，无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置

span {
/*margin和padding属性,无法改变垂直位置*/
margin: 50px;
padding: 20px;

/*行高可以改变垂直位置*/
line-height: 100px;
}

6.圆角与盒子阴影

6.1圆角

作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px/百分比
提示:属性值是圆角半径

<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
/*border-radius: 20px;*/
/*记忆:从左上角顺时针赋值,没有取值的角与对角取值相同*/
/产四值:左上 右上 右下 左下*/
/*border-radius: 10px 20px 40px 80px;*/
/*三值:左上右上+左下右下*/
/*border-radius: 10px 40px 80px;*/
/产两值:左上+右下右上+左下*/
border-radius: 10px 80px;
}
</style>

常见应用-正圆形状
- 给正方形盒子设置圆角属性值为宽高的一半/50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        padding: 100px;
        border-radius: 50%;
       }
    </style>
   
</head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
</body>
</html>

在这里插入图片描述

常见应用-胶囊形状
- 给长方形盒子设置圆角属性值为盒子高度的一半

6.2 盒子模型-阴影(拓展)

作用:给元素设置阴影效果
属性名: box-shadow
属性值:X轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影

注意:

x轴偏移量和Y轴偏移量必须书写
默认是外阴影，内阴影需要添加inset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 50px auto;
        border-radius: 50%;
        box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
       }
    </style>
   
</head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
</body>
</html>

在这里插入图片描述

综合案例

综合案例一产品卡片

CSS书写顺序:
1.盒子模型属性
2.文字样式
3.圆角、阴影等修饰属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{
            margin: 50px auto;
            width: 270px;
            height: 253px;
            background-color: #fff;
            text-align: center;
            padding: 40px;
            border-radius: 10px;
        }
        .product h4{
            margin-top: 20px;
            margin-bottom: 12px;
            color: #333;
            font-size: 18px;
            font-weight: 400;
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/liveSDK.svg">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>

在这里插入图片描述

综合案例二新闻列表

<!DOCTYPE html>
<html lang="en">
<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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
      /* background-color: pink; */
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      /* -1 盒子向上移动 */
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;

      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./images/square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./images/img.gif) no-repeat 0 center;

      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }
  </style>
</head>
<body>
  <!-- 新闻区域 包含 标题 + 内容 -->
  <div class="news">
    <div class="hd"><a href="#">新闻</a></div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
        <li><a href="#">在希望的田野上...</a></li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
        <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
        <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
        <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
      </ul>
    </div>
  </div>
</body>
</html>