【HTML】HTML、CSS基础

最新推荐文章于 2024-05-01 03:58:06 发布

qq_47746614

最新推荐文章于 2024-05-01 03:58:06 发布

阅读量238

点赞数 2

分类专栏： HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_47746614/article/details/132589587

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的
```
比如 <b>     </b>
```
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 的结构

在这里插入图片描述

二、常用标签

标题标签 h

从1-6标签

 <h1>一级标题</h1> 
 <h2>二级标题</h2> 
 <h3>三级标题</h3> 
 <h4>四级标题</h4> 
 <h5>五级标题</h5> 
 <h6>六级标题</h6>

段落 p

HTML 段落是通过
标签进行定义的。

<p>  标签体  </p>

超链接 a

HTML 链接是通过标签进行定义的。

<a href="地址" target="  ">标签体</a>

属性：

href ：
- 指定点击该链接之后显示的网页的地址；
- 锚点：href属性用#开头；
- 还有内联框架的name
Target：指定打开页面的窗口方式；
- 属性值：
  - _blank 打开一个新窗口；
  - _self 当前窗口；
  - _parent 父窗口；
  - _ top 最顶层窗口

内联框架（浏览器窗口） iframe

<iframe name="hqyj" src="" width="500px" height="500px"></iframe>

src属性：URL 指向隔离页面的位置。
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。
frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 “0” 就可以移除边框：
使用 iframe 作为链接的目标
- iframe 可用作链接的目标（target）。
- 链接的 target 属性必须引用 iframe 的 name 属性

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.baidu.com" target="iframe_a">https://www.baidu.com</a></p>

图片标签 img

<img src="p1.jpg" width="104" height="142" />

src属性图片资源的路径，可以是网上的图片，也可以是工程中的一个本地图片HTML中的路径有两种方式：

1、相对路径（./img/boy.jpg 或 img/boy.jpg;返回上级目录用…）；

2、绝对路径(以/开始，通常/代表url到端口的位置)
alt属性：如果图片显示有问题，在图片位置就会显示alt内容
width,height属性：指定图片的宽高

换行 br

<br />

循环滚动标签

 <marquee behavior="" direction=""></marquee>

分割线 hr

<hr/>

特殊格式文字

下标文字：
```
<sub>2</sub>
```
上标文字：
```
<sup>2</sup> 
```
删除线：
```
<del>删除的文字</del> 
```
下划线：
```
<ins>张三</ins> 
```
字体加粗：
```
<b>粗体</b> 
```
斜体：
```
<i>斜体</i> 
```

文字标签 span

用于设置文字的样式

字符实体（特殊字符）

在这里插入图片描述

列表标签

无序列表

<ul type="disc"> 
        <li>Java</li> 
        <li>HTML</li> 
        <li>SQL</li> 
</ul>

几种图标的类型：
- square: 方形图标
- circle: 空心圆圈
- disc: 实心圆点，默认值
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

<ol type="i"> 
        <li>第一名</li> 
        <li>第二名</li> 
        <li>第三名</li> 
</ol>

有序列表的几种序号：
- 1: 阿拉伯数字，默认值
- A: 大写的英文字母
- a: 小写的英文字母
- I: 大写罗马数字
- i: 小写的罗马数字
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

列表可以嵌套使用

<ul type="disc"> 
        <li>Java
    		<ul> 
                <li>Java基础</li> 
                <li>java面对对象</li> 
                <li>java高级</li> 
            </ul> 
    	</li> 
        <li>HTML</li> 
        <li>SQL</li> 
</ul>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

<dl>
   <dt>java</dt>
       <dd>java基础</dd>
       <dd>java高级</dd>
   <dt>HTML</dt>
       <dd>p标签</dd>
       <dd>span标签</dd>
       <dd>列表标签</dd>
</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

表格

属性：
- border: 边框线，0-无边框
- cellspacing：单元格之间的间距
- cellpadding: 单元格的内边距

子表签：

tr: 行
th: 表头的列，文字是粗体
td: 数据行的列
caption: 表格名称，显示在表格上面
thead,tbody: 当有thead和tbody时，标签的顺序无关，不管thead放在什么位置，都会把thead显示在第一行

