HTMLday0619

最新推荐文章于 2024-08-10 09:49:48 发布
最新推荐文章于 2024-08-10 09:49:48 发布
阅读量171 收藏 3
点赞数 8
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71108047/article/details/139811230
版权

1. 浮动(float)

CSS 布局的三种机制

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位

普通流（标准流）

        块级元素会独占一行，从上向下顺序排

        行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。定位将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效清除浮动的影响。

2.清除浮动


     <!-- 在浮动元素的末尾添加一个div标签设置clear:both -->

可以给父级添加： overflow为hidden|auto|scroll 都可以实现,只要不是visible

:after 方式为空元素的升级版，好处是不用单独加标签了

<!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>
        .father {
            width: 300px;
            border: 1px solid rgb(18, 7, 236);
            /* box-sizing: border-box; */
        }
        
        .son {
            width: 100px;
            height: 50px;
            background-color: brown;
            float: left;
        }
        
        .s {
            width: 100px;
            height: 50px;
            background-color: black;
            /* float: left; */
        }
        
        .q {
            width: 100px;
            height: 50px;
            background-color: rgb(171, 21, 164);
            float: right;
        }
        
        .father_bro {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
        }
        
        .father::after {
            content: '.........';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
        /* 隐藏,
            虽然隐藏但仍然站位  */
        /* 如果子元素都浮动,父元素没有设置高度,产生了浮动的影响,可以使用伪元素的方法来清除浮动 */
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="s"></div>
        <div class="q"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="father_bro"></div>
</body>

</html>
<!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>
        .father {
            width: 300px;
            border: 1px solid rgb(23, 145, 82);
            /* 给父元素设置overflow: hidden; */
            overflow: hidden;
        }
        
        .son {
            width: 100px;
            height: 50px;
            background-color: brown;
            float: left;
        }
        
        .q {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="q"></div>
</body>

</html>

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>
        什么时候使用伪元素
        /* content: 内容属性是伪元素必备的元素; */
        /* .x::before {
            content: '小马抢了';
        }
         */
        
        .x::after {
            content: '小华也来了';
        }
        /* before作为父元素的第一个孩子存在
        after作为父元素的最后一个孩子存在 */
    </style>
</head>

<body>
    <!-- 元素标签html 伪元素:假的标签 -->
    <div class="x">
        <span>小明爱</span>小红
    </div>
</body>

</html>

4.相对定位

            /* 相对定位没有脱离自己原来的位置进行定位 没有脱离标准流 */

<!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>
        .f {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
        }
        
        .s1 {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        
        .s2 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            /* 相对定位没有脱离自己原来的位置进行定位 没有脱离标准流 */
            position: relative;
            left: 100px;
            top: 80px;
        }
        
        .s3 {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="s1">son1</div>
        <div class="s2">son2</div>
        <div class="s3">son3</div>
    </div>
</body>

</html>

5.绝对定位

<!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>
        .f {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
        }
        
        .s1 {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        
        .s2 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            left: 100px;
            top: 80px;
        }
        /* 绝对定位
        父亲没有设置定位,那么相对于body(文档进行定位) */
        
        .s3 {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="s1">son1</div>
        <div class="s2">son2</div>
        <div class="s3">son3</div>
    </div>
</body>

</html>

6.子绝父相

<!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>
        .f {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
            position: relative;
        }
        
        .s1 {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        
        .s2 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            left: 100px;
            top: 80px;
        }
        
        .s3 {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="s1">son1</div>
        <div class="s2">son2</div>
        <div class="s3">son3</div>
    </div>
</body>

</html>

7.固定位置

<!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 {
            position: fixed;
            right: 50px;
            bottom: 100px;
        }
        
        .sc {
            width: 100px;
            height: 5000px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <!-- fixed position: 固定定位,相对于浏览器进行定位 -->
    <img src="../huaweiguanwang/img/logo.svg" alt="" width="1000px">
    <div class="sc"></div>
</body>

</html>

浮不起来的气球
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTMLday0618
m0_71108047的博客
06-18 327
一行内显示的元素当空间不足时,会自动换行排列行内以及行内块元素如果HTML元素中间有回车符会被解析为空白符,会有空白。
HTMLday0613
m0_71108047的博客
06-14 215
【代码】HTMLday0613。
HTMLday2
hlx250217的博客
07-07 96
13-css的三种引入方式。09-html的全局属性。10-html5语义标签。07-表单的基本结构。08-常见的表单元素。
HTMLday1
hlx250217的博客
07-06 81
---文宇、图片、音频、视频、超链接 打开网页看见的网页的背后：前端程序员写的代码 一------京东网页源代码。不同的标签具有不同的属性 不起作用。1S0 8859-1=====>扩充一些希腊字符 （256)--欧洲人。GBK======》 继续追加收录汉字和字符20000+，支持繁体中文。ASCIl=====》大小写字母、数宇、符号（128个表） 美。6B2312======>扩充6763个汉字，682个字符。包含关茶（父子标签）、并交系（兄弟关系）
HTMLday0614总结
m0_71108047的博客
06-14 312
h-shadow水平阴影 v-shadow垂直阴影 blur模糊半径 color阴影颜色h 正 向右 V 正 向 下。
HTMLday0617总结
m0_71108047的博客
06-17 269
important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。/* 下面属性不具有继承性:边框,外边距,内边距,背景,定位元素宽高属性 */复合选择器的权重无论为多少个标记选择器和类选择器的叠加,其权重都不会高于id选择器。复合选择器的权重无论为多少个标记选择器的叠加,其权重都不会高于类选择器。double 双实线。类选择器的权重为10。id>类>标记选择器。square 实心方块。
前端HTMLday01
m0_74070936的博客
11-15 58
对于img,video,audio等标签都具有src属性负责接收对应文件，由相对路径和绝对路径两种属性书写方法，绝对路径由于过于死板，在开发过程中使用频率不高。HTML作为对网页内容最基础的处理和修饰，在VSCODE上运行时输出!“内容”由一个一个标签填充。
htmlday1
hpsym的博客
12-29 524
</head> <body> <!-- 1.标题标签:h1~h6 --> <h1>一级标题</h1> <h2>二级标题</h2> <!-- 2.段落标签 --> <p>fsjfshfhjhfhsj</p> <!-- 3.行内文字标签:span --> <span>张阿士大夫撒积分</span> ...
HtmlDay02
wumingxiaoi的博客
08-12 94
笔记：标题标签 约束 h1 —> h6都是标题标签 h1最大，h6最小 属性：align–>对其方式 left–>默认左对齐 center–>居中对齐 reght–>右对齐 整理 首先标题标签只有6个，最大为h1,最小的为h6。 标题标签也是有属性的，有一个align的属性，默认的为align的属性为left 练习 <h1 align="left">标题1:我在左边</h1> <h2 align="left">
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 225
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 684
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 685
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
CSS 多按钮根据半圆弧度排列
前端技术
08-08 405
多个按钮根据弧度，延边均匀排列。
CSS文本两端对齐
yan1915766026的博客
08-07 382
表单两端对齐怎么写？一个个加空格？叫你CSS轻松搞定
css实现两个字和三个字的两端对齐
qq_59625204的博客
08-08 182
【代码】css实现两个字和三个字的两端对齐。
css水波浪动画效果
米拉
08-06 495
【代码】css水波浪动画效果。
24.在 CSS 中定义系统字体栈 & 实现全屏
最新发布
粉丝们务必加入微信粉丝群
08-10 195
在 CSS 中定义系统字体栈使用字体栈是指在 CSS 规则的 font-family 属性中定义字体列表的做法。浏览器会按顺序查找每个字体,如果可能的话首选第一个字体,如果找不到字体(在系统上或在 CSS 中定义),则回退到下一个字体。系统字体栈是一个字体列表,用于接近原生应用的感觉。它使用操作系统的原生字体来渲染文本,这是让你的 Web 应用感觉更原生的好方法。使用 system-uisyste...
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1465
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
国内有哪些热门前端开发的论坛 ，给出地址
03-31
1. 掘金：https://juejin.cn/frontend 2. CSDN：https://bbs.csdn.net/forums/Web前端开发 ...9. 前端大全（前端资源库）：http://www.htmlday.com/ 10. 前端工具集（前端工具）：https://www.html.cn/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值