Johaden的博客

如下图代码所示，当设置绝对定位时，看到最下方的紫色块消失，这是因为绝对定位不占据文档流，而最下方的紫色块自动上浮到原本绝对定位的绿色快的位置。与绝对定位唯一相同的地方就是固定定位也是脱离了正常文档流，但是不同的是，绝对定位是相对于元素最近的已经定位的父级元素进行定位。如下代码所示，粉红色的box在经过左移（left）60px和下移（top）40px后，上下的两个box均未改变位置，这体现了相对定位的性质，即相对定位的元素不会脱离正常的文档流。·绝对定位：相对于其最近已定位的祖先元素进行定位，不占据文档流。

这是因为两个元素浮动，父元素出现坍塌，若想此时在父元素后面输入文本，它并没有出现在两个盒子下边，而是。是由块级元素和行内元素按照默认规定方式排列，块就占一行，行内元素就是一行放好多个元素。·所以上面的元素是按照标准流的形式排列的，一个父元素，两个字元素。：创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样可使元素进行浮动。·现在多复制几个左浮动元素，发现它像行内块一样，先占满一行，然后拓展到下一行。浮动是相对父元素浮动，只会在父元素的内部移动。（3）具备行内块元素的特性。

若传入10px 0，则表示上下为10px，左右为0（无边框）；若传入10px 0 20px，则代表上为10，下为20，左右无边框；只有两个值的话，没有下左，那么下对应上的值，左对应右的值，以此类推。4.内边距（padding）、外边距（margin）的使用方法与边框类似，padding为文本距离边框的距离，margin为整体距浏览器边框的距离，如。1.盒子模型是CSS中常用于布局的基本概念，是构建网页布局的基础，它描述了文档中的每个元素都可以看作一个盒子。：围绕在边框的外部，是盒子与其他元素的空间。

1.字体属性，如font-family（字体系列）、font-size（字体尺寸）、font-style（字体样式）、font-variant（字体样式）、font-weight（字体粗细）、@font-face（一个规则，允许网站下载并使用其他超过“web-safe”的字体）、font-size-adjust（为元素规定aspect值）、font-stretch（收缩或拉伸当前字体系列）下图中分别把块元素转化成行内元素，以及行内元素转化为行内块元素。行内块元素可以包含其他行内元素或块级元素。

但是我们还可以发现，虽然子元素的字体颜色等样式恢复了，但是字体大小依旧按照后代选择器的大小输出，所以我们可以依此知道，子代选择器优先级高于后代选择器（因无论类的优先级与否，之前颜色、字体大小均被覆盖）。·伪类选择器： 选择HTML文档元素特定状态或者位置的，不仅仅是元素本身的属性。只把father的子元素添加了字体颜色，而其包含的div中的p标签未被标记，因为子代不等于后代。1.选择器是CSS中的关键部分，它允许针对特定元素或一组元素定义样式。：会选择同一级别下的元素中的紧跟选中元素之后的第一个p标签。

通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，实现精准页面设计。①选择器的声名（大括号里的内容）：其中可以写多条属性，但是必须遵循以上格式，即分号结尾，属性和值的关系以键值的关系出现。：CSS样式放在单独文件中，在head中用link标签链接进来，好处就是可以在多处使用相同的样式。：这三种导入方式有不同的优先级，优先级高的会覆盖优先级低的样式。：放在HTML文档头部，如下，在头部中确定标题的样式，在body中设置其内容。示例：P标签选择器，其中字体颜色为蓝色，大小为16像素。

进一步地，当我们输入用户名时发现它是明文显示，即我们可以实时看到所输入的内容，但是密码不应该明文输入。for属性是将label标签绑定到input元素，但是，一般与input中的id对应，但id对每个元素、标签都是唯一的，所以单选框一般删去for即可。比如浏览器中的搜索栏，或者是城市或区域的分类，亦或是登陆时输入的账号密码以及勾选的用户协议...这些都是表单。1.form标签：表单的容器，若想创造一个表单，就必须把表单的所有元素都放在form标签内。若不加相同的name，则很有可能出现多选的情况。

无语意，用于创建页面布局结构和布局，如，页眉、导航栏等.没有特殊元素的a或img标签，用于将文本包装起来，以便使用样式、CSS或JS行为。·块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容快。·常见的行内元素包括：span，a，strong，em，img，br，input等。·行内元素通常在同一行内呈现，不会独占一行。·常见块级元素：div，p，h1~h6，ol，li，table，form等。而img就在同一行，为什么？·行内元素不能包含块级元素，但可以包含其他行内元素。

2.herf超链接标签：herf中插入超链接还可以通过target定义链接的打开方式，其中_self：默认值，表示链接在当前窗口或标签页中打开；_blank:表示这个链接在新的窗口或标签页打开；所需将图片拖入与本HTML文件相同的文件夹下后，输入图片名或在输入图片网址.alt用于定义替代文本，即若图片无法加载则显示其中文本。3.img图像标签(在网页中嵌入图像，实现图像的显示和呈现，是构建复媒体内容网页的关键元素)属性名：表示数值 属性值：定义属性。

HTML的概述

3.表格标签：最外层使用table标签作为根元素，行标签用tr(table row)表示，列标签用td(table data)表示。ps:可以为表格添加边框，只需在table标签内，写入border=“1。“即可，即//数字为宽度。输入h1后按住Tab键即可生成h1标签。2.文本标签1.标题标签：h1~h6。