HTML、CSS 知识点总结

已于 2024-01-11 11:55:59 修改
阅读量465 收藏 8
点赞数 8
文章标签： html css 前端
于 2023-12-11 16:54:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39145919/article/details/134912129
版权

如何理解 HTML 语义化

<div>
	<div>这是一个标题</div>
	<div>这是一个段文字</div>
	<div>
		<div>列表</div>
		<div>列表</div>
	</div>
</div>

<div>
	<h1>这是一个标题</h1>
	<p>这是一个段文字</p>
	<ul>
		<li>列表</li>
		<li>列表</li>
	</ul>
</div>

语义化的优点

  1. 让人更容易读懂，增加代码的可读性；
  2. 让搜索引擎更容易读懂，SEO ；

常见的块状元素和内联元素

块状元素（独占一行）：display: block/table；比如 div、p、h、table、ul、ol；
内联元素（排列在一行，直到浏览器换行）：display: inline；比如 span、img；
行内块状元素（可以挤在一起，又可以设置宽高）：display: inline-block；input、button；（也可以归类到内联元素）。

display: table 的作用

目前，在大多数开发环境中，已经基本不用 table 元素来做网页布局了，取而代之的是 div+css，那么为什么不用table 系表格元素呢？

  1. 用 div+css 编写出来的文件 文件大小比用 table 写出来的要小；
  2. table 必须在页面完全加载后才显示，没有加载完毕前，table 为一片空白，也就是说，需要页面加载完毕后才显示，而 div 是逐行显示，不需要页面完全加载完毕，可以一边加载一边显示；
  3. 非表格内容用 table 来写，不符合标签语义化要求，不利于SEO；
  4. table 的嵌套性太多，用 div 代码会比较简洁。

table 的作用：让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果。
table 表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助 display: table-cell 属性。

CSS 盒模型

offsetWidth = 内容宽度 width + 内边距 padding + border；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
		
		#div2 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
            box-sizing: border-box; /* 让盒模型宽度 === 内容宽度width */
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>
    
    <div id="div2">
        this is div2
    </div>

    <script>
        // document.getElementById('div1').offsetWidth // 122px
        // document.getElementById('div2').offsetWidth // 100px
    </script>
</body>
</html>

margin 纵向重叠

<head>
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

AAA与BBB的间距是15px

  1. margin-top 与 margin-bottom 会重叠；
  2. 空的 p 标签会重叠。

