有编程基础_快速入门网页编写

最新推荐文章于 2023-09-07 10:30:00 发布

梁京昊

最新推荐文章于 2023-09-07 10:30:00 发布

阅读量641

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/YoungandMenace/article/details/107943545

版权

有编程基础_快速入门网页编写

关于网页编写的一些基本知识
HTML
- HTML tag
- 布局：行内元素，块元素和行内块元素
CSS

有些初入门的编程学生们在学了某种编程语言，比如C之后，就会想要快速的入门其他语言，但又不想跟着教程从怎么学打"Hello World"开始，所以我在学HTML的时候就顺手写一些笔记，方便有编程基础的人快速入门了解HTML，希望读者能在二十分钟内了解到网页编写的基本东西。

*注意：本文所有内容为博主自行了解的东西，语法、术语并不完全准确，请抱着疑问的心态看文章，而且这本来是我的笔记，所以比较言简意赅，可能需要停下来思考一下是不是真的懂了再继续。有任何出错的地方，请在评论中指出，谢谢。

我跟着B站视频学的，https://www.bilibili.com/video/BV14J4114768?p=1，说的很好非常细，但是有点啰嗦。
也可以看W3C哦，基本上把它介绍的东西都看一遍就会了，http://www.w3school.com.cn/.

关于网页编写的一些基本知识

大家看网页代码的时候可能有些迷惑，网页跟LaTeX不同，可能由多于一个档案编译而成的，编译器是大家常用的浏览器。现在只要满足基本的格式，就可以被几个大众使用的浏览器所编译。最基本的网站包含三种档案，HTML、CSS和JavaScript:
HTML负责网页的内容、框架；
CSS负责网页的美工、排版；
JavaScript负责网页某些动作、交互等等；
通常写一个简简单单的、就像LaTeX、Markdown差不多的网页，使用HTML就足够了

我分享笔记的目的是让大家在打开一个网页的代码的时候能够读懂，具体去提升代码能力的话可以随便打开一个网页的代码去观摩，从简朴到美轮美奂，什么时候你看到一个网页的布局想象不出来它的代码的话就点进去看一下，最后当然是试着自己去写一个自己的网页。

HTML

HTML, Hyper Text Markup Language，超文本标记语言。我本来以为它跟C++，Python这些编程语言差不多，但其实它主要负责页面的信息、结构，不管其他花里胡哨的东西，所以跟LaTeX这样的排版标记语言更像(当然你愿意的话可以用HTML码报告)

我之前没用过Markdown，但是在写博客的时候发现HTML和Markdown非常相似，会用Markdown的朋友基本上就会用HTML了
HTML非常方便，不需要安装任何编译器，因为任何浏览器都是HTML的编译器。按照HTML的基本规则写出来的代码在每个浏览器上效果都是差不多的

编写HTML代码推荐使用VSCode，美观方便。VSCode编写HTML推荐以下两个插件，好不好因人而异，其实开个记事本也没差

Auto Rename Tag (在改某个paired tag中的某一个tag时，可以一并改掉它对应的tag)
open in browser (可以直接在VSCode的代码编辑页面打开网页)

在VSCode新开一个HTML档案(.html)，只要打一个!(当然是英文感叹号字符)，然后会弹出提示，选第一个Emmet Abbreviation，感叹号就会变成一段网页的基本构造代码：

<!DOCTYPE html>     <!--定义文件类型-->
<html lang="en">    <!--html的属性：网页语言，这跟网页里面到底是啥语言没有太大关系，中文网页也可能会出现英文，主要是为了翻译和搜索引擎用的-->
<head>              <!--head主要设定一下网页的基本格式啥的，只有title需要改，其他照抄就好-->
    <meta charset="UTF-8">  <!--档案字符编码方式，通常选"UTF-8"就行-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的名称</title>  <!--会在你浏览器页面上方显示本网页的名称，比如百度的"百度一下，你就知道"-->
</head>
<body>
    网页的内容
</body>
</html>

相信你们也看出来了 是注释tag

HTML tag

HTML的重点就是怎么使用tag去做一些排版和属性的操作
Paired tag 是前后一对出现的tag，类似于LaTeX里的begin{ } 和 end{ }，用于一些在一段范围内生效的效果，比如标题、段落、超链接等。格式为<tag>content</tag>
Single tag 是单独出现的tag，作用于某一个位置，而已，比如断行、放入一张图片等等。格式为<tag />
Tag可以包含很多属性，如果想使用default的属性直接不写就可以了。格式为<tag att1=“abc” att2=“bcd”>

