CSS定位 前端开发

使用定位的步骤

1、设置定位方式

属性名：position
常见属性值：

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

2、设置偏移量

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离那边近用哪个）

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离
标签: css
吾峰 发布于  2023-3-1 16:15 
评论(2)  浏览(326)

CSS解决外边距塌陷/清除浮动双伪元素 前端开发

  • 外边距塌陷：父子标签，都是块级，子级加margin会影响父级位置。
  • 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面。
.clearfix::before,
.clearfix::after {
    content: ''
    display: table;
}
.clearfix::after {
    clear: both;
}

清除浮动的方法-给父元素设置overflow：hidden

overflow:hidden
标签: css
吾峰 发布于  2023-2-24 15:53 
评论(0)  浏览(225)

CSS 书写顺序 前端开发

CSS书写顺序：浏览器执行效率更高
1、浮动 / display
2、盒子模型：margin borde padding 宽度高度背景色
3、文字样式

标签: css
吾峰 发布于  2023-2-23 16:53 
评论(0)  浏览(231)

CSS-盒子模型-外边距折叠现象-塌陷现象 前端开发

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

  1. 给父元素设置border-top 或者 padding-top （分隔父子元素margin-top）
    2.给父元素设置overflow：hidden（推荐）
    3.转换成行内块元素
    4.设置浮动
<!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>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 50px ;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>
标签: css
吾峰 发布于  2023-2-16 21:50 
评论(0)  浏览(284)

个人资料

blogger
吾峰
业务技术群：132768713

搜索

标签

ai Stable diffusion blender pygame python css html

微语

  • Python会忽略[ ] { } ( )内部的换行。因此，列表、列表推导式、元祖、字典等结构完全可以分成几行来写，无须使用续行转义符\。

    吾峰 2024-04-29 13:11

最新文章

热门文章

最新评论

链接

日历

存档