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

文章目录:

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>