margin 负值

  1. margin-left 负值，自身向左移动；
  2. margin-top 负值，自身向上移动；
  3. margin-right 负值，自身没有影响，右侧元素向左移动；
  4. margin-bottom 负值，自身没有影响，下方元素向上移动；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin 负值</title>
    <style type="text/css">
        body {
            margin: 20px;
        }

        .float-left {
            float: left;
        }
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        .container .item {
            width: 100px;
            height: 100px;
        }
        .container .border-blue {
            border: 1px solid blue;
        }
        .container .border-red {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <p>用于测试 margin top bottom 的负数情况</p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>

    <p>用于测试 margin left right 的负数情况</p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 3
        </div>
        <div class="item border-red float-left">
            this is item 4
        </div>
    </div>

</body>
</html>

BFC 块级格式化上下文

一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素。BFC 的意思是形成一个范围，让内部元素不能脱离这个范围。

形成 BFC 的条件

  1. float 不是 none
  2. position 是 absolute 或 fixed
  3. overflow 不是 visible
  4. display 是 inline-block
  5. flex 的子元素

BFC的常见应用

清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>
</body>
</html>

float 布局 - 实现圣杯布局和双飞翼布局

圣杯布局（三栏布局，左右两侧固定，中间自适应宽度，有一个头和尾）

  1. float 布局
  2. margin 负值实现
  3. 中间留白部分用 padding
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

双飞翼布局（三栏布局，左右两侧固定，中间自适应宽度）

  1. float 布局
  2. margin 负值实现
  3. 中间留白部分用 margin
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

flex 布局 - 实现3点骰子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>

absolute 和 relative 定位问题

  1. relative 是基于自身定位；
  2. absolute 是基于上层最近的一个定位元素而定位；
    *[定位元素]：position 不是 static

CSS - 图文样式

line-height 如何继承

  1. line-height 如果是具体数值，比如 30px，则继承 30px；
  2. line-height 如果是比例，比如1.5，则继承比例1.5;
  3. line-height 如果是百分比，则继承父元素计算后的结果。
<style>
	body {
		font-size: 20px;
		line-height: 200%;
	}
	
	p {
		font-size: 16px;
		/* 继承后的line-height: 40px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

<style>
	body {
		font-size: 20px;
		line-height: 30px;
	}
	
	p {
		font-size: 16px;
		/* 继承后的 line-height: 30px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

<style>
	body {
		font-size: 20px;
		line-height: 1.5;
	}
	
	p {
		font-size: 16px;
		/* 继承后的 line-height: 1.5; === line-height: 24px; */
	}
</style>

<body>
	<p>AAA</p>
</body>

CSS - 响应式

  1. px 绝对长度单位；
  2. em 相对长度单位，相对于父元素；
  3. rem 相对长度单位，相对于根元素（html），一般配合 media-jquery 使用。
    *[media-jquery]：根据不同的屏幕宽度设置根元素的 font-size。相较于 vw 和 vh 的弊端，它是具有阶梯式的。
  4. vw 和 vh ：vw 是网页视口宽度的百分之一，vh 是网页视口高度的百分之一。
    *[屏幕高度/宽度]：window.screen.hieght/width
    *[网页视口高度/宽度]：window.innerHieght/innerWidth
    *[body 高度/宽度]：document.body.clientHieght/clientWidth
    在这里插入图片描述
    如图：667是屏幕高度，553是网页视口高度。

出处：https://coding.imooc.com/learn/list/400.html

丶清风不问烟雨
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML CSS 知识点总结
weixin_61000863的博客
06-23 913
html css基础知识总结
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
移动WEB开发之-REM（rem）布局
m0_60237095的博客
03-21 3816
目录 移动WEB开发之REM布局 rem基础 rem单位 媒体查询 什么是媒体查询 媒体查询语法规范 1.mediatype 查询类型 2.关键字 3.媒体特性 4.媒体查询书写规则 less 基础 维护css弊端 Less 介绍 Less 嵌套 Less 运算 rem适配⽅案 rem实际开发适配⽅案 总结： 苏宁⾸⻚ 1、 技术选型 2、搭建⽂件结构 3、设置视⼝标签以及引⼊初始化样式 4、设置公共common.less⽂件 移动WEB开发之REM布局
CSS - 浮动元素的margin-left和margin-right
程序员阿甘的博客
07-12 1万+
marigin-left和margin-right理解 margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动。 margin-right："盒子"元素的右外边距，当属性值增大，元素表现为向左移动，该属性值减少，元素表现为向右移动。 float:left和float:right理解 float:left 元素变为浮动元素，并向左浮动 float:right 元素变为浮动元素，并向右浮动 单纯的float:left 当前有如下情况.
弹性盒子(display:flex)详解
m0_68845148的博客
11-09 4959
在css中我们使用display大多都是用来转换元素类型的，这种方法在我们实现页面布局中大部分地方都很好用，但难免还是会有一定的局限性，那么弹性盒子就有可能帮助我们更好的去进行批量改变子元素的布局。
详细介绍 弹性盒子(display:flex)
qq_43532275的博客
09-05 2009
一篇文章让你搞明白弹性盒子的属性，详细介绍 弹性盒子(display:flex)属性
html+css知识点总结
06-24
html+css知识点总结
html和css知识点总结.docx
04-03
HTML 和 CSS 是构建网页的基本语言，它们在...这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
HTML、CSS知识点总结
10-20
html、css知识点，归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正，共同进步！
ＣＳＳ知识点总结（脑图）
12-05
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加...于是CSS便诞生了。
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
display-flex详解
~★sunshine☆的博客专栏
04-16 9万+
https://blog.csdn.net/dxnn520/article/details/79342637display flex是什么？微信小程序最近火的不要不要的，下载开发工具测试了一下，小程序对css支持很好， 布局使用display flex布局火力强大，不太了解或者对flex布局比较生疏的童靴分享一下display flex部分知识display flex是将对象作为弹性伸缩盒显示。（...
Web前端-移动web开发_rem布局
apple_73204060的博客
02-08 1753
媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询媒体查询主要用于页面的响应式设计Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器。
移动端页面开发适配 rem布局原理
风中追风
03-19 4640
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 2356
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
flex布局（display:flex详解，容器的属性详解（主轴排列方式和对齐方式、换行、副轴和多根副轴对齐方向）、子元素属性详解（排列顺序、压缩放大计算方式、独立对齐、margin改变））
AIWWY的博客
05-27 1万+
目录 flex布局介绍 display:flex 与display:inline-flex区别 容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 子元素（flex item）属性 order flex-grow flex-shrink flex-basis flex align-self margin flex布局介绍 flex布局是flexible..
Rem布局
ZWTLF的博客
03-08 1791
Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单的说一下rem布局的优缺点： 优点：在不同的设备下看起来比较协调，内容会随着设备屏幕的大小进行等比缩放。 缺点: 随着屏幕的变大或缩小不会展现更多的内容。 它的优缺点小编就说的...
超简单 display:flex教学
前端小知识
06-25 1887
row：横向从左到右排列（左对齐），默认的排列方式。类似左浮动。row - reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。类似右浮动。column：纵向排列。column - reverse：反转纵向排列，从后往前排，最后一项排上。
rem布局的原理
qq_43036190的博客
02-09 2305
rem的布局原理 一、什么是rem？ rem是css的一个相对单位，他是相对于html的根元素 例如：html{font-size:16px;} p{font-size:1rem;} 那么段落的字体大小为16像素 二、怎么根据屏的大小做到自适应的？ 自适应的原理： *可以通过检测屏幕大小改变html的字体大小，从而实现自适应的大小效果* 获取设备宽度与设计搞的宽度的设计比例，作为html font...
HTML、CSS和JavaScript知识点总结
HTML CSS JavaScript知识点总结 HTML是用来定义和描述网页内容的一种标记语言。它是网页的基础，主要用于结构化网页内容，包括文字、图片、视频等。HTML标签有一定的规范，但不区分大小写，建议使用小写字母。 CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值