前端 HTML/CSS （十七 总结）

最新推荐文章于 2024-04-04 12:04:33 发布
最新推荐文章于 2024-04-04 12:04:33 发布
阅读量287 收藏
点赞数
分类专栏： Html/CSS 文章标签： html css css3 flex html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021982/article/details/112503290
版权

目录

弹性元素排序

order

默认的时候，弹性元素的显示和排序顺序是与在源码中的顺序一致的，如果更改需要使用order属性。

格式：order:value，用于弹性元素，默认情况下所有弹性元素的顺序都是0。

修改弹性元素的视觉顺序，可以将order设置为一个非零的整数（正数、负数）

数越大在主轴上面越靠后。如果数值相同它们会被分配在同一个排序组中，以出现在源码中的顺序沿着主轴方向显示。

注意：使用order时只是视觉上的变化，就像在源码中的顺序发生了修改一样（但是实际并没有发生修改）。

收缩因子

flex元素仅在默认宽度之和大于容器的时候才会发生收缩。收缩的依据是flex-shrink的值。

flex-shrink的默认值是1，其他的值始终是一个数字，负数无效。可以是小数，只要大于0就行。

适用于弹性元素。收缩因子定义的是空间不够放置所有弹性元素，而弹性容器不能增加尺寸或不允许换行时如何分配缺少的空间。

BFC

block formatting context，块格式化上下文，是web页面的可视化CSS渲染出的一部分。形成了BFC就形成了一个独立的区域，区域里面的子元素不会影响到外面的元素。

形成BFC的方法：

  • 浮动元素：元素的float不是none的元素。
  • 绝对定位的元素：position的值为absolute或fixed。
  • 具有overflow并且值不是visible的块元素。
  • display为flow-root的值。（CSS3中新增加的。），只是单纯的触发BFC。

上面的1、2、3都可以形成BFC并且加上自己的特性（float形成BFC并且形成了浮动，Position形成BFC并且可以进行定位，overflow形成BFC并且可以隐藏多出来的内容。） 而flow-root只是单纯的触发BFC。

形成BFC之后的应用：

  1. 爸爸管儿子，让爸爸能够包裹住儿子。 来爸爸抱抱。

    • 解决float高度塌陷问题。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            width:200px;
            border:5px solid green;

            /* float:left; */
            display:flow-root;
        }
        #z{
            float:left;
            width:100px;
            height:100px;
            border:1px solid blue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>
  • 解决父子之间的margin合并问题
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            width:200px;
            margin:10px;
           /* border:1px solid green; */
           /* display:flow-root; */
           overflow: hidden;
        }
        #z{
           margin:20px;
            width:100px;
            height:100px;
            border:1px solid blue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

  1. 解决兄弟之间的float和margin。

    • 兄弟元素之间上下边距折叠问题。
    • 防止外边距折叠，可以套一个div，然后给新加的div设置 flow-root;
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #z1,#z2{
            margin:20px;
            width:100px;
            height:100px;
            border:1px solid green;
        }

        #f > div{
            display:flow-root;
        }
    </style>
</head>

<body>
    <div id="f">
        <div>
            <div id="z1"></div>
        </div>
        <div id="z2"></div>
    </div>
</body>
  • 解决float时块元素重叠，行内元素不重叠。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        img{
            float:left;
        }
        #f > div{
            border:1px solid green;
            display:flow-root;
        }
    </style>
</head>

<body>
    <div id="f">
        <img src="./lipeiqian.jpg" />
        <div>123456789</div>
    </div>
</body>
水平、垂直居中的总结

  1. 内联元素水平居中

    text-algin:center只对inline和inline-block有效。对block无效。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="f">
        <img src="./lipeiqian.jpg" />
        <span>华华的baba</span>
        <div style="width:100px;height:100px;border:1px solid green;">hehe</div>
    </div>
</body>

</html>
  1. 块级元素水平居中。
!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
        }
        #f > div{
            margin:0 auto;
        }
    </style>
</head>

<body>
    <div id="f">

        <div style="width:100px;height:100px;border:1px solid green;">hehe</div>
    </div>