列合并： colspan属性

只会影响一行，
在要合并的第一列加colspan属性，值就是要合并的列数后面的列删掉

行合并： rowspan属性

在要合并的第一行的列上加rowspan属性，值是要合并的行数
然后把后面行的对应列都删掉

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="0" cellpadding="10">
			<!-- 
			 属性colspan：合并两列，只会影响一行，
			 在第一列加colspan属性，值为合并数，后面的列删除
			 -->
			<tr>
				<th>姓名</th>
				<th>科目</th>
				<th>成绩</th>
				<th colspan="2">联系方式（QQ、微信）</th>
				<!-- <th>联系方式（微信）</th> -->
			</tr>
			<!-- 
			 属性rowspan：表示行合并，值是合并的几行
			 -->
			<tr>
				<td rowspan="2">zzz</td>
				<td>java</td>
				<td>80</td>
				<td>qq123456</td>
				<td>微信：111222334</td>
			</tr>
			<tr>
				<!-- 
				在第一行的列上加rowspan属性，然后把后面的行对应的列删除 
				 -->
				<!-- <td>zzz</td> -->
				<td>web</td>
				<td>90</td>
				<td>qq123456</td>
				<td>微信：111222334</td>
			</tr>
			<tr>
				<td rowspan="2">sss</td>
				<td >java</td>
				<td>80</td>
				<td>qq123456</td>
				<td>微信：111222334</td>
			</tr>
			<tr>
				<!-- <td>sss</td> -->
				<td>web</td>
				<td>80</td>
				<td>qq123456</td>
				<td>微信：111222334</td>
			</tr>
		</table>
	</body>
</html>

表单form

表单就是在网页上填表格，在数据的修改，新增等时候用到表单
表单类型的输入框包含文本，单选，复选，下拉框，提交按钮
表单提交后就会把我们输入的数据发送给服务器

属性：

action:后台接收数据的接口的URL
method:提交方式，get-把数据附加在url提交，长度有限制， post-数据隐藏提交，长度不受限制

子标签

1、子标签的公共的属性

id: 标签唯一识别码，每个页面上不能有重复的id
name: 标签名，后台根据name来获取输入值
value: 输入的值
autocomplete: 是否显示历史记录, 设为off就不显示

2、子标签

文本输入框，可以输入字符，数字

用户名：<input type="text" name="userName">

密码输入框，输入的内容以星号显示

密码：<input type="password" name="userPwd">

提交按钮，点击时form表单提交到后台服务器
```
<input type="submit" value="提交"/> 
```

单选框：

同一组单选框name要一样
checked：选中，单选框和复选框都有这个属性

学生性别：
<input type="radio" name="stuSex" value="男">男 
<input type="radio" name="stuSex" value="女" checked>女

复选框
- checked：选中，单选框和复选框都有这个属性

<form>
    <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
    <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

下拉框
- option标签的value是提交到后台的值；标签体的值是显示的内容
- selected属性表示当前选项被选中
- select标签上添加 multiple属性，可以多选

学生籍贯：
<select name="stuNativePlace"> 
    <option value="">请选择...</option> 
    <option value="cq">重庆</option> 
    <option value="sc">四川</option> 
    <option value="gz" selected>贵州</option> 
    <option value="yn">云南</option> 
</select>

文本域：
- cols：宽度（列）
- rows：高度（行）

自我评价：
<textarea name="stuDesc" cols="30" rows="10"></textarea>

上传文件标签：
- 会打开文件浏览器让你选择文件

上传照片：
<input type="file" name="stuPhoto">

小结

标签名	作用	类型	标签名	作用	类型
`<h1></h1>~<h6></h6>`	标题，逐渐变小	块级元素	`<p></p>`	段落	块级元素
`<ul></ul>/<ol></ol>`	无序/有序列表	块级元素	`<li></li>`	列表中的项	块级元素
`<span></span>`	行内文字	行内元素	`<a href=""></a>`	超链接	行内元素
`<img src="资源路径" alt="提示文字"/>`	图片	行内元素	`<input type=""/>`	表单元素	行内元素
`<form action="提交路径" method="提交方式"></form>`	表单	块级元素	`<select><option value="实际值">显示文字</option></select>`	下拉菜单	行内元素
`<div></div>`	块	块级元素	`<table><tr><th></th></tr><tr><td></td></tr></table>`	表格相关	块级元素
`<button></button>`	按钮	行内元素	`<br/>`	换行	块级元素
`<iframe></iframe>`	浮动框架	块级元素

