css学习下-CSDN博客

本文链接：https://blog.csdn.net/qq_53395921/article/details/123972938

1、盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AV8e4ayu-1649150255139)(D:\Markdown学习\图片\盒子模型.png)]

margin：外边距

padding：内边距

border：边框

1.1 边框

粗细

样式：solid实线；dashed虚线

颜色

2、圆角边框

左上右上右下左下（顺时针）

border-radius: 50px 20px;

3、浮动

块级元素：独占一行

h1~h6  p   div  列表

行内元素：多个元素共享一行

span   a  img   strong

行级元素可以包含在块级元素中

如何将块级元素放在同一行？
在style中添加
display:inline-block;
添加浮动
float:right;
float:left;

清除浮动
clear:right;
clear:left;
clear:both;两侧都不允许浮动
clear:none;不浮动

block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行

3.1、父级边框塌陷问题

浮动元素后面增加空div

简单，代码中尽量避免空div，将该空div设置为清除浮动
```
<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}
```
设置父元素的高度

简单，但是会被限制，把父级元素高度设置的大于子元素高度
overflow(自动溢出)

简单，下拉的一些场景避免使用
```
在父级元素中添加  overfloat:hidden;
```

父类添加一个伪类：after（推荐）

写法复杂一点，但是没有副作用

#father:after{
    content: '';
    display:block;
    clear:both;
}

3.2、对比

display

方向不可控制
float

可以控制向左向右漂，浮动起来的话会脱离标准文档流，所以要解决腹肌边框塌陷问题

4、定位

4.1 相对定位 relative

position:relative;  相对定位，前后左右

top
left
bottom
right

相对于原来的位置，进行指定的偏移。相对定位后，原来的位置会被保留。

4.2 绝对定位 absolute

position:absolute;

没有父元素定位的前提下，相对于浏览器边框定位。

假设父级元素存在定位，会相对于父元素进行偏移。

在父级元素内移动

4.3 固定定位 fixed

position:fixed;

4.4 z-index

图层

最低是0，最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li>
            <img src="images/1.jpg" alt="">
        </li>
        <li class="tipText">这是我的头像哦</li>
        <li class="tipBg"></li>
        <li>时间：2022-04-05</li>
        <li>地点：河南工业大学</li>
    </ul>
</div>

</body>
</html>

#content{
    width:500px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border:1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:547px;
}
.tipText{
    z-index: 999;
    color: red;
}
.tipBg{
    background: #000;
    opacity: 0.5;
    /*filter:alpha(opacity=50);*/
}