html

html&c s s

HTML

HTML基本概念

什么是HTML？

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
HTML不是一种编程语言，而是一种标记语言

HTML基本语法

基本结构

如下所示，这是一个非常简单基本的html结构

在谷歌等浏览器中，也可以通过右键一个页面，查看元素获取到一个网站的基本html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <h1>我的第一个标题。</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

<!DOCTYPE html>声明为 HTML文档，HTML文档也常称为网页

一个文档包含HTML标签和文本

<html>与 </html>之间的文本描述网页，同时 HTML元素也是当前页面的根元素

<head>`是包含了文档的元(`meta`)数据，如定义网页编码格式 `<meta charset="utf-8">

<title>元素描述当前文档页面的标题

<body>与 <body>之间的文本是可见的页面内容

<h1>与 </h1>之间的文本被显示为标题

与

之间的文本被显示为段落

标签规则

基本结构中诸多尖括号所组成的代码被称为 标记标签(HTML标签)，遵循如下基本规则

标签由尖括号<>包围
标签经常成对出现，由开始标签与结束标签组成
多数情况下，标签支持互相嵌套，用来实现更复杂的页面内容

注释语法

注释主要为页面代码进行标识标注，方便开发者进行代码阅读

本身解释器或编译器不会解释任何注释内容，只会当做空白处理，浏览器在遇到注释时同样如此

<!-- 这是一段注释，但被注释的内容不会显示 -->
<head>
    <title>这是一个标题。</title>
</head>
<h1>这是一个H1标题。</h1>
<h2>这是一个H2标题。</h2>
<h3>这是一个H3标题。</h3>
<h4>这是一个H4标题。</h4>
<h5>这是一个H5标题。</h5>
<h6>这是一个H6标题。</h6>

HTML常见标签

块级标签

块级标签最明显的特征为独占一行，不会和其他元素待在同一行
其次具备的特点是可以设置宽、高属性
标题标签
段落标签
块级标签
列表标签
表单标签

标题标签

呈现加粗，加大的字体样式，从h1~h6，越来越细越小

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

行级标签

行级标签不具备自动换行的属性
并且设置行级标签的宽高也是无意义的
跳转标签
文本标签

跳转标签

跳转标签使用 a标签，通过标签的 href属性指明在点击时跳转的地址

<a src="https://www.baidu.com">百度</a>

行内块标签

行内块标签拥有内在尺寸，可设置高宽
但是这样的标签不会自动换行
图片标签
按钮标签

图片标签

图片标签为 img标签，可以在页面加载图片资源，使用相对、绝对、网路资源都是可以的

使用 src属性指明图片资源地址，alt属性表示光标位于图片时所显示的内容，或是当图片加载失败时所显示的内容

<img src="img/1.jpg" alt="图片" style="">

样式标签

加粗
斜体
下划线
删除线

加粗

加粗文本可以使用 b标签，也可以使用 strong标签

<b>加粗</b>
<strong>加粗</strong>

HTML表格标签

表格标签由 table标签进行定义，是在页面中表示数据时经常使用到的标签元素

每一行: tr[table row]

每一行有几个单元格: td[table data]

表头: th[table header]

表格外边框
表格边框覆盖
表格单元格合并
表格文字对齐

表格外边框

<table border="5">
    <caption>用户表</caption>
	<tr>
		<th>名字</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
	</tr>
</table>

border: 定义表格边框，数字越大，边框越粗

caption: 定义表格标题

[tab name="表格单元格间距"]

表格单元格间距

<table border="1" cellpadding="5" cellspacing="3">
...
</table>

cellpadding: 表格单元边界与单元内容之间的间距

cellspacing: 单元格之间间距

HTML表单标签

大部分表单标签(input、textarea、select)属于行块级元素，具备内在尺寸，宽高属性等，但不会自动换行

表单用于收集不同类型的用户输入，表单由不同类型的标签组成

单行文本
单选框
复选框
文件框
多行文本
下拉菜单
多选下拉菜单

单行文本

普通文本输入框使用 text类型

<label for="username">姓名:</label>
<input type="text" name="username" value="张三" />

label标签可以为表单框进行标识说明，为用户带来更好的体验，并且当光标点击label标签时，会自动将焦点移动至对应的输入框中

当type类型为 password时，为密码输入类型，输入的内容以 *号代替