三、CSS样式

1、在学习CSS样式之前先了解HTML中元素分为块级元素和行内元素；

2、在HTML中，元素可以分为块级元素和行内元素，它们具有以下区别：

块级元素：

占据一整行空间，每个块级元素都会从新的一行开始，并撑满父容器的宽度。
可以设置宽度、高度、内外边距等属性。
块级元素可以包含其他块级元素和行内元素。

常见的块级元素包括 <div>, <p>, <h1> - <h6>, <ul>, <ol>, <li>, <header>, <footer> 等。

行内元素：

不会独占一行，它只会占据所包含内容的空间，不会强制换行。
宽度和高度属性对行内元素无效。
行内元素的内外边距的上下方向不会影响其他元素的布局。

常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <input> 等。

使用场景

1、块级元素适用于以下情况：

创建段落和文本块：使用 <p> 元素来包裹段落。
划分页面结构：使用 <div> 元素来划分页面的不同区域。
创建标题：使用 <h1> - <h6> 元素来表示不同级别的标题。
创建列表：使用 <ul> 和 <ol> 元素来创建无序或有序列表。

例如：

<div>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</div>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

2、行内元素适用于以下情况：

强调文本部分：使用 <strong> 或 <em> 元素来强调文本。
创建链接：使用 <a> 元素来创建超链接。
插入图像：使用 <img> 元素来插入图片。

例如：

<p>这段文字中包含着一段 <strong>强调的文本</strong> 和一个 <a href="https://example.com">链接</a>。</p>

<p><img src="image.jpg" alt="图片"></p>

CSS 语法

1、CSS（Cascading Style Sheets）层叠样式表，用于渲染HTML标签的样式（大小，颜色，位置）

2、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

CSS的注释：

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

CSS的三种书写位置：

1、书写位置：

内联样式，直接写在标签
内部样式，写在head里，用style标签
外部样式，单独写为一个css文件：
(注：三种样式的优先顺序内联 > 内部 > 外部)

选择器

CSS（层叠样式表）选择器有多种类型，每种都用于定位并选择文档中的特定元素。以下是常见的CSS选择器：

元素选择器：选择指定类型的元素。

例子：p { color: red; }

类选择器：选择具有指定类的元素。

例子：.red-text { color: red; }

ID选择器：选择具有指定ID的元素。

例子：#my-element { color: blue; }

通配符选择器：选择所有元素。

例子：* { margin: 0; }

属性选择器：根据属性值选择元素。

例子：input[type=“text”] { background-color: yellow; }

子元素选择器：选择作为另一个元素的直接子元素的元素。

例子：ul > li { list-style: none; }

相邻兄弟选择器：选择与指定元素相邻的同级元素。

例子：h2 + p { font-weight: bold; }

通用兄弟选择器：选择与指定元素同级的所有元素。

例子：h2 ~ p { font-style: italic; }

否定选择器：选择不满足指定条件的元素。

例子：:not(.exclude) { display: block; }

伪类选择器：选择具有特定状态的元素。

例子：a:hover { color: green; }

伪元素选择器：选择元素的特定部分或生成的内容。

例子：p::first-line { font-weight: bold; }

:root 选择器：选择文档的根元素。

例子：:root { font-size: 16px; }

:empty 伪类选择器：选择没有子节点的元素。

例子：p:empty { display: none; }

:checked 伪类选择器：选择被选中的元素（如复选框或单选按钮）。

例子：input[type=“checkbox”]:checked { opacity: 0.5; }

:disabled 伪类选择器：选择禁用的元素。

例子：input:disabled { cursor: not-allowed; }

:last-child 伪类选择器：选择同级元素中的最后一个子元素。