</body>

</html>
  1. display:flex;justify-content:center

块状元素、行内元素、行内块状元素都可以。

!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            display:flex;
            justify-content: center;
        }
        
    </style>
</head>

<body>
    <div id="f">
        <!-- <img src="./lipeiqian.jpg" /> -->
        <span>小哗哗</span>
        <!-- <div style="width:100px;height:100px;border:1px solid green;">hehe</div> -->
    </div>
</body>

</html>
  1. 单行内联元素垂直居中
    设置内联元素的高度和行高相等。
!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            height:100px;
            line-height: 100px;
        }
        
    </style>
</head>

<body>
    <div id="f">
        沛华真丑！（江鉴哲说的！）
    </div>
</body>

</html>
  1. 多行内联元素垂直居中
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            width:400px;
            height:500px;
            font-size:0;
            line-height: 500px;
        }
        #f > span{
            border:1px solid green;
            display:inline-block;
            line-height:normal;
            vertical-align: middle;
            font-size:16px;
        }
        
    </style>
</head>

<body>
    <div id="f">
        <span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
    </div>
</body>

</html>
  1. display:table-cell

table-cell将元素定义为表格中的一个单元格，对应的HTML元素是th或td。

在table-cell中使用middle时，单元格中的内容的中线与行的中线对齐。

display: table-cell; 会将一个元素显示成单元格，就相当于给加了一个td。

vertical-align: middle 要写在父元素上面。

!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            width:400px;
            height:500px;
            display:table-cell;
            vertical-align: middle;
        }
        #f > span{
            border:1px solid green;

        }
        
    </style>
</head>

<body>
    <div id="f">
        <span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
    </div>
</body>

</html>
  1. display:flex;align-items:center
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            width:400px;
            height:500px;
            display:flex;
            align-items: center;
        }
        #f > span{
            border:1px solid green;

        }
        
    </style>
</head>

<body>
    <div id="f">
        <span>沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）沛华真丑！（江鉴哲说的！）</span>
    </div>

</body>

</html>
  1. 定位可以实现水平、垂直居中。
  • 使用margin-left和margin-top来实现。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            width:400px;
            height:500px;
            position:relative;
        }
        #z{
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-50px;
            margin-left:-50px;
            width:100px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>
  • 使用transform:translate(-50%,-50%);来实现。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <style>
        #f{
            border:1px solid red;
            width:400px;
            height:500px;
            position:relative;
        }
        #z{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:100px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>
总结:

儿子浮动，父亲塌陷，父亲也浮动，高度正常。