简单列几个经常会用到的tag
标题tag: <h1></h1>, <h2></h2> … <h6></h6> 数字越小标题越大
断行tag: <br />, HTML里的文本是不会自动断行的，因为它不会数空格和断行符，所以需要手动断行和分段
段落tag: <p></p>
粗体、斜体、删除线、下划线: <strong></strong>, <em></em>, <del></del>, <ins></ins>

插入图片tag: <img src=“路径/网址” />
img里src是必须要写的属性，表示图片的路径(通常是指你服务器里的文件档案路径)/网址(如果你把图片放到你的网站上的某个网页的话)。
还有几个好玩的属性，比如width, height, border, alt(当图片显示不了、路径有错时，直接显示在网页上的broken image文字), title(当鼠标悬停在图片的时候出现的caption)

超链接tag: <a href=“网址”></a>
超链接里的href属性也是必须的，表示链接的网址。如果是外部网站，链接就是平时在浏览器输入的网址。
如果是同一个网站上的网页的话，按照我的理解，一整个网站就相当于一个服务器，一个文件夹，所以要去同网站的网页(内部链接)的话，链接就是路径(网站名后面的那堆斜杠)。
例如，http://www.网站名/路径1/路径2/路径3/网页.html，那链接就是：路径1/路径2/路径3/网页.html
超链接还有个属性：target，即超链接在哪里打开。default属性是"_self"，即在本来的页面直接打开；如果想要开一个新的页面然后打开，target="_blank"
熟系百度和谷歌两个搜索引擎的朋友可能知道，百度用的是"_blank"，谷歌用的是"_self"
超链接不一定只链接网页(html)，也可以链接服务器里的某个zip或某个文件(下载链接)，或者纯粹一个"#"(空链接)。

HTML里还有一个经常会用到的技巧，就是锚点链接，可以用来实现返回顶部、跳转到某个部分(可以开百度百科感受一下哦)，这需要一个叫做id的属性。
在跳转的目的地附近找一个tag，里面加上一个id属性，id = “自定义”，然后超链接下的href = “#自定义”，id前加个#符号就可以了。

在HTML里还有表格，但是我就不细说了。HTML能做到的表格样式很有限，一般需要搭配CSS对表格进行美化。表格的基本形式是

<table>                                             <!--表格的标签-->
    <tr>                                            <!--表格的每一行都要用tr(table row)标签，嵌套在table标签里-->
        <th> </th>    <th> </th>    <th> </th>      <!--表格的每一个单元格要用td或th标签，嵌套在tr(行)标签里面-->
    </tr>                                           <!--如果是行首(表示种类，需要加粗)使用th标签，普通单元格使用td标签-->
    <tr>
        <td> </td>    <td> </td>    <td> </td>
    </tr>
    <tr>
        <td> </td>    <td> </td>    <td> </td>
    </tr>
</table>

当然啦，每一格都要打标签很烦的，你可以试用一下table generator哦 https://www.tablesgenerator.com/html_tables

再来看看列表/清单list，这跟表格的思路挺像的，而且同样需要CSS美化。

<ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>

list可以是无序的(unordered list)，就是列举一些并列关系的元素，在开头和结尾需要用<ul></ul>标签；
或者是有序的(ordered list)，有逻辑关系或先后顺序的，在开头和结尾不用<ul></ul>标签，而是换成<ol></ol>标签

最后简单的介绍一下输入，需要使用的是<form></form>和<input>单标签，
我们要求用户在网页输入的场景通常是登录、发推文或者是问卷，需要把用户的输入送到后台处理，所以HTML里有form表单这个结构。
在表单域前后加上<form></form>标签，我们就可以在表单域里要求用户输入。至于服务器怎么处理输入，这部分比较难，就先不说了。(这部分有点难，还没学)
在<form></form>里面会使用<input>，它有一个很好用的属性"type"，可以非常轻松的设计各种输入：
第一个是文本输入，属性是<input type=“text”>，效果就是一个文本框，可以点击然后打字的那种。
第二个是密码输入，属性是<input type=“password”>，效果跟文本输入差不多，但是会用 * 表示输入了的字符。
第三个是单选选项，属性是<input type=“radio” name=“项目”>，这里需要另外一个属性"name"，这主要是为了把用户的选择返回给后台，关于这个细节我就不赘述了。详细的效果是选择旁边有个圈，点了中间有黑点的那种。格式是这样的：