<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" id="password"/>

value: 表单框输入的实际内容

name: 定义表单数据标识符，提交数据时声明该数据的键

placeholder: 表单框输入前提示内容

Css基本概念

什么是Css?

css指层叠样式表(Cascading Style Sheets），通俗的理解就是可以为标签元素带上颜色、大小、粗细状态等表现形式

样式通常存储在样式表中，也可以独立定义一个外部样式表文件，这些文件通常存储后缀为css

有了CSS，html中大部分表现样式的标签就可以不用了

html可以专心的只负责文档的结构和内容，而表现形式完全交给CSS，这样也就使得html文档变得更加简洁

Css引入方式

在页面中集成使用css的方式有主要三种

内联式
嵌入式
外部式

内联式

直接在页面标签元素上进行编写，通过style属性定义

<div style="background: #00ff00">
    <p>
        这个地方有一个美丽的背景色
    </p>
</div>

优先级

在相同的样式定义时，会遵循如下优先级规则

内联式 > 嵌入式 > 外部式 (就近原则)

Css基本语法

css语法由两部分构成：选择器、一条或多条样式声明

当属性中的值为若干单词时，需要加引号

div { 
    color: red;
    background: green;
    font-family: "sans serif";
}

属性(property)是您希望设置的样式属性(style attribute)，每个属性有一个值，属性和值之间被冒号分开

Css选择器

标签选择器
类选择器
属性选择器
层级选择器
ID选择器
伪类选择器

标签选择器

影响范围大，常做通用设置，或用在层级选择器中

<p>一段</p>
p{
    color: blue;
}
/* 定义p标签文字为蓝色 */

CSS选择器权重

当有多个同类样式作用于同一个元素时，权重高的样式对元素起作用，权重相同时后写的样式覆盖前面写的

选择器权重值如下，遵循就近原则

内联式样式：1000
ID选择器：100
类选择器：10
标签选择器：1

还可以使用!important语句将样式权重设置为10000，!important写到样式属性值后对该样式进行权重设置

.test{
    color: red !important;
}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

background-color: 设置背景颜色
background-image: 设置背景图片地址
background-repeat: 设置图片如何重复平铺，可选参数有
- repeat: 全局重复
- repeat-x: 水平方向重复
- repeat-y: 垂直方向重复
- no-repeat: 图片只显示一次）
background-position: 设置图片的位置，可选参数有
- left、right、center
- background-attachment
  : 设置图片是固定的还是会随页面滚动，可选参数有
  - scroll: 背景图片会随着页面其余部分的滚动而移动
  - fixed: 页面的其余部分滚动时，背景图像不会移动

注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题，常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线支持如下属性

underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本的一条线
blink：定义闪烁的文本
inherit：规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

background-color: 设置背景颜色
background-image: 设置背景图片地址
background-repeat: 设置图片如何重复平铺，可选参数有
- repeat: 全局重复
- repeat-x: 水平方向重复
- repeat-y: 垂直方向重复
- no-repeat: 图片只显示一次）
background-position: 设置图片的位置，可选参数有
- left、right、center
- background-attachment
  : 设置图片是固定的还是会随页面滚动，可选参数有
  - scroll: 背景图片会随着页面其余部分的滚动而移动
  - fixed: 页面的其余部分滚动时，背景图像不会移动

注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题，常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线支持如下属性

underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本的一条线
blink：定义闪烁的文本
inherit：规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css盒子模型

在html标签中，所有的标签都有自身具备的大小款高，以及外边框、边距，这被称为盒子模型一个盒子模型主要的构成是内容(content)、内边距(padding)、边框(border)、外边距(margin)

内边距
外边距
边框属性

内边距

padding: 设置元素包含的内容和元素边框的距离，也叫内边距

p{
    padding: 100px;
}

这个样式属性也可以拆分成以下单独四种，可以分别设置对应位置的内边距

padding-top：设置上内边距
padding-bottom：设置下内边距
padding-left：设置左内边距
padding-right：设置右内边距

Css浮动属性

通过浮动操作float，可以使dom元素脱离文档流，在页面上具备居左、中和右的效果特点

移动后的元素，会导致其他元素随之重新排列在页面上的顺序位置，就相当于你不在的位置，别人会抢占

浮动通常利用与图像元素，或是对元素进行布局

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

如果浮动方向空间不足，元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止

浮动常见属性

float:none;  /* 不使用浮动 */
float:left;  /* 靠左浮动  */
float:right; /* 靠右浮动  */

清除浮动

float: clear;

元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以为浮动的元素使用clear属性

clear属性指定元素两侧不会出现浮动元素，也实现了独占一行的额效果

Css元素溢出

当子元素的大小超过所承载的父元素大小时，此时需要设置父元素对于溢出的子元素显示方式

<p>123456789</p>
p{
    width:10px; 
    border: 1px solid blue;
    overflow:auto;
}

可以通过overflow属性进行溢出属性的控制，可选项有如下这些

visible: 默认值，内容不会被修剪，会呈现在元素框之外
hidden: 内容会被修剪，并且其余内容是不可见的
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

Css-Display

display属性可以控制标签元素的类型显示方式，常见的有如下选项

p{
    display: inline;
}

none: 元素不会显示，也就是藏起来
block: 元素将显示为块级元素，此元素前后会带有换行符
inline: 此元素被显示为内联元素，元素前后没有换行符
list-item: 元素作为列表显示

table: 元素作为块级表格来显示，表格前后带有换行符
inline-table: 元素作为内联表格来显示，表格前后没有换行符
table-cell: 此元素会作为一个表格单元格显示
table-caption: 此元素会作为一个表格标题显示

每个元素都有一个默认 display 值，并且可以被覆盖

除了display: none可以隐藏元素之外，也可以使用visibility: hidden 但是visibility: hidden隐藏的元素还会在文档流中占据自己的一席之地，虽然元素被隐藏，但是还会影响实际的布局效果

.hidden{
    visibility: hidden;
}

Css定位属性

什么是文档流？

文档流，是指每个标签的元素盒子按照`html`标签编写的顺序依次从上到下，从左到右排列

块元素占一行，行内元素在一行之内从左到右排列

先写的先排列，后写的排在后面，每个盒子都占据自己的位置

CSS定位通过position属性进行规定，可选项有如下这些

static

属于css的默认值，默认定位方式，遵循标签元素的块、行特点

从上到下，从左到右

relative

是相对定位方式，会按照元素的原始位置对该元素进行移动

可以通过方向移动其位置，并且原本位置也会保留，不会被周围元素侵占

absolute

绝对定位元素，当前元素会脱离文档流，相当于飘起来了

可以通过方向移动其位置，原本位置会被周围元素侵占，而他本身将会覆盖在侵占元素之上

设置了absolute的元素将会基于当前元素的父元素进行偏移，而且这个父元素还是设置过定位的

如果父元素均未设置position属性，那么将相对于body元素进行位置偏移

fixed

固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位

不管页面如何滚动，都会固定在页面的位置，比如导航条

sticky

是一种新的定位方式，相当于包含fixed与relative结合，元素最初会被处理为相对定位

当元素距离浏览器窗口一定位置时，可以使当前元素固定在一定位置，成为固定定位

其余情况，则还可以跟随窗口滚动

设置了定位的元素的偏移方式

top: 定位元素的上外边距边界与其包含块上边界之间的偏移
bottom 定位元素下外边距边界与其包含块下边界之间的偏移
right: 定位元素右外边距边界与其包含块下边界之间的偏移
left: 定位元素左外边距边界与其包含块下边界之间的偏移

除此之外，还可以通过z-index属性设置元素的堆叠属性，当两个或多个元素因为定位导致叠在一起时

z-index
设置堆叠元素的层级，数值越大，优先级越高，未设置，默认按照最后的html代码进行操作

Css伪类

css伪类可以定义元素的特殊状态，比如设置鼠标悬停在元素上时的样式，或者控制连接访问前后的样子

基本语法

selector: link{
  property: value;
}

锚伪类

可以控制连接在不同的访问情况下的显示样式

未访问的连接

a:link {
    color: red;
    /* 没访问过，是红色*/
}

访问过的连接

a:visited {
    color: blue;
    /* 访问过，就会变成蓝色*/
}

悬停在元素处

a:hover {
    color: gray;
    /* 鼠标飘到元素上，就会变成灰色*/
}

已选择的连接

a:active {
     color: green;
    /* 你选择的连接，会变成绿色，并且绿色会笼罩你*/
}

first-child

匹配元素是另一个元素的第一个子元素

任何一个子元素，并且是第一个，且是p标签，将被如下规则匹配

p : first-child {
  color: blue;
}

比如如下的html，所有第一个元素为p的，将会生效上面的效果

<div>
    <span class="external-link"><a class="no-external-link" href="https://lienze.ltd" target="_blank"><i data-feather="external-link"></i>因为有我，所以不变</a></span>
    <p>不变</p>
</div>

<p>不变</p>
<div>
    <p>变变变</p>
    <div>
        <p>变变变</p>
    </div>
</div>
<p>不变</p>

Css-flex布局

Flex可以使元素成为一种容器，而在容器内的子元素将会成为容器成员

设置为flex属性后，子元素的float、clear和vertical-align属性将失效

通俗的来说，flex需要设置父级元素，像是这样，成为flex容器

display: flex;

在这种样式下的子元素，将会处于flex容器之中，可以支持进行便捷的布局样式控制，如排列等

当设置为容器后，容器内将会拥有两个轴，大家常称为主轴和侧轴

一般主轴是x轴方向的，侧轴是y轴方向的

父级属性

父级可以设置的属性
- flex-direction: 控制容器内子元素排列方向
- flex-wrap: 控制一行排列不下时，换行的属性控制
- justify-content: 设置子元素在主轴上的排列方式
- align-items: 设置子元素为单行时，在侧轴上的排列方式
- align-content: 设置子元素为多行时，在侧轴上的排列方式
- flex-flow: 是flex-direction和flex-wrap的复合属性

flex-direction

控制容器内元素排列方向

.box {
  	flex-direction: row | row-reverse | column | column-reverse;
}

row
row-reverse
column
column-reverse
row：主轴在水平方向，顺序排列

flex-wrap

控制多个元素的排列方式，如果一行排列不下，如何进行排列，是互相挤着？还是另起一行

flex默认的子元素，在摆放时是不会换行的，在一行放不下时，只会元素的大小进行缩放，将其适应能放到这一行大小上

nowrap: 默认值，不换行

flex-wrap: nowrap

比如在row情况下，如果一行放不下，那么第四个元素出现

容器内一行的四个元素都会有适当的宽度缩小，让其可以真正可以在一行存放得下

wrap
wrap-reverse
wrap: 换行

如果一行内元素摆放不下，那么另起一行从头开始摆放

注意: 换行之后，行之间会额外多空行

justify-content

控制子元素在主轴上的对齐方式

flex-start
flex-end
center
space-around
space-between
flex-start: 默认值，从左到右，如果主轴是y轴，那么从上到下

设置子元素在侧轴上的对齐方式，可以与justify-content属性配合使用

注意: 适合在子元素单行时使用

flex-start
flex-end
center
stretch
flex-start: 从上到下

如果希望可以将一行元素整个容器内居中，可以分别设置主轴和侧轴居中

justify-content: center;
align-items: center;

align-content

设置子元素在侧轴上的对齐方式，适用于多行子元素的情况下，也就是子元素换行属性flex-wrap: wrap;

单行情况下是无效的

flex-start
flex-end
center
space-around
space-between
stretch
flex-start: 从侧轴开头进行换行排列，并且还可以取消默认wrap换行带来的空行

flex-flow

是flex-direction和flex-wrap的复合属性

设置主轴方向子元素排列方式以及是否换行(换列)

flex-flow: row wrap;

换行并采用row方向排列子元素

子元素属性

flex: 设置子元素在剩余空间内所占的份数，默认为0
align-self: 控制子项目在侧轴的排列方式，可以让单独某个子元素拥有不一样的对齐方式
order: 元素位置顺序，越小越靠前，默认为0

flex

设置子元素在剩余空间内可以占的空间，分配的空间也是剩余的空间，主要针对于单行子元素进行布局控制

比如三个子元素处于单行，现在可以让第二个子元素占据整个剩余空间，那么可以使用

flex: 1; /* 占据剩余全部 */

一般来说，如果设置了flex属性，那么元素本身的宽的意义就不太大了，要按照flex分割好的块数进行元素的宽度维护

align-self

让某个子元素有自己的侧周排列方式，和align-items类似，可以单独让某个元素在侧周的排列位置上不同

覆盖align-items属性

align-self: flex-end;

order

定义子元素先后排列顺序，数值越小，越靠前(前后位置上靠前)，默认为0

order: 0;

上一页lab_sheet_9_zh-hans 下一页[styleguide]

最后更新于5个月前

html

html&c s s

HTML

HTML基本概念

什么是HTML？

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
HTML不是一种编程语言，而是一种标记语言

HTML基本语法

基本结构

如下所示，这是一个非常简单基本的html结构

在谷歌等浏览器中，也可以通过右键一个页面，查看元素获取到一个网站的基本html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <h1>我的第一个标题。</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

<!DOCTYPE html>声明为 HTML文档，HTML文档也常称为网页

一个文档包含HTML标签和文本

<html>与 </html>之间的文本描述网页，同时 HTML元素也是当前页面的根元素

<head>`是包含了文档的元(`meta`)数据，如定义网页编码格式 `<meta charset="utf-8">

<title>元素描述当前文档页面的标题

<body>与 <body>之间的文本是可见的页面内容

<h1>与 </h1>之间的文本被显示为标题

与

之间的文本被显示为段落

标签规则

基本结构中诸多尖括号所组成的代码被称为 标记标签(HTML标签)，遵循如下基本规则

标签由尖括号<>包围
标签经常成对出现，由开始标签与结束标签组成
多数情况下，标签支持互相嵌套，用来实现更复杂的页面内容

注释语法

注释主要为页面代码进行标识标注，方便开发者进行代码阅读

本身解释器或编译器不会解释任何注释内容，只会当做空白处理，浏览器在遇到注释时同样如此

<!-- 这是一段注释，但被注释的内容不会显示 -->
<head>
    <title>这是一个标题。</title>
</head>
<h1>这是一个H1标题。</h1>
<h2>这是一个H2标题。</h2>
<h3>这是一个H3标题。</h3>
<h4>这是一个H4标题。</h4>
<h5>这是一个H5标题。</h5>
<h6>这是一个H6标题。</h6>

HTML常见标签

块级标签

块级标签最明显的特征为独占一行，不会和其他元素待在同一行
其次具备的特点是可以设置宽、高属性
标题标签
段落标签
块级标签
列表标签
表单标签

标题标签

呈现加粗，加大的字体样式，从h1~h6，越来越细越小

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

行级标签

行级标签不具备自动换行的属性
并且设置行级标签的宽高也是无意义的
跳转标签
文本标签

跳转标签

跳转标签使用 a标签，通过标签的 href属性指明在点击时跳转的地址

<a src="https://www.baidu.com">百度</a>

行内块标签

行内块标签拥有内在尺寸，可设置高宽
但是这样的标签不会自动换行
图片标签
按钮标签

图片标签

图片标签为 img标签，可以在页面加载图片资源，使用相对、绝对、网路资源都是可以的

使用 src属性指明图片资源地址，alt属性表示光标位于图片时所显示的内容，或是当图片加载失败时所显示的内容

<img src="img/1.jpg" alt="图片" style="">

样式标签

加粗
斜体
下划线
删除线

加粗

加粗文本可以使用 b标签，也可以使用 strong标签

<b>加粗</b>
<strong>加粗</strong>

HTML表格标签

表格标签由 table标签进行定义，是在页面中表示数据时经常使用到的标签元素

每一行: tr[table row]

每一行有几个单元格: td[table data]

表头: th[table header]

表格外边框
表格边框覆盖
表格单元格合并
表格文字对齐

表格外边框

<table border="5">
    <caption>用户表</caption>
	<tr>
		<th>名字</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
	</tr>
</table>

border: 定义表格边框，数字越大，边框越粗

caption: 定义表格标题

[tab name="表格单元格间距"]

表格单元格间距

<table border="1" cellpadding="5" cellspacing="3">
...
</table>

cellpadding: 表格单元边界与单元内容之间的间距

cellspacing: 单元格之间间距

HTML表单标签

大部分表单标签(input、textarea、select)属于行块级元素，具备内在尺寸，宽高属性等，但不会自动换行

表单用于收集不同类型的用户输入，表单由不同类型的标签组成

单行文本
单选框
复选框
文件框
多行文本
下拉菜单
多选下拉菜单

单行文本

普通文本输入框使用 text类型

<label for="username">姓名:</label>
<input type="text" name="username" value="张三" />

label标签可以为表单框进行标识说明，为用户带来更好的体验，并且当光标点击label标签时，会自动将焦点移动至对应的输入框中

当type类型为 password时，为密码输入类型，输入的内容以 *号代替

<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" id="password"/>

value: 表单框输入的实际内容

name: 定义表单数据标识符，提交数据时声明该数据的键

placeholder: 表单框输入前提示内容

Css基本概念

什么是Css?

css指层叠样式表(Cascading Style Sheets），通俗的理解就是可以为标签元素带上颜色、大小、粗细状态等表现形式

样式通常存储在样式表中，也可以独立定义一个外部样式表文件，这些文件通常存储后缀为css

有了CSS，html中大部分表现样式的标签就可以不用了

html可以专心的只负责文档的结构和内容，而表现形式完全交给CSS，这样也就使得html文档变得更加简洁

Css引入方式

在页面中集成使用css的方式有主要三种

内联式
嵌入式
外部式

内联式

直接在页面标签元素上进行编写，通过style属性定义

<div style="background: #00ff00">
    <p>
        这个地方有一个美丽的背景色
    </p>
</div>

优先级

在相同的样式定义时，会遵循如下优先级规则

内联式 > 嵌入式 > 外部式 (就近原则)

Css基本语法

css语法由两部分构成：选择器、一条或多条样式声明

当属性中的值为若干单词时，需要加引号

div { 
    color: red;
    background: green;
    font-family: "sans serif";
}

属性(property)是您希望设置的样式属性(style attribute)，每个属性有一个值，属性和值之间被冒号分开

Css选择器

标签选择器
类选择器
属性选择器
层级选择器
ID选择器
伪类选择器

标签选择器

影响范围大，常做通用设置，或用在层级选择器中

<p>一段</p>
p{
    color: blue;
}
/* 定义p标签文字为蓝色 */

CSS选择器权重

当有多个同类样式作用于同一个元素时，权重高的样式对元素起作用，权重相同时后写的样式覆盖前面写的

选择器权重值如下，遵循就近原则

内联式样式：1000
ID选择器：100
类选择器：10
标签选择器：1

还可以使用!important语句将样式权重设置为10000，!important写到样式属性值后对该样式进行权重设置

.test{
    color: red !important;
}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

background-color: 设置背景颜色
background-image: 设置背景图片地址
background-repeat: 设置图片如何重复平铺，可选参数有
- repeat: 全局重复
- repeat-x: 水平方向重复
- repeat-y: 垂直方向重复
- no-repeat: 图片只显示一次）
background-position: 设置图片的位置，可选参数有
- left、right、center
- background-attachment
  : 设置图片是固定的还是会随页面滚动，可选参数有
  - scroll: 背景图片会随着页面其余部分的滚动而移动
  - fixed: 页面的其余部分滚动时，背景图像不会移动

注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题，常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线支持如下属性

underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本的一条线
blink：定义闪烁的文本
inherit：规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

background-color: 设置背景颜色
background-image: 设置背景图片地址
background-repeat: 设置图片如何重复平铺，可选参数有
- repeat: 全局重复
- repeat-x: 水平方向重复
- repeat-y: 垂直方向重复
- no-repeat: 图片只显示一次）
background-position: 设置图片的位置，可选参数有
- left、right、center
- background-attachment
  : 设置图片是固定的还是会随页面滚动，可选参数有
  - scroll: 背景图片会随着页面其余部分的滚动而移动
  - fixed: 页面的其余部分滚动时，背景图像不会移动

注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题，常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线支持如下属性

underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本的一条线
blink：定义闪烁的文本
inherit：规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css盒子模型

内边距
外边距
边框属性

内边距

padding: 设置元素包含的内容和元素边框的距离，也叫内边距

p{
    padding: 100px;
}

这个样式属性也可以拆分成以下单独四种，可以分别设置对应位置的内边距

padding-top：设置上内边距
padding-bottom：设置下内边距
padding-left：设置左内边距
padding-right：设置右内边距

Css浮动属性

通过浮动操作float，可以使dom元素脱离文档流，在页面上具备居左、中和右的效果特点

移动后的元素，会导致其他元素随之重新排列在页面上的顺序位置，就相当于你不在的位置，别人会抢占

浮动通常利用与图像元素，或是对元素进行布局

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

如果浮动方向空间不足，元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止

浮动常见属性

float:none;  /* 不使用浮动 */
float:left;  /* 靠左浮动  */
float:right; /* 靠右浮动  */

清除浮动

float: clear;

元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以为浮动的元素使用clear属性

clear属性指定元素两侧不会出现浮动元素，也实现了独占一行的额效果

Css元素溢出

当子元素的大小超过所承载的父元素大小时，此时需要设置父元素对于溢出的子元素显示方式

<p>123456789</p>
p{
    width:10px; 
    border: 1px solid blue;
    overflow:auto;
}

可以通过overflow属性进行溢出属性的控制，可选项有如下这些

visible: 默认值，内容不会被修剪，会呈现在元素框之外
hidden: 内容会被修剪，并且其余内容是不可见的
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

Css-Display

display属性可以控制标签元素的类型显示方式，常见的有如下选项

p{
    display: inline;
}

none: 元素不会显示，也就是藏起来
block: 元素将显示为块级元素，此元素前后会带有换行符
inline: 此元素被显示为内联元素，元素前后没有换行符
list-item: 元素作为列表显示

table: 元素作为块级表格来显示，表格前后带有换行符
inline-table: 元素作为内联表格来显示，表格前后没有换行符
table-cell: 此元素会作为一个表格单元格显示
table-caption: 此元素会作为一个表格标题显示

每个元素都有一个默认 display 值，并且可以被覆盖

.hidden{
    visibility: hidden;
}

Css定位属性

什么是文档流？

文档流，是指每个标签的元素盒子按照`html`标签编写的顺序依次从上到下，从左到右排列

块元素占一行，行内元素在一行之内从左到右排列

先写的先排列，后写的排在后面，每个盒子都占据自己的位置

CSS定位通过position属性进行规定，可选项有如下这些

static

属于css的默认值，默认定位方式，遵循标签元素的块、行特点

从上到下，从左到右

relative

是相对定位方式，会按照元素的原始位置对该元素进行移动

可以通过方向移动其位置，并且原本位置也会保留，不会被周围元素侵占

absolute

绝对定位元素，当前元素会脱离文档流，相当于飘起来了

可以通过方向移动其位置，原本位置会被周围元素侵占，而他本身将会覆盖在侵占元素之上

设置了absolute的元素将会基于当前元素的父元素进行偏移，而且这个父元素还是设置过定位的

如果父元素均未设置position属性，那么将相对于body元素进行位置偏移

fixed

固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位

不管页面如何滚动，都会固定在页面的位置，比如导航条

sticky

是一种新的定位方式，相当于包含fixed与relative结合，元素最初会被处理为相对定位

当元素距离浏览器窗口一定位置时，可以使当前元素固定在一定位置，成为固定定位

其余情况，则还可以跟随窗口滚动

设置了定位的元素的偏移方式

top: 定位元素的上外边距边界与其包含块上边界之间的偏移
bottom 定位元素下外边距边界与其包含块下边界之间的偏移
right: 定位元素右外边距边界与其包含块下边界之间的偏移
left: 定位元素左外边距边界与其包含块下边界之间的偏移

除此之外，还可以通过z-index属性设置元素的堆叠属性，当两个或多个元素因为定位导致叠在一起时

z-index
设置堆叠元素的层级，数值越大，优先级越高，未设置，默认按照最后的html代码进行操作

Css伪类

css伪类可以定义元素的特殊状态，比如设置鼠标悬停在元素上时的样式，或者控制连接访问前后的样子

基本语法

selector: link{
  property: value;
}

锚伪类

可以控制连接在不同的访问情况下的显示样式

未访问的连接

a:link {
    color: red;
    /* 没访问过，是红色*/
}

访问过的连接

a:visited {
    color: blue;
    /* 访问过，就会变成蓝色*/
}

悬停在元素处

a:hover {
    color: gray;
    /* 鼠标飘到元素上，就会变成灰色*/
}

已选择的连接

a:active {
     color: green;
    /* 你选择的连接，会变成绿色，并且绿色会笼罩你*/
}

first-child

匹配元素是另一个元素的第一个子元素

任何一个子元素，并且是第一个，且是p标签，将被如下规则匹配

p : first-child {
  color: blue;
}

比如如下的html，所有第一个元素为p的，将会生效上面的效果

<div>
    <span class="external-link"><a class="no-external-link" href="https://lienze.ltd" target="_blank"><i data-feather="external-link"></i>因为有我，所以不变</a></span>
    <p>不变</p>
</div>

<p>不变</p>
<div>
    <p>变变变</p>
    <div>
        <p>变变变</p>
    </div>
</div>
<p>不变</p>

Css-flex布局

Flex可以使元素成为一种容器，而在容器内的子元素将会成为容器成员

设置为flex属性后，子元素的float、clear和vertical-align属性将失效

通俗的来说，flex需要设置父级元素，像是这样，成为flex容器

display: flex;

在这种样式下的子元素，将会处于flex容器之中，可以支持进行便捷的布局样式控制，如排列等

当设置为容器后，容器内将会拥有两个轴，大家常称为主轴和侧轴

一般主轴是x轴方向的，侧轴是y轴方向的

父级属性

父级可以设置的属性
- flex-direction: 控制容器内子元素排列方向
- flex-wrap: 控制一行排列不下时，换行的属性控制
- justify-content: 设置子元素在主轴上的排列方式
- align-items: 设置子元素为单行时，在侧轴上的排列方式
- align-content: 设置子元素为多行时，在侧轴上的排列方式
- flex-flow: 是flex-direction和flex-wrap的复合属性

flex-direction

控制容器内元素排列方向

.box {
  	flex-direction: row | row-reverse | column | column-reverse;
}

row
row-reverse
column
column-reverse
row：主轴在水平方向，顺序排列

flex-wrap

控制多个元素的排列方式，如果一行排列不下，如何进行排列，是互相挤着？还是另起一行

flex默认的子元素，在摆放时是不会换行的，在一行放不下时，只会元素的大小进行缩放，将其适应能放到这一行大小上

nowrap: 默认值，不换行

flex-wrap: nowrap

比如在row情况下，如果一行放不下，那么第四个元素出现

容器内一行的四个元素都会有适当的宽度缩小，让其可以真正可以在一行存放得下

wrap
wrap-reverse
wrap: 换行

如果一行内元素摆放不下，那么另起一行从头开始摆放

注意: 换行之后，行之间会额外多空行

justify-content

控制子元素在主轴上的对齐方式

flex-start
flex-end
center
space-around
space-between
flex-start: 默认值，从左到右，如果主轴是y轴，那么从上到下

设置子元素在侧轴上的对齐方式，可以与justify-content属性配合使用

注意: 适合在子元素单行时使用

flex-start
flex-end
center
stretch
flex-start: 从上到下

如果希望可以将一行元素整个容器内居中，可以分别设置主轴和侧轴居中

justify-content: center;
align-items: center;

align-content

设置子元素在侧轴上的对齐方式，适用于多行子元素的情况下，也就是子元素换行属性flex-wrap: wrap;

单行情况下是无效的

flex-start
flex-end
center
space-around
space-between
stretch
flex-start: 从侧轴开头进行换行排列，并且还可以取消默认wrap换行带来的空行

flex-flow

是flex-direction和flex-wrap的复合属性

设置主轴方向子元素排列方式以及是否换行(换列)

flex-flow: row wrap;

换行并采用row方向排列子元素

子元素属性

flex: 设置子元素在剩余空间内所占的份数，默认为0
align-self: 控制子项目在侧轴的排列方式，可以让单独某个子元素拥有不一样的对齐方式
order: 元素位置顺序，越小越靠前，默认为0

flex

设置子元素在剩余空间内可以占的空间，分配的空间也是剩余的空间，主要针对于单行子元素进行布局控制

比如三个子元素处于单行，现在可以让第二个子元素占据整个剩余空间，那么可以使用

flex: 1; /* 占据剩余全部 */

一般来说，如果设置了flex属性，那么元素本身的宽的意义就不太大了，要按照flex分割好的块数进行元素的宽度维护

align-self

让某个子元素有自己的侧周排列方式，和align-items类似，可以单独让某个元素在侧周的排列位置上不同

覆盖align-items属性

align-self: flex-end;

order

定义子元素先后排列顺序，数值越小，越靠前(前后位置上靠前)，默认为0

order: 0;

上一页lab_sheet_9_zh-hans 下一页[styleguide]

最后更新于5个月前