CSS学习笔记2

最新推荐文章于 2024-07-20 15:40:46 发布

听风说你！

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量56

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_47801930/article/details/123560444

版权

CSS学习笔记2

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 1px blue ;

        }
    </style>
</head>
<body>

<div>

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

浮动（float）

标准文档流

块级元素：独占一行
h1-h6 、p、div、列表
行内元素：不独占一行
span 、a、image、strong

行内元素可以被包含在块级元素中，反之则不可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/demo02.css">
</head>
<body>
<div id="father">
<div class="d1"><img src="../imag/pic.jpg" alt=""></div>
<div class="d2"><img src="../imag/meinv.jpg" alt=""></div>

<div class="d3">
    浮动的盒子可以向左浮动，也可以向右浮动，知道它的外边缘碰到包含该内容的页面边缘
</div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid #000;
}

.d1{
    border: 1px dashed #F00;
    display: inline-block;
    float: left;
}

.d2{
    border: 1px dashed #060;
    display: inline-block;
    float: left;
}

.d3{
    border: 1px dashed #00F;
    display: inline-block;
    font-size: 12px;
    line-height: 23px;
    float: right;
    clear: both;
}

display

block：块元素

inline：行内元素

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

父级边框塌陷问题

clear:
- right
- left
- both
- none

解决方案：

1.增加父级元素的高度

2.增加一个空的div标签清除浮动

3.overfloat

在父级元素中增加一个overfloat：hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 150px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="content">
    <img src="../imag/bg.jpg" alt="">
</div>
</body>
</html>

4.在父类中添加一个伪类

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

小结：

1.浮动元素后面增加空div

缺点：代码中尽量避免空div

2.设置父类元素的高度

缺点：当新增的东西超过了父类的高度，还是会面临同样的问题

3.overfloat

缺点：下拉的一些场景避免使用

4.父类添加一个伪类：after

推荐使用

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

display与float对比

display：方向不可控制

float：浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题

定位

相对定位
position：relative
top：
botton：
left：
right：
相对于原来的位置进行指定的偏移，原来的位置会被保留

Title

听风说你！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记2

CSS学习笔记2盒子阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 10px solid
复制链接

扫一扫