项目： 选项1 <input type="radio" name="项目">  选项2 <input type="radio" name="项目">   选项3 <input type="radio" name="项目">

第四个是多选选项，属性是<input type=“checkbox” name=“项目”>，同样也需要name属性，效果是选择旁边有个正方形，点了会打勾的那种。格式是：

项目： 选项1 <input type="checkbox" name="项目">   选项2 <input type="checkbox" name="项目">   选项3 <input type="checkbox" name="项目">

第五个是下拉表单，不用<input>标签了，使用<select><option></option></select>这两组标签，思路跟list差不多。格式：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

第六个是文本域，当你需要用户输入多段大量文字的时候使用，比如评论、博客等，标签是<textarea></textarea>，页面会显示一个文本框可以打字。
最后是提交按钮，只要打上<input type=“submit” value=“按钮文字”>这个标签，就会显示一个提交的按钮了。然后在前面的<form>标签里设置属性，搭配js，设计下一步的操作。

上述的tag基本够用了，其他的tag就不一一赘述。我这里无耻的转载了邵励治的知乎帖子 “HTML 到底有多少标签(HTML tag)？”，里面简明扼要的介绍了每个tag的作用。
https://zhuanlan.zhihu.com/p/81132589 若有侵权行为，请联系我，我会删改内容的。

HTML插入特殊字符的方式跟LaTeX差不多，但是相比起来简单一点，直接把字符代码打一下就好了，前后不需要加东西。
我这里无耻的转载了脚本之家里的网页 “HTML特殊字符编码对照表”，在插入字符的时候可以去查一查。
https://www.jb51.net/onlineread/htmlchar.htm 若有侵权行为，请联系我，我会删改内容的。

布局：行内元素，块元素和行内块元素

有些做过微信公众号文章的朋友知道，文章的布局思路是一块接着一块的：先把网页切开一块块水平。网页的布局也一样，需要把页面划分成一个一个不同比例的方块。
这样做的好处是什么呢？网页想要好看，不是只有一段一段的文字的话，那么就需要我们把它们有序整齐的放在不同的区域，再配上不同的颜色和其他效果，而且不能是东一块西一块的乱放，需要水平对准或者垂直对准
网页的布局需要用HTML完成，HTML里的所有标签可以分为行内元素，块元素和行内块元素。

块元素，block，是指独占整行的元素，即它上下左右邻近的元素不会和它出现在同一行里，
<h1></h1>、<p></p>、<ul></ul>、<ol></ol>、<li></li>、<div></div>(div我们待会再讲) 都是块元素。
块元素默认的宽度是100%，高度是内容的高度，但是可以在CSS里修改宽度高度

行内元素，inline，就是不会独占整行的元素啦，邻近的元素可能会跟它出现在同一行里，
<a>、<span></span>(span我们也是待会再讲) 是行内元素。
行内元素是不可以修改宽度高度的，它们的宽度高度就是内容的大小，比如你放一个链接，它的大小是定了的。其实也是可以修改的，但是那是CSS范畴的东西了，我们在CSS里讲(主要就是元素模式强制转换一下)。

行内块元素，inline-block，它们是可以修改宽度高度的行内元素，但是行内元素与行内元素之间是没有空隙的，而行内块元素之间是有一格空白间隙。
<input>、<img>、<td>、<th>是行内元素，显而易见，一个图像或者表格肯定是可以改变高度宽度的。

为什么要这样区分呢，我们在CSS里修改样式后会看的更清楚，现在先有这个概念就好。

再说说块元素<div>…</div>，它的用处是设立宽度高度自由(但是会占着一整行)的区块(盒子)，里面几乎想放啥都可以，区块长度取决于div里内容的多少
而行内元素<span>…</span> <span>…</span>呢，它们也是盒子，但是会被并排放在同一行里，通常是几个span连在一起，不可更改宽度高度(但是你可以通过改变span的内容来改变它的大小)。
这两个元素在布局里进场用到，比如你可能想要把不同的元素塞进一个格子里，或者把不同的东西并列摆放。

还有一些东西是需要记住的：