例子：li:last-child { color: red; }

:first-of-type 伪类选择器：选择同级元素中的第一个指定类型的元素。

例子：p:first-of-type { margin-top: 0; }

:nth-child(n) 伪类选择器：选择同级元素中的第n个子元素。

例子：ul li:nth-child(3) { color: blue; }

:nth-of-type(n) 伪类选择器：选择同级元素中的第n个指定类型的元素。

例子：p:nth-of-type(odd) { background-color: #EEE; }

:not(:last-child) 伪类选择器的组合：选择不是同级元素中的最后一个子元素的元素。

例子：input:not(:last-child) { margin-right: 10px; }

:hover 伪类选择器：选择鼠标悬停在上面的元素。

例子：button:hover { background-color: yellow; }

:focus 伪类选择器：选择拥有焦点的元素。

例子：input:focus { border: 2px solid blue; }

::before 伪元素选择器：在元素的内容之前插入生成的内容。

例子：p::before { content: “>>”; }

::after 伪元素选择器：在元素的内容之后插入生成的内容。

例子：p::after { content: “<<”; }

:first-letter 伪元素选择器：选择文本块的第一个字母。

例子：p:first-letter { font-size: 20px; }

:first-line 伪元素选择器：选择文本块的第一行。

例子：p:first-line { text-transform: uppercase; }

这只是一些常见的CSS选择器，还有其他一些高级选择器和组合选择器可以使用。使用这些选择器，您可以对文档中的元素进行高度的定制和样式设置。

常用样式

文字样式

color 文字颜色
background-color 背景颜色
font-size 文字大小
font-family 字体类型
text-align 文字对齐方式，center居中
text-indent ;文本缩进属性是用来指定文本的第一行的缩进。
text-shadow: 设置文本阴影

语法：text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

line-height:设置行高

属性值:

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

direction:设置文本方向。

属性值

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

边框样式

width 宽度
height 高度
border 边框线
border-style 用来定义边框的样式，默认无样式none

属性值	描述
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框。两个边框的宽度和 border-width 的值相同

border-radius 圆角
border-collapse:collapse; 设置表格的边框是被折叠成一个单一的边框或隔开

css背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position
background-size

background-color:属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {
	background-color:#b0c4de;
}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

body {
    background-image:url('bg.jpg');
}

background-repeat:设置背景图像是否及如何重复。

属性值:

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

background-position:设置背景图像的起始位置。

属性值

值	描述
left top ;left center; left bottom ;right top ;right center ;right bottom; center top ;center center ;center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

body
{ 
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}

background-attachment:背景图像是否固定或者随着页面的其余部分滚动。

属性值

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

background-size:用于定义背景图片的尺寸大小

属性值：

值	描述
auto	这是默认值，表示背景图像将按照其原始尺寸显示。
length	可以使用具体的长度值，例如 `px`、`em` 或 `%`，来指定背景图像的宽度和高度。这些值将被应用于背景图像在元素内的尺寸。
percentage	可以使用百分比值来定义背景图像的尺寸。百分比值将相对于包含背景的元素的尺寸进行计算。
cover	背景图像将被缩放以完全覆盖元素的背景区域，可能会导致图像被裁剪。保持图像的宽高比并确保在元素中完全可见。
contain	背景图像将被缩放以在元素的背景区域内完全可见，可能会产生空白区域。保持图像的宽高比并尽量适应元素的尺寸。

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接

a:link {
  color: blue; /* 设置未访问链接的文本颜色为蓝色 */
}

a:visited - 用户已访问过的链接

a:visited {
  color: purple; /* 设置已访问链接的文本颜色为紫色 */
}

a:hover - 当用户鼠标放在链接上时

a:hover {
  text-decoration: underline; /* 设置鼠标悬停在链接上时给链接添加下划线 */
  color: red; /* 设置鼠标悬停在链接上时文本颜色为红色 */
}

a:active - 链接被点击的那一刻

a:active {
  color: green; /* 设置链接被点击瞬间的文本颜色为绿色 */
}

列表

1、list-style:square url(“sqpurple.gif”);

属性值

值	描述
initial	将这个属性设置为默认值。
inherit	规定应该从父元素继承 list-style 属性的值。

2、list-style-image:url(‘s1.gif’);

属性值

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

3、 list-style-position: inside;

属性值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

4、list-style-type:none

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)