木森林哥哥
关注
专栏目录
2024 前端高频面试题之 HTML/CSS 篇
Aybuai的博客
01-18 2395
使用float布局两侧使用 margin 负值，以便和中间内容横向重叠防止中间内容被两侧覆盖，一个用padding为两侧留白 一个用margin为两侧留白。
HTML/CSS学习总结
豪阁的个人博客
01-01 3759
哈喽，各位新年快乐呀！今天是2019年的第一天，在这里祝愿大家新的一年能够身体健康、事事顺利，同时希望自己能够在新的一年里完成自己当初所定下的目标。 言归正传，很高兴我并没有经过多久继续更新博客，上一次发博还是在一周前的平安夜。在这一周的闲余时间里我抓紧时间学习，在W3School中文站把HTML/HTML5和CSS/CSS3的基础耐心地过了一遍，期间也完成了一些实例和测验，由于存在以往自身在其...
CSS3盒子模型
计算机程序定制、毕业项目
04-15 668
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS盒子模型</title> </head> <body> 盒子模型具有内边距、边框、外边距、宽和高这些基本属性, 但不要求每个属性都设置这些属性. 一、盒子模型的相关属性 1.边框属性 包括边框样式border-style、边框宽度border-width、边框
前端html+css+js常用总结快速入门
showy0的博客
04-04 2035
学习前端全套所有技术性价比低下且容易忘记，先入门学会所有基础的语法（css+js+heml），常用示例，再根据项目上手练习，哪里不会查哪里是最好的学习方式
第十六天前端HTML、CSS、JavaScript详细总结（内置VSCode安装教程）
HuanLe.的博客
03-17 3006
前端笔记总结
前端知识——css之flex布局
Caleb的博客
05-20 2万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
【前端】夯实基础 css/html/js 50个练手项目（持续更新）
chenghan_yang的博客
02-21 1万+
发现一个没有用前端框架的练手项目，很适合我这种纯后端开发夯实基础，内含50个mini project，学习一下，做做笔记。项目地址：https://github.com/bradtraversy/50projects50days。
Web前端 知识点总结（HTML、CSS、JS）
qq_43655412的博客
08-28 2514
Web前端 知识点总结（HTML、CSS、JS）
前端基础：CSS总结
时光
04-18 1746
前端基础：CSS总结
web前端（HTML+CSS）试题总结
qq_43434300的博客
11-25 3514
一.填空题 1.网页的后缀名通常为(xxx.html)或(xxx.htm)的页面. 2.请写出在网页中设定表格边框的厚度的属性(border),设定表格单元格之间宽度属性(cellspacing),设定表格资料与单元格线的距离属性(cellpadding). 3.预定义格式化标签&amp;amp;lt;pre&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;的功能是(被包围在pre元素中的文本通常会保留空格和换行符,而文本也会呈现...
基于HTML/CSS/JavaScript的JavaScript前端基础知识练习与总结源码
10-05
该项目集成了HTML、CSS、JavaScript等多种前端技术，旨在通过131个文件构建一套全面的前端基础知识练习与总结源码。其中包括25个HTML文件、20个JPG图片、17个Java文件、17个CSS文件、16个PPTX文件、10个PNG图片、6个...
免费下载前端HTML，CSS总结(b站黑马程序员540集)
06-19
前端开发是创建网页和应用程序的过程，包括HTML、CSS和JavaScript的使用。前端开发者需要关注用户体验，确保网站在不同设备和浏览器上都能正常工作。 响应式设计是现代前端开发的重要概念，它允许网页根据用户的...
前端 HTML+CSS+JavaScript 知识点总结
最新发布
10-24
前端 HTML+CSS+JavaScript 知识点总结
[HTML/CSS/Javascript]WWTJS
10-30
根据提供的信息，“[HTML/CSS/Javascript]WWTJS”似乎是指一个使用HTML、CSS和JavaScript技术栈构建的前端用户界面（UI）项目。该项目采用了包装模式的设计思想来增强普通元素的表现和功能，并且在一定程度上探索了...
display属性详解
热门推荐
木木木森林
11-26 6万+
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。 块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。 display常用属性值1. none：隐藏对象2. inline： 指定对象为行内元素3. block： 指定对象为块元素4. inline-bl.
font-family：常用中文字体的英文名称 （宋体 微软雅黑）
木木木森林
12-06 1万+
常用中文字体的英文名称 （宋体 微软雅黑） 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体（font-family）的英文名称 Mac OS的一些：
前端必备网站（纯手工输入）
木木木森林
12-05 1万+
首推B站（没有你学不会的技术，无广告，全免费） https://www.bilibili.com/ MDN JS 学习（最爱的前端网站） https://developer.mozilla.org/zh-CN/docs/learn/JavaScript 印记中文 https://docschina.org/ Stack Overflow https://insights.stackoverflow.com/trends 消除图片中的背景 https://www.remove.bg/zh ...
HTML/CSS 三个小盒子在一个大盒子中水平居中
木木木森林
01-05 1万+
HTML/CSS 三个小盒子在一个大盒子中水平居中 方法一：把子盒子变成行内块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .big { width: 600px; height: 600px
HTML 表格
木木木森林
12-04 1万+
目录1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@ 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table&gt
HTML/CSS基础知识点精要总结
本文档深入总结了HTML和CSS的核心知识点，旨在帮助学习者快速理解和掌握这两种前端开发的基础技术。首先，我们将从HTML基础语法和标签结构入手： 1. HTML基础语法： - HTML使用特定的符号，如空格用于缩进，><...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值