文本块元素(p/li/h1-h6)只能容纳文本
div容器内能容纳大部分标签
行内元素只能容纳文本或者其他行内元素
<a>超链接不可容纳另一个超链接

阿巴阿巴阿巴…这些布局规则比较抽象深奥，我解释的可能不太清楚，可以看看W3C是怎么介绍的。
这三种元素的理论规则需要死记硬背，不一定能了解，但是当你着手去设计一个网页的时候，你就会明白了。比如，打开天猫超市的网站，试着模仿一下。

到这里HTML的部分就完结了，我用了大概一百行介绍了HTML，一方面是我省略了一下，另一方面也是因为HTML真就非常的简单。HTML足够实现资讯式网页的大部分功能，但是有些美观和花里胡哨的东西就需要CSS和js了。

CSS

CSS，Cascading Style Sheets，层叠样式表，听起来非常的高大上，其实我也不知道是什么意思，估计是说把不同的样式叠在一起形成某个效果吧。CSS的作用是对HTML的元素进行色彩、风格等设定。
CSS的原理是对HTML的某些标签添加样式属性，这听着是不是有点耳熟。HTML的标签本来就可以加属性啊，直接写在标签里面的那种。
其实是差不多的，但是CSS能做到一些HTML的标签属性做不到的事情，或者换一种说法，我们把HTML里某些"花里胡哨"的属性归类到CSS里面了。

CSS有三种形式，分别是嵌入式、行列式和链接式。
内部样式表(嵌入式)是把所有需要的CSS样式写在HTML的<head></head>里面
行内样式表(行列式)是使用style属性把CSS直接写在HTML的标签属性里面，跟一般的HTML属性格式无异
外部样式表(链接式)是把CSS单独写在一个文件(.css)里面，然后在HTML里引用css文件
嵌入式比较常见，所以我们只学嵌入式。

CSS 嵌入式代码格式

CSS相比HTML来说要复杂一点，代码风格偏向于C(只是说看起来想C，内容完全是两回事)

标注的格式：/* comment */
代码块时会用到 { }
在每一个语句后加上;
最好有缩进[Tab]
C"赋值"用等号=，CSS"赋值"用冒号:

嵌入式CSS需要把所有CSS代码写在双标签<style>…</style>里面，然后把这段代码放在HTML档案的<head></head>里面。
在<style></style>里，我们对每个需要修改的HTML标签写一段代码。格式是

<head><style>
    selector1 {
        att1: "abc";
        att2: "bcd";
    }


    selector2 {
        att3: "cde";
    }

</style></head>

在上面的代码里，选择器selector是一个CSS里的概念，指那些我们需要改属性的tag
选择器有很多种，可以改的对象也不仅仅是tag，下面会在介绍一下
至于选择器后面大括号里的，就是要改的属性啦

CSS选择器

选择器大全可以参考 https://www.w3school.com.cn/cssref/css_selectors.asp

我们挑一些常用的介绍一下

标签选择器 = HTML 标签名称，
然后在HTML档案里所有的这个标签都会有CSS更改的属性。格式：

<head><style>
    tagname {
        att1: "abc";
    }
</style></head>

类选择器 = “.” + 类class，
使用这个我们可以使不同tagname标签的同一个class标签拥有CSS更改的属性。格式：

<head><style>
    .ans {                      /* 在类的名称前面加上"." */
        color: red;
    }
</style></head>
<body>
    <h1> A </h1>
    <h1 class="ans"> B </h1>    /* 注意：标签属性用的是等号=，CSS样式用的是冒号:，别搞混了 */
    <h2> C </h2>
    <h2 class="ans"> D </h2>
</body>

在上面的例子里，AB是h1 tag，CD是h2 tag，那么请问哪两个是红色的呢？就是拥有class="ans"属性的两个，BD。
一个标签可以有多于一个类，都写在class属性里就行了，<tag class=“class1 class2”>
再多嘴一句，class的名称是随意的，但是最好符合代码命名规范，起一些不会有冲突的名字，无数字、有意义、不用关键字、阿巴阿巴阿巴…

id选择器 = “#” + id，
id选择器跟类选择器相差不大，但是id选择器只适用于单个标签，其他标签理论上不予使用，因为id是独特的，跟你的身份证号是一样的概念。格式：

<head><style>
    #ans {                      /* 在类的名称前面加上"#"  */
        color: red;
    }