显示

1、Overflow

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

2、display

display是一个用于控制元素显示行为的属性，它可以设置不同的属性值来改变元素在文档流中的布局方式。

属性值：

值	描述
`block`	将元素显示为块级元素，会独占一行，并且会自动换行。
`inline`	将元素显示为内联元素，不会独占一行，并且不会自动换行。
`inline-block`	将元素显示为内联元素，但它允许设置宽度和高度以及其他块级元素所具备的属性。
`none`	将元素隐藏，不占用空间，当`display`设置为`none`时，元素及其子元素都不会显示。
`flex`	将元素显示为弹性容器，用于进行灵活的布局。
`grid`	将元素显示为网格容器，用于进行网格布局。
`table`	将元素显示为表格。
`inline-table`	将元素显示为内联表格。
`table-row`	将元素显示为表格行
`table-cell`	将元素显示为表格单元格。

定位

语法：position:relative

在CSS中，position属性用于定义元素的定位方式。它可以接受以下几个属性值：

static：
- 默认值，元素按照正常的文档流进行定位。
- 不受top、right、bottom、left或z-index属性影响。

.box {
  position: static;
}

relative：
- 相对定位，元素相对于其正常位置进行定位。
- 可以使用top、right、bottom、left属性调整元素的位置。
- 其他元素仍按照正常的文档流进行布局。

.box {
  position: relative;
  top: 10px; /* 向下偏移 10 像素 */
  left: 20px; /* 向右偏移 20 像素 */
}

absolute：
- 绝对定位，元素相对于其最近的已定位祖先元素进行定位。
- 如果没有已定位的祖先元素，则相对于最初包含该元素的块级容器（通常是body）进行定位。
- 可以使用top、right、bottom、left属性调整元素的位置。
- 不会占据原始文档流中的空间，会覆盖其他元素。

.box {
  position: absolute;
  top: 50px; /* 距离父元素顶部 50 像素 */
  left: 100px; /* 距离父元素左侧 100 像素 */
}

fixed：
- 固定定位，元素相对于浏览器窗口进行定位。
- 可以使用top、right、bottom、left属性调整元素的位置。
- 不会随页面滚动而改变位置。
- 不会占据原始文档流中的空间，会覆盖其他元素。

.box {
  position: fixed;
  top: 20px; /* 距离浏览器窗口顶部 20 像素 */
  right: 30px; /* 距离浏览器窗口右侧 30 像素 */
}

sticky：
- 粘性定位，元素根据用户滚动的位置进行定位。
- 在未滚动到指定位置时，表现类似于relative定位；当滚动到特定位置时，变为fixed定位。
- 可以使用top、right、bottom、left属性调整元素的位置。
- 不会占据原始文档流中的空间，会覆盖其他元素。

.box {
  position: sticky;
  top: 10px; /* 距离顶部 10 像素，当滚动到顶部时会变为固定定位 */
}

堆叠顺序

语法： z-index: 3;

z-index属性用于控制元素的堆叠顺序（即元素在垂直方向上的显示顺序）。较高的z-index值会使元素在屏幕上更靠前显示，覆盖较低的z-index值的元素。
需要注意的是，z-index的效果仅在具有定位（position）属性（如relative、absolute、fixed）的元素上有效。
合理使用z-index，过多的层叠可能导致页面布局难以管理，容易出现覆盖错误。

浮动

1、float:right;

指定一个盒子（元素）是否可以浮动。

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2、 clear:both;

指定不允许元素周围有浮动元素。

属性值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

