Day 16 狂神说Java基础笔记（CSS 15-24）

最新推荐文章于 2023-08-10 18:38:47 发布

南北tp

最新推荐文章于 2023-08-10 18:38:47 发布

阅读量244

点赞数

分类专栏：狂神学习文章标签： css

本文链接：https://blog.csdn.net/weixin_44436378/article/details/106764988

版权

狂神学习专栏收录该内容

39 篇文章 6 订阅

订阅专栏

15-内外边距及居中

margin:0 auto//块元素有固定的宽度

text-align：center

16-圆角边框及阴影

border-radius:
box-shadow:

17-display和浮动

5.1标准文档流
行内元素:span
块元素：div h1 p
display:block,inline;inline-block;none，不能控制方向
float:left;right，浮动起来脱离标准文件流
浮动块元素clear:both;

18-overflow与父级边框塌陷

增加父级元素高度，简单，但是有固定的高度，就会被限制

#father{
	border：1px #000 solid；
	height：100px；
}

新增空div,清除浮动，简单，但代码中避免空的div

<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}

父级元素新增overflow：hidden/scroll，简单，下拉的一些场景避免使用
新增伪类*，推荐，复杂，无副作用

#father:after{
content:""
diaplay:block;
clear：both；
}

19-相对定位

position：relative
top:-10px

20-习题

b.css
#box{
    width: 320px;
    height: 320px;
    border: 2px solid red;
    padding: 10px;
}
a{
    text-decoration: none;
    height: 100px;
    width: 100px;
    background: #e57fb1;
    line-height: 100px;
    text-align: center;
    color: white;
    display: block;
}
a:hover{
    background: #5353f1;
}
a:nth-child(2),a:nth-child(4){
    position: relative;
    top: -100px;
    left: 200px;
}
a:nth-child(5){
    position: relative;
    top: -300px;
    left: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block</title>
</head>
<link rel="stylesheet" href="../css/b.css">
<body>
<div id="box">
    <a href="1.MyBeloved.html">链接1</a>
    <a href="1.MyBeloved.html">链接2</a>
    <a href="1.MyBeloved.html">链接3</a>
    <a href="1.MyBeloved.html">链接4</a>
    <a href="1.MyBeloved.html">链接5</a>
</div>

</body>
</html>

21-绝对定位及固定定位

绝对定位：position：absolute

没有父级元素时，相对浏览器边框定位
假设父级元素存在定位，通常会对父级元素偏移
在父级或浏览器的位置，进行指定的偏移，绝对定位
固定定位：position：fixed

22-z-index及透明度

z-index：999；
filter:alpha(optical=50)

23-动画及视野拓展

canvas动画

24-总结

南北tp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Day 16 狂神说Java基础笔记（CSS 15-24）

15-内外边距及居中margin:0 auto//块元素有固定的宽度text-align：center16-圆角边框及阴影border-radius:box-shadow:17-display和浮动5.1标准文档流行内元素:span块元素：div h1 pdisplay:block,inline;inline-block;none，不能控制方向float:left;right，浮动起来脱离标准文件流浮动块元素clear:both;18-overflow与父级边框塌陷增加父级元素
复制链接

扫一扫

专栏目录