</style></head>
<body>
    <h1> A </h1>
    <h1 id="ans"> B </h1>
    <h2> C </h2>
</body>

上面的例子里，只有B是红色的。

通配符选择器 = “*”
通配符选择器适用于HTML档案里所有的标签，就是全选。格式：

<head><style>
    * {                      /* 在类的名称前面加上"#"  */
        color: red;
    }
</style></head>
<body>
    <h1> A </h1>
    <h1> B </h1>
    <h2> C </h2>
</body>

上面例子中ABC都是红色的。
注意：上述选择器针对文本的样式修改对超链接没有作用，超链接样式修改需要单独对a标签进行修改。

后代选择器 = 父元素 + " " + 子元素
后代选择器用于嵌套在某个特定父标签里的子标签，不作用于不在嵌套范围内的子标签。格式：

<head><style>
    div p {
        color: red;
    }
</style></head>
<body>
    <p> A </p>
    <div> <p> B </p> </div>
    <span> <p> C </p> </span>    <span> <p> D </p> </span>
</body>

上面例子中只有内容为B的p标签是嵌套在div里的，其他p不受影响，所以只有B是红色的。
后代选择器会找到在父元素里所有的子元素，而且可以用于多层嵌套，比如 div span p a 是没问题的，只有符合嵌套条件的a会有样式，而且 div span p a = div a 效果也是一样的。
而且，选择器中的"路径"不一定全是标签名，也可以是前面说过的类、id等，灵活使用。

子选择器 = 父元素>子元素
子选择器跟后代选择器作用相同，不过它只能用于单层嵌套，不像后代选择器那样可以用于多层嵌套。作用于"直接后代"，不作用于隔代的后代，不过在父元素和子元素中间加个">"。格式：

<head><style>
    div>p {
        color: red;
    }
</style></head>
<body>
    <p> A </p>
    <div>
        <p> B </p>
        <span> <p> C </p> </span>    <span> <p> D </p> </span>
    </div>
</body>

例子中只有内容为B的p标签是div的"直接后代"，所以只有B是红色的。

并列选择器 = 选择器1, 选择器2, … , 选择器final
并列选择器会把某几个选择器一并修改样式。格式

<head><style>
    div, span {
        color: red;
    }
</style></head>
<body>
    <p> A </p>
    <div> B </div>
    <span> C </span>    <span> D </span>
</body>

例子中BCD都是红色的。

链接伪类选择器 = a:visited & a:hover
伪类选择器pseudo-classes，用来对某些元素进行特殊效果。伪类选择器需要用在元素和有效果的动作之间加上冒号:
比如链接伪类选择器，对于点击链接前后链接的颜色、变化进行设定，比如点击过的链接会变色、鼠标浮停在链接上会变色之类的效果。格式：

<head><style>
    a {                             /* 先对a进行预先设定 */
        text-decoration: none;      /* 删除超链接的下划线 */
        color: red;                 /* 未点击的超链接是红色的 */
    }

    a:visited {                     /* 点击过的链接会变黄色 */
        color: yellow;
    }
    
    a:hover {                       /* 当鼠标悬停在链接上会变黑色 */
        color: black;
    }
</style></head>

链接伪类选择器还有其他的动作效果，这里只列出两个常用的。

CSS 文本属性

先说一些属性值的规范。当属性值多于一个英文单词或者一个中文字的话，需要用引号括起来，例如"微软雅黑"、"Times New Roman"等等
一个属性可能会有多于一个属性值，比如字体的话可以同时设置中文字体、英文字体等等，属性值之间需要用逗号隔开，比如font-family: “微软雅黑”, “Times New Roman”;

font-family: Arial/“Times New Roman” 字体
font-size: 12px 字号大小
line-height: 16px 行高(字号+行间距)
font-weight: 400/normal/700/bold 粗体
font-style: normal/italic 斜体

font: font-style font-weight font-size/line-height font-family 复合简略写法
e.g. font: italic 400 14px/20px Arial

color: red/#ff0000/rgb(255, 0, 0) 文本颜色
text-align: center/left/right 文本对齐
text-decoration: none(可用于删除超链接的下划线)/underline/overline/line-through 文本装饰
text-indent: 10px/2em 段落缩进

布局