举例说明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>浮动布局</title>
    <style type="text/css">
      #outer {
        width: 500px;
        height: 500px;
        margin: auto;
        border: 1px solid black;
      }
      .box1,
      .box2,
      .box3 {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: white; /* 浮动： left 左浮动 right 右浮动，第一个标签排最右边 */
        float: left;
      }
      .box1 {
        background-color: red;
      }
      .box2 {
        background-color: green;
      }
      .box3 {
        background-color: blue;
      }
      .p1 {
        /* 清除浮动: 标签设置浮动之后，后续标签也会跟着浮动 为了避免对后续标签的影响，要对后续第一个标签设置清除浮动 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <p class="p1">fdsjalfjsa</p>
      <p>ccccccc</p>
    </div>
  </body>
</html>

弹性布局

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

1、 flex-direction:row-reverse;

指定了弹性容器中子元素的排列方式

属性值

值	描述
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

2、 justify-content: space-around;

设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

属性值

值	描述
flex-start	默认值。从行首起始位置开始排列。
flex-end	从行尾位置开始排列。
center	居中排列。
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。
space-around	均匀排列每个元素，每个元素周围分配相同的空间。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

3、 align-items:center;

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

属性值

值	描述
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

4、flex-wrap: wrap;

设置弹性盒子的子元素超出父容器时是否换行。

属性值

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

5、align-content:space-around;

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

默认值

值	描述
stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

6、flex-flow:row-reverse wrap;

flex-direction 和 flex-wrap 的简写

属性值

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit默认值是 “row”。规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit默认值是 “nowrap”。规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

7、order:4;

设置弹性盒子的子元素排列顺序。

属性值

值	描述
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

8、align-self:center;

在弹性子元素上使用。覆盖容器的 align-items 属性。

属性值

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch	元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center	元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline	元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

9、 flex:1;

设置弹性盒子的子元素如何分配空间。

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

举例说明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>弹性布局</title>
    <style type="text/css">
      #outer {
        height: 500px;
        width: 500px;
        border: 1px solid red;
        margin: auto; /* 弹性布局: 容器的display设为flex */
        display: flex; /* 排列方向 row 横向排列，默认值 row-reverse 横向排列，右对齐，顺序反转 column 竖排 column-reverse 竖排,底边对齐，顺序反转 */
        flex-direction: row; /* 对齐方式:
在排列方向对齐方式。横排时，水平方向对齐方式；竖排，垂直方向的对齐方 式 （以下说明都是按row方向排列） center 水平居中 flex-start 左对齐 flex-end 右对齐 space-around 中间等距间隔，两边的间距时中间间距的一半 space-between 中间间隔等距，两边靠边 space-evenly 完全等距间隔排列（两边和中间都等距） */
        justify-content: space-between; /* 跟排列方向垂直的方向上的对齐方式： （如果时横向排列，这个样式就是垂直对齐方式； 如果纵向排列，这个样式就是水 平方向的对齐方式） center 居中 flex-start 顶对齐 flex-end 底边对齐 */
        align-items: flex-start; /* 换行方式 nowrap 不换行， 压缩标签的宽度，在一行显示完所有标签 wrap 换行 wrap-reverse 换行，顺序反转 （换行之后的行距由align-content样式决定） */
        flex-wrap: wrap;
      }
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <!-- <div class="box"> 4 </div>
      <div class="box"> 5 </div>
       <div class="box"> 6 </div>
        <div class="box">7 </div> 
        <div class="box"> 8 </div> 
        <div class="box"> 9 </div> -->
    </div>
  </body>
</html>

练习：

弹性布局实现上下左右居中显示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>用flex实现上下左右居中</title>
    <style type="text/css">
      .outer {
        /* vw视口宽度单位, 全屏宽度是100vw */
        width: 100vw; /* vh视口的高度单位,全屏的高度是100vh */
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="outer"><div class="box"></div></div>
  </body>
</html>

CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

1、resize

resize属性指定一个元素是否应该由用户去调整大小。

div {
    resize:both;
    overflow:auto;
}

2、box-sizing: border-box;

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

属性值

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

3、outline-offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间
轮廓可能是非矩形

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

qq_47746614

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【HTML】HTML、CSS基础

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始。每个自定义列表项以开始。每个自定义列表项的定义以开始。< dl > < dt > java < dd > java基础 < dd > java高级 < dt > HTML < dd > p标签 < dd > span标签 < dd > 列表标签
复制链接

扫一扫