AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML & CSS

2022-11-23 77
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML & CSS

一、块级标签与行内标签


块级标签(元素)


h1 - h6
p
div
ul
ol
li
...


行内标签(元素)


a
strong
b
em
i
del
s
ins
u
span
...


块级标签与行内标签的区别与联系


① 一般来说，块级标签显示效果独占一行，行内元素不独占一行。


② 块级标签高度、宽度、内外边距…都是可以设置的，行内标签高度宽度…设置都是无效的，行内标签设置左右外边距有效，内边距有效，上下边距无效。

这是比较重要的一点，如果不注意这一点，在日常写代码的过程中，出现了设置行内标签样式这一错误，怎么找也找不出来。


③ 块级标签默认的宽度就是和父标签一样，行内标签默认宽度就是和本身内容相关，如果没有内容，宽度就是 0 了。


④ 块级标签的内部可以容纳其他块级标签和行内标签，行内标签的内部只能包含行内标签，不能包含块级标签。


展示1


<!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>demo11</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .child {
            /* 不写 width, 默认和父标签一样宽 */
            /* 但是不写 height, 默认为 0 (看不到了) */ 
            height: 200px; 
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            child1
        </div>
        <div class="child">
            child2
        </div>
    </div>
</body>
</html>


类选择器是 .clild，这对应的标签是 div ，也就是块级标签，所以显示结果是独占一行的。


展示结果：


3406ce41d25243a4af2e90ec06208520.png


展示2


<!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>demo12</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .child {
            height:200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">
            child1
        </span>
        <span class="child">
            child2
        </span>
    </div>
</body>
</html>


我们将 div 换成 span，结果显示不独占一行，这是连在一起的。

此外，在我们为 “span” 标签设置高度样式为 200px 的时候，我们发现，这并不起作用，原因就是 “span” 属于行内标签，无法设置高度样式，它的目的只是显示内容，但字体大小可以显自由设置。


展示结果：


f4883f5f25964f5c9cc27ac2ead6e2bf.png


display 属性的用法


display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素


将行内标签转换成块级标签是比较常用的，因为许多块级标签可以设置的样式，在行内标签中是不可以设置的。


展示3


<!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>demo13</title>
    <style>
        a {
            display: block;
            width: 300px;
            height: 100px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
    <a href="#">链接4</a>
</body>
</html>


展示结果：


81fde2fa6b334ea2add9b867b644e6b4.png


二、盒模型


盒模型的效果图：


14d1d906af9d4b00827b4728427b8ceb.png


1. border 边框


展示1


border-width:  边框宽度
border-style:  边框样式
border-color:  边框颜色


<!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>demo1</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;
            border-width: 10px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
<body>
    <div>welcome to the world</div>
</body>
</html>


展示结果：


f741f3f0aa16420bb335a43b2a7222d2.png


展示2


在展示1 中，div 标签的实际内容大小应为 400x200，但实际上，由于添加了边框，显示结果为 420x220. 这其实就是因为边框撑大盒子的缘故，如果需要取消这一现象，就可以使用如下代码：


* {
    box-sizing: border-box;
}


展示结果：


f2eccda1d2974940803e519f8ca87091.png


展示3


另外，代码也可以使用如下形式，对于上下左右四个边框也能采取不同的格式与尺寸，这些都可以参照 CSS参考手册，进一步设置。


border: 10px solid green;


border-top: 10px double green;
border-right: 10px double yellow;
border-bottom: 10px solid red;
border-left: 10px solid blue;


2. padding 内边距


展示1


<!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>demo2</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            background-color: aquamarine;
            padding: 10px;
    </style>
</head>
<body>
    <div>welcome to the world</div>
</body>
</html>


展示结果：


b7ad359e084d42e1af0b2b19d91bf886.png


注意


① 在上面的展示结果中，我们发现直接使用内边距也会使得盒子撑大，此处的解决办法依然和解决 border边框的方式相同。


② padding 也可以使用如下写法，四个参数值的顺序是：上右下左 ( 顺时针 )，这个在 Chrome 浏览器中，当然也能够看到。


padding: 10px 15px 20px 25px;


2731ef8f3be24e2f8e0c0d456f9b8a2a.png


3. margin 外边距


<!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>demo3</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div>welcome to the world</div>
    <div>hello world</div>
</body>
</html>


将外边距的底部设置为 50px，就可以实现两个标签之间的间隔效果，这个下面展示中体现了出来，当然，左右之间也能设置间隔。


展示结果：


29db8a60d97f4f769221979432a612a5.png


注意


① 直接设置外边距的时候，没有类似于 border、padding 那样的撑大盒子的效果。

② 外边距和内边距的写法是一样的，也可以将上下左右的宽度设置为不同的值。


margin: 10px 20px 30px 40px;


4. 块级标签水平居中


可以对于某个块级标签使用如下代码，使得整个标签水平居中。


margin-left: auto;
margin-right: auto;


展示


<!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>demo4</title>
    <style>
        .parent {
            width: 400px;
            height: 200px;
            background-color: gray;
        }
        .child {
            width: 100px;
            height: 50px;
            background-color:aquamarine;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            hello world
        </div>
    </div>
</body>
</html>


展示结果：


6f3ef7c0d5e84547bb72ea58e6282178.png


注意


① 在上面使用代码的时候，将 margin-left 和 margin-right 设为 auto，即自动的意思，那么浏览器就会自动设置为水平居中的方式。但当我们将 margin-top 和 margin-bottom 设为 auto 的时候，结果却不会变成垂直居中。


② 这种 margin 设置的方式，是使得标签居中，我们需要将此方式与 text-align 和 line-height 区别开来，后者是文本的水平居中和文本的垂直居中。


5. 去除浏览器默认样式


在我们日常直接为某个标签设置样式的时候，这些样式是存在于 CSS 代码中的，但最终将代码展示在浏览器上，浏览器为了美观，也会自动设置一些样式，如下图所示：


展示结果：


76d454c9a88d4869b1e16bebe2fce3b2.png


用法


下面代码是一个较为典型的去除浏览器样式的方法，直接使用通配符，将所有的标签都去除这种默认样式。


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


展示结果：


02b0f190f4ed477198e2908c71e109b3.png


注意：


这种通配符的方式并不会一刀切。也就是说，这种通配符的去除浏览器默认样式的方式，并不会影响我们自己写的代码中运用到相关的属性。


这其实是和 CSS 设置样式的覆盖和叠加有关：


多个选择器选中了一个元素，
若尝试给这个元素设置不同的样式，此时这些样式可能会叠加，最终呈现多种效果。
若尝试给这个元素设置相同的样式，此时这些样式就可能会覆盖，最终只呈现一种效果。



<!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>demo5</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color:aquamarine;
            margin: 10px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>


展示结果：


95513ebc106a4cf2b8490ab66745177f.png


三、弹性布局


为什么要进行弹性布局


前端在进行网页布局的时候，本质上就是先一行一行的布局，然后再一列一列的布局。而块级元素就是一行一行排列的。因此，重点就是要解决一行之内的列之间的布局，接着就能解决多行的多列布局，从而就能将网页布局做好了。


弹性布局的使用


弹性布局的大前提是将 display 属性设置为 flex，而 flex 是 flexible box 的缩写，意为 “弹性盒子”。任何一个 html 标签，都可以指定为 【 display: flex 】来完成弹性布局。


在将 display 设置成 flex 后，就会破坏原有的块级标签和行内标签的规则，也就是说，任何一个 html 标签，都有被弹性布局的资格。


而大前提设置好后，又有两个常用属性：justify-content 和 align-items


justify-content:   设置主轴上的子标签的排列方式 (水平)
align-items:     设置侧轴上的子标签排列方式 (垂直)


1. justify-content 属性


796fd1fa4eb54135a80197d06d9a943b.png


<!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>demo6</title>
    <style>
        .aaa {
            width: 600px;
            height: 200px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
        }
        .child {
            width: 90px;
            height: 40px;
            background-color: aquamarine;
        }
        .bbb {
            width: 600px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="aaa">
        <div class="child">
            卡布达
        </div>
        <div class="child">
            卡布达巨人
        </div>
        <div class="child">
            车轮滚滚
        </div>
    </div>
    <div class="bbb">金龟次郎</div>
</body>
</html>


注意


如果我们需要将 .aaa 类的子标签进行弹性布局设置，必须在 .aaa 这个父级元素的选择器进行设置 【 display: flex; 】，而不是对其子类 .child 进行设置，这个和 margin 设置不同。


之后将水平布局设置为 space-around，此效果就是让标签之间产生了平均间隔的水平效果，还是较为美观的。至于其他的效果，小伙伴可以自己试一下。


展示结果：


1cb34f5e5eee4a1687da824dac20638a.png


2. align-items 属性


3ba635d71ab84ebd83cb75d1ad44fc0e.png


<!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>demo7</title>
    <style>
        .aaa {
            width: 600px;
            height: 200px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .child {
            width: 90px;
            height: 40px;
            background-color: aquamarine;
        }
        .bbb {
            width: 600px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="aaa">
        <span class="child">
            卡布达
        </span>
        <span class="child">
            卡布达巨人
        </span>
        <span class="child">
            车轮滚滚
        </span>
    </div>
    <div class="bbb">金龟次郎</div>
</body>
</html>


展示结果：


457ab6dab08c4b94adb5dd424d94a135.png


注意


① 将 align-items 属性设置为 center，这是常用的，也是较为推荐的垂直居中的办法。此外，align-items 和 jutify-content 这两个属性可以叠在一起用，可以产生很多不同的效果，小伙伴可以自己试一下。


② 在上面的代码中，我将 div 的子标签改为了 span 标签，可以看到，弹性布局，无关于块级标签或行内标签。


总结


CSS基础 到这里就结束了，总体来说，CSS 代码还是很多的。将 CSS代码 拆解开来，或许很简单，但一旦将 CSS代码组合起来，就比较难了，因为很多需要自己动手一遍遍的实践，否则就理解不了，更别提记住了。


文章标签：
前端开发
Web App开发
关键词：
CSS html
HTML CSS
十七ing
目录
相关文章
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
85 1
东方睿赢
|
23天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
46 7
土木林森
|
23天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
31 6
龙大吉
|
23天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
35 5
土木林森
|
23天前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
27 5
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
46 1
[HTML、CSS]细节与使用经验
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
34 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
302 65
LALA
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
58 12
温轻舟
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
124 1

热门文章

最新文章

  • 1
    MDN Web技术文档 - HTML 元素
  • 2
    HTML5 &lt;script&gt;元素async,defer异步加载
  • 3
    jQuery从html代码中获取对应标签的写法
  • 4
    vs 2010 支持 html5
  • 5
    uni-app(移动端) 修改(动态修改)根节点html的样式
  • 6
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 7
    初识HTML
  • 8
    wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
  • 9
    关于html5--localStorage 储存json
  • 10
    谈谈HtmlControl与WebControl的区别与用途
  • 1
    css结构伪类
    63
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    86
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    68
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    138
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    56
  • 7
    CSS外边距重叠：原理、结果
    53
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    64
  • 9
    CSS常见用法 以及JS基础语法
    69
  • 10
    css设置内嵌样式阴影
    71

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    DataWorks