在之前HTML的部分里，我们学到过<span></span>和<div></div>，也接触了盒子这个概念。我们说过，布局其实就是把内容装进一个又一个的盒子，然后再把这些盒子美观包装，通过不同的方式放到网页的不同区域上就好。

需要注意的是，盒子包括但不限于span和div，大部分的标签都可以当作盒子使用，只不过使用它们是为了某些特殊的用途，但是其实可以呈现和盒子一样的效果。
比如p/h1这类的标题标签，用途当然是为了装标题，但它同时也是一个盒子，也具备盒子的功能。

以下是针对盒子样式的标签，可以设置尺寸、背景、外框、边距等

height: 100px/500px 高度
width: 100px/500px 宽度
background-color: red/rgba(0, 255, 0, 0.2) 背景颜色，使用rgba的话最后一个是透明度alpha

background-image: url(path) 背景图片，url()必须写，_path为图片在服务器内的路径或者外部网站的图片链接
background-repeat: no-repeat 是否让背景图片重复平铺整个盒子
background-position: 0px 20px/left top/right bottom 背景图片在盒子里的坐标，第一个参数为图片左边线距离左边框的距离，第二个是图片距离上边框的距离。
background-attachment: fixed 背景图片不随着页面滚动

简写方法：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图像位置
上述五个属性除了可以给盒子div/span之外，也可以直接作为body的样式，成为页面的背景。

border-width: 2px/6px 边框宽度
border-style: solid/dotted/dashed 边框样式
border-color: red/blue 边框颜色
简写方法：border: 宽度样色颜色
而且，border是一次性写了四条边的样式，也可以每一条边都可以用简写的方式分开写它的样式，比如
border-top: 2px dashed green;
border-bottom: none;
border-left: 6px dotted blue;
border-right: 4px solid red;
border部分的属性除了可以用于盒子容器外，也可以用于表格
border-radius: 100px/50% 设定圆角，可以让盒子变成圆角矩形，甚至可以变成圆形的盒子

padding: 25px 15px 25px 15px 内边距：上面右面下面左面(顺时针顺序)，内容距离边框的距离

margin: 25px 15px 25px 15px 外边距：上面右面下面左面，边框外的透明范围

总结一下，border, padding, margin的设定格式差不多，border可以设定一些显示的属性。padding和margin的区别是，padding范围的颜色是盒子的颜色，而margin范围的颜色是盒子外的背景颜色。

注意：盒子本身的尺寸，height/width是不包括border, padding和margin的，在设置盒子大小的时候需要非常小心设定这几个值。而且，这几个值非常容易有各种各样的冲突情况，打完代码后必须打开网页打开F12看一下每个盒子效果是否实现。

Border, padding, margin这三个值并不是默认为零的，不信的话你可以随便打一些HTML代码看一下，大部分的盒子元素，包括body, p, h1等等都会有默认非零的margin, border值，而且不同的浏览器编译的时候，这些默认值可能还不一样。
所以，如果我们要做的非常美观，精确到每条边的每个像素值，保证网页不会出错的话，就需要把默认值归零。做法很简单，用通配符选择器就可以了：

* {
  margin: 0;
  padding: 0;
}

介绍完盒子的外观样式后，再说一下排版。在CSS中，我们有三种盒子的排版方式，通过它们我们能做到不同的排版效果：

标准流/文档流
浮动
定位

标准流：CSS 行内元素，块元素和行内块元素的属性与转换

我们之前在HTML的文章里看到过这三种布局元素以及它们的特性。复习一下：
块元素block：独占整行，可自行修改高度和宽度
行内元素inline：不独占整行(可与其他元素并排排列在同一行)，不可修改高度和宽度(由它的内部元素大小决定)
行内块元素inline-block：不独占整行，可自行修改高度和宽度

这三种布局元素是可以相互转换的，即一个行内元素可以"转换"成行内块元素，那么它既保留了本来的用途，也有了行内块元素的特征。转换需要的样式很简单，
display: block/inline/inline-block(想要转换成什么模式)

两个非常常见的转换：
第一个是把<a>从行内元素变成行内块元素，这样可以扩大链接的点击范围，使链接不只是一串文字，而是一个装着文字和图片的框。
第二个是把<span>从行内元素变成行内块元素，这样我们就有行内块元素容器了，即可以并排排列而且自订大小的容器。

转换要根据具体实际需要，每个标签的转换效果可能会有些许不同，需要开点脑洞，而且要记住不同布局元素的性质和规则。

行内块元素好像非常方便，经常会把其他元素转换到行内块元素使用。它既可以与其他元素并列排列，也可以调整大小。但是它有一个缺点，当行内块元素并排排列的时候，它们中间会有个间隙，这并不是margin的问题，而是行内块元素本来的设计就是这样的。当你觉得这个间隙影响你的排版布局的时候，你可能需要其他的排版方式了。。。

浮动

标准流有时候会过于死板，就是先弄一个块元素，再往里面填行内块元素，而且都是向左对齐的。

浮动相对来说比较灵活，它会把目标盒子抽取出来，像ps那样，放到另一个"图层"里，它在本来图层里的空间不会被保留，这个图层的范围是装着它的那个盒子(父盒子)(也可以是body)。

在这个元素后面的、不是浮动的元素会被遮住。注意是遮住后面的，前面的不受影响。

举个例子：

<head><style>
    div {
        background-color: grey;
        width: 400px;
        height: 400px;
    	// div是个块元素，独占一行
    }
    
    .left {
    	float: left;
        background-color: red;
        width: 200px;
        height: 200px;
    }

</style></head>
<body>
	<div>A</div>
	<div class="left">B</div>
	<div>C</div>
    <div class="left">D</div>
</body>

结果是怎么样的呢？

如果B不是float的话，就会是四个垂直放着的盒子，左侧对齐。

如果B是float的话，A盒子不会被盖住(<b>因为它在B的前面</b>)；B会遮盖住C的一部分，就像两个图层一样，C的文本内容会在B的右边线外显示；D不会遮盖住C(因为C在D前面)。

还有一个，如果<strong>浮动盒子的宽度高度 ≥ 标准流的宽度高度</strong>的话，标准流盒子就会被完全覆盖，这不行，所以在这个情况下，<strong>覆盖效果不会发生</strong>。可以通过margin或者透明盒子等方法来避开这些麻烦情况，但是建议一个盒子里要么全是标准要么全是浮动会比较好。

浮动的格式：
float: none/left/right 默认值=none（不浮动），只能选择向左或者向右浮动

那么把浮动的放到"浮动图层"之后呢？

如果是向左浮动，那么盒子的左边线会贴着它左边的元素或者父盒子的左边线。
如果是向右浮动，那么盒子的右边线会贴着它右边的元素或者父盒子的右边线。
当一行内的元素溢出父盒子的宽度时，就另起一行，
每一行的元素顶端对齐
浮动元素具有行内块元素的特点，并排排列，可改大小，但是盒子中间没有间隙，所以如果你想要没有间隙的行内块元素的话，可以使用left float元素。

看起来就是向左对齐和向右对齐，但是其实要更复杂。看个例子，

<head><style>
    div {
        background-color: grey;
        width: 400px;
        height: 400px;
    	float: left;
    }
    
    .right {
    	float: right;
    }

</style></head>
<body>
	<div class>A</div>
	<div class="right">B</div>
	<div class>C</div>
    <div class="right">D</div>
</body>

出来的结果是怎么样的呢？A盒子会贴在最左边，B盒子会贴在最右边，C盒子会贴在A盒子的右边线，D盒子会贴在B盒子的左边，所以效果会是 |AC DB|
希望通过这个例子会让你感受到float是怎么样工作的

float只能管一个盒子里左右的排版，上下的排版还是需要用div使用标准流去完成的。所以，在布局的时候，通常会标准流和浮动一起用。

要开学了，先不打了，定位的部分挺简单的，也不太需要。掌握标准流和定位就足够完成大部分的排版了。

梁京昊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有编程基础_快速入门网页编写

@[有编程基础_快速入门网页编写]有些初入门的编程学生们在学了某种编程语言，比如C之后，就会想要快速的入门其他语言，但又不想跟着教程从怎么学打"Hello World"开始，所以我在学HTML的时候就顺手写一些笔记方便记录一下HTML快速入门需要了解的东西，希望读者能在二十分钟内了解到网页编写的基本东西。*注意：本文所有内容为博主自行了解的东西，语法、术语并不完全准确，请抱着疑问的心态看文章，而且这本来是我的笔记，所以比较言简意赅，可能需要停下来思考一下是不是真的懂了再继续。有任何出错的地方，请在评论
复制链接

扫一扫