前言

一、HTML基础

1 HTML概念

2 HTML语法

8.引入背景图片:background-image:url();

14 块级格式化上下文 (Block Formatting Context)

前言

HTML和CSS基础内容总结，包含HTML基础和CSS基础两部分。

一、HTML基础

1 HTML概念

I.HTML(Hyper Text Markup Language)称为超文本标记语言

由一套标签组成的语言称为标记语言

XHTML 可扩展超文本标记语言

II.W3C万维网联盟制定了结构html和表现css的标准

WHATWG 网页超文本应用技术工作小组，推动H5标准为目的的组织

ECMA 制定行为的标准

Web标准结构（html，xhtml），表现(css)，行为(DOM，JS)

III.首页必须命名为index.html，其他页面先在html文件夹里。

2 HTML语法

I.常规标记/标签 <div></div>

空标记<标记/><br/>

说明：a.在<>中的第一个单词叫做标记，标签，元素。

b.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

c.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

d.空标记没有结束标签，用"/"代替。

II.注释:

html注释

css注释 /*注释内容*/

js注释 /*多行*/ //单行

III.在head部分放置表现(css).

IV.在body部分放置结构（网页内容）。

3 HTML标签

I.表格中数字自动填充增加{$} 如：table>tr*5>td{$}*5 加Table为表格样式

II.段落文本内容 <p></p>.

III.空格 

IV.加粗 <b></b>或者<strong></strong>

V.倾斜<em></em>或者<i></i>

VI.强制换行 <br/>

VII.水平线<hr/> 下划线<u></u> 删除线<s></s>

VIII.HTML中有三种列表，分别是无序列表，有序列表，自定义列表。

说明：

无序列表

<ul>

....

</ul>

有序列表

<ol>

...

</ol>

自定义列表

<dl>

...

</dl>

IX.img

title="鼠标滑过显示文字" alt="图片加载失败显示文字" src="图片存储路径/图片网址"

X.超链接 <a href="链接地址">点击文本</a>

页面打开方式<target>

本页面打开_self 另开一页_blank

alt="加载失败显示文字"

XI.div

分区标签，可大可小，最常用的容器标签之一

XII.span

行内元素，文本结点，一般用于存放某一小段文本，或是某一个字

4 HTML表格

I.数据表格的作用及组成

作用：显示数据

组成：

<table>

<tr>行

<td>内容</td> /*单元格*/

....

</tr>

</table>

II.表格的相关属性

width="宽" height="高"

border=“表格边框大小”

cellspacing="单元格间距离"

bgcolor="表格背景色“

align="表格对齐方式"（left/center/right）

合并单元格属性：

colspan="所要合并单元格列数”合并列，左右合并

rowspan="所要合并单元格行数”合并行，上下合并

5 HTML表单

I.表单的作用：用来收集用户信息。

II.表单框：method提交方法提交方式（post,get)

</form>

*get和post的区别:

Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
Get执行效率却比Post方法好。Get是form提交的默认方法。

III.文本框

IV.密码框

V.提交按钮

VI.重置按钮

VII.禁用按钮 disable="disabled"(简写disabled)

VIII.默认选项 checked="checked"(简写checked)

IX.下拉菜单

</select>

X.多行文本框

XI.占位 placeholder="内容"

XII.按钮 button只起到跳转作用，不进行提交。

submit是提交按钮起到提交信息的作用

XIII.单选框

男<input type="radio" name="ral"/>

女<input type="radio" name="ral" />

单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

XIV.复选框

(disabled="disabled" :禁用)

(checked="checked" :默认选中)

二、CSS基础

1.CSS汉译:

层叠样式表，就是如何修饰网页信息的显示样式。

层叠性：给同一个元素添加相同的CSS属性，属性值会存在覆盖问题（代码执行顺序从上向下执行）

2.CSS语法：

CSS由两部分组成：选择符（选择器）例div{}，声明（属性：属性值组成）例：声明{属性：属性值；}

语法说明：

a.每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

b.属性必须放在花括号中，属性与属性值用冒号连接。

c.每条声明用分号结束。

d.当一个属性有多个属性值的时候，属性值和属性值不分先后顺序。

e.在书写样式过程中，空格，换行等操作不影响属性显示。

3.CSS样式表

a.内部样式表：内部样式的作用域是当前文件。在head标签内写style标签，在style标签内写选择器和声明。

b.外部样式表：外部样式表的作用域是有关联的所有文件。创建外部CSS文件，通过link标签引入外部css文件。例如：<link rel="stylesheet" href="路径">(多数使用)或者@import url(路径)

c.内联样式表：行内（内联）样式的作用域是当前标签。在标签里写style="属性：属性值；属性：属性值；..."

d.样式表的优先级

！important>内联>内部/外部

内联样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

4.css选择器

a.class选择器：通过class起名字，通过.名字设置样式。

b.群组选择器

语法：选择符1，选择符2，选择符3......{属性：属性值;}

说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

c.包含选择器

语法：选择符1 选择符2{属性：属性值;}

说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

d.伪类选择器

语法：

a:link{属性：属性值;}超链接的初始状态;

a:visited{属性：属性值;}超链接被访问后的状态;

E:hover{属性：属性值;}鼠标划过元素时的状态;

E:active{属性：属性值;}即鼠标按下时元素的状态;

*当这4个超链接伪类选择符联合使用时，应注意他们的顺序

e.id选择器

语法：#id名{属性：属性值;}

说明：

当我们使用id选择符时，应该为每个元素定义一个id属性；
如：<div id="top"></div>
id选择符的语法格式是“#”加上自定义的id名；
如：#top{width:300px; height:300px;}
起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
最大的用处：创建网页的外围结构.

f.通配符【*】

作用：选中页面上所有元素。常用来重置样式。

如清除默认边距

margin：0；padding：0；

}

g.选择符的权重(!important的权重最高)

css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0001
包含选择符的权重：为包含选择符的权重之和
行内样式的权重为1000 继承样式的权重为0000

5.CSS文本属性

a.字体大小：选择器（font-size:12px/14px/16px;）

属性值为数值型时，必须给属性值加单位，属性值为0时除外。

单位还可以是pt，9pt=12px；

默认情况下：1em=16px,0.75em=12px,1ppi=16px;

b.文本字体：{font-family:"宋体"，“黑体”；}

c.css加粗：{font-weight：bolder/bold/normal/100-900;}取值范围100-500不加粗，600-900加粗。

d1.text-transform:none/capitalize首字母大写/uppercase将单词全部变成大写/lowercase将单词大写转变为小写。（鼠标滑过）

e.字体风格：{font-style:normal常规字体/italic/oblique倾斜;}

说明： 1）italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。

f.水平对齐方式:{text-align:left/right/center/justify（两端对齐中文不起作用）;}

g.垂直(基线)对齐方式{vertical-align:top/bottom/middle;}

h.行高{line-height:normal/数值；}

说明：

当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；

当单行文本的行高大于容器高时，可实现单行文本在容器中齐以下任意位置的定位。

i.文本修饰：text-decoration:none/underline/overline/line-through

说明：

none：没有修饰

underline：添加下划线

overline：添加上划线

line-through：添加删除线

j.首行缩进：text-indent:..(推荐单位用em)；em参考对象是当前字号。可以取负值，只对第一行起作用。

k.字间距 {letter-spacing:value;}控制英文字母或汉字的字距。

l.词间距{word-spacing:value;}控制英文单词词距。

6 列表相关属性

a.定义列表符号样式：

list-style-type：disc(实心圆)/circle（空心圆）/square(实心方块)/none。
使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称);
定义列表符号位置：list-style-position:outside（默认外面）/inside里面;

关于列表属性的简写：list-style:;

7 边框的相关属性

a.边框：边框宽度：border-width

边框样式：border-style

边框颜色：border-color

b.边框线型：soild:实线； dashed:虚线； dotted:点状线； double:双线； none:没有边框

c.单独设置某个方向的边框属性：

border-top:上边框

border-bottom:下边框

border-left:左边框

border-right:右边框

d. transparent 为透明色

e.边框阴影：

语法：box-shadow:属性值；

属性值：x-offset(右)

y-offset(下)

blur模糊区域

spread扩展区域

color

inset向内

或者简写：box-shadow:0px 0px 0px 0 #ccc inset;

水平方向（正值为右）垂直方向（正值为下）模糊度放大颜色在里/外

f.边框图片

语法：border-image

（1）边框图片资源 border-image-source:url().默认会将图片显示在边框的四个角

（2）边框图片的裁剪 border-image-slice(0 0 0 0上右下左)

（3）边框图片的宽度,默认为边框宽度。border-image-width（一般不写）

（4）边框图片的平铺border-image-repeat 属性值：stretch拉伸（默认） repeat重复 round缩放后的重复

（5）边框图片向外延伸 border-image-outset(不能为负值) 。

8.引入背景图片:background-image:url();

png支持背景透明，jpg不支持背景透明。

设置背景图片大小：background-sia.背景图片的显示原则

容器尺寸等于图片尺寸，背景图片正好显示在容器中；
容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。

a.背景图片平铺属性

语法：background-repeat:no-repeat/repeat/repeat-x/repeat-y
no-repeat:不平铺
repeat:平铺
repeat-x:横向平铺
repeat-y:纵向平铺

b.背景图位置

background-position:
水平方向值：left/center/right或数值
垂直方向值： top/center/bottom或数值

c.背景图的固定

语法：选择符{background-attachment:scroll(滚动)默认的/fixed(固定);}

说明：记得用在有滚动条的地方；

d.各属性的缩写语法：

选择符{background：属性值1 属性值2 属性值3;}

d.background-size

e 渐变gradient（属性值）

1.线性渐变

background: linear-gradient(yellow, blue,pink,#58bc58,...); 标准语法（必须放在最后）

2.对角渐变

background: -webkit-linear-gradient(left top, red , blue);[ Safari 5.1 - 6.0 ]

background: -o-linear-gradient(bottom right, red, blue); [ Opera 11.1 - 12.0 ]

background: -moz-linear-gradient(bottom right, red, blue); [ Firefox 3.6 - 15]

background: linear-gradient(to bottom right, red , blue); [标准的语法（必须放在最后）]

3.角度渐变

(新版本旋转方向正值为顺时针，老版本旋转方向正值为逆时针）

background: -webkit-linear-gradient(0deg, red, blue);[Safari 5.1 - 6.0 ]

background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(0deg, red, blue);

[标准语法(必须放在最后）]

4.颜色结点（不均匀分布）

background: linear-gradient(red 50%, blue 70%,yellow);

5.径向渐变

background: -webkit-radial-gradient(red, green, blue);

[ Safari 5.1 - 6.0]

background: -o-radial-gradient(red, green, blue);

[Opera 11.6 - 12.0 ]

background: -moz-radial-gradient(red, green, blue);[Firefox 3.6 - 15]

background: radial-gradient(red, green, blue);

[标准的语法必须放在最后]

颜色（不均匀分布）

6.shape 参数定义了形状。

它可以是值 circle 或 ellipse。

其中，circle 表示圆形，ellipse 表示椭圆形。

默认值是 ellipse。

7.重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

属性值：

（1）数值、百分比:水平方向垂直方向;[可能发生扭曲]

（2）cover:覆盖，背景图片完全覆盖容器[可能会丢失一部分图片,不会发生扭曲]

（3）contain:包含，容器完全包含背景图片[容器可能会出现空白区域]（背景图不会发生扭曲和丢失）

*轮播图，ui一般会给一张超级大的图片

轮播图的做法：

引入背景图background-image、设置背景图大小background-size:cover、背景图定位background-position:center center;

e.background-origin 背景的定位区域

换句话说，就是background-position的原点（0，0）在哪个区域的左上角

注意区分：background-position 背景在容器的定位区域的什么位置摆放

属性值：

padding-box（padding以内，默认）

content-box内容以内

border-box边框以内

9.浮动详解

1.浮动属性

语法：float:none/left/right;

注：

*浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
*浮动后的元素会脱离标准流(不会脱离文本流)
*浮动后的元素相当于置换元素（一行显示多个、可以设置宽高）

2.盒模型的概念

盒模型是CSS布局的基石，规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。

3.盒模型的组成

内容区content、内填充 padding、边框border、外边距margin

内填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白。padding不可以写负值！

4.padding作用：改变子元素或内容在父元素的位置。

padding值是额外加在元素原有大小之上的，为保持元素大小不变，需要从元素宽或高上减掉后添加的padding属性值。

padding设置一个值的时候，为上下左右；

padding设置两个值时，为上下、左右；

padding设置为三个值时，上、左右、下；

padding设置四个值时，为上、右、下、左；

可以设置单独方向的padding

padding-top：value；上

padding-bottom：value；下

padding-left:value;左

padding-right:value;右

5.外边距margin，margin可以写负值！

作用：控制盒子跟盒子之间的间距。

说明：可单独设置某一方向边界

margin-left:左边界

margin-right:右边界

margin-top:上边界

margin-bottom:下边界

margin属性值的四种方式的表示方法和Padding相同。

10 元素类型

1.HTML元素分类为块状元素，内联（行内）元素，置换元素（行内块元素）。

2.块级元素(div、form、p、ul、ol、dl、dt、dd、li、h1-h6...

特点：独占一行显示，可以写width和height。块状元素一般为其他元素的容器，可以容纳其它内联元素和部分块状元素，例如div>p;

3.行内元素(a,b,br,i,em,label{表单标签}，img等)

特点：多个在一行显示，不可以写width和height。

内联元素支持盒模型，但个别属性不能正确显示：padding-top、padding-bottom

4.元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

作用：该属性设置或检索对象元素应该生成的盒模型的类型。

语法：display：block（块状元素）/inline（行内元素）/inline-block（行内块元素）/none（隐藏元素）

5.>该选择器只会选择第一代的元素，用法.u1>li:hover {}

6.元素添加float属性，就相当于给该元素加了display:inline-block;

11 元素定位+锚点

1.属性position

属性值：static默认值，absolute绝对定位【绝对定位默认依据(html)定位】，relative相对定位，fixed绝对定位（固定定位）

需要配合方向（top,bottom,right,left）使用。

1.1 绝对定位：如果父元素有定位，依据有定位的父元素定位（定位值不为static时）。

绝对定位会脱离布局流，不占位。

层级顺序z-index：number；默认为0，数值可以取负值，值越大在上层显示，需要配合定位使用。

1.2相对定位依据自身原来的位置定位。

子元素依据父元素定位口令：子绝父相。

相对定位不会脱离布局流，原来的位置占位。

2.元素始终在窗口上下左右居中

方法一：

position:fixed;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

方法二：

position:fixed;

left:50%;

top:50%;

margin:-100px 0 0 -100px;

说明：当一个元素有绝对定位（absolute）的情况下，如果该元素的子元素需要以该元素为参照物进行绝对定位，那么子元素可以直接加position:absolute;

3.固定定位

position：fixed

需要配合方向使用。

4.绝对定位和相对定位的区别

a参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；

b绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

5.锚点链接

命名锚点的作用：在同一页面内的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记div id="命名锚记名"> </标记div>

2)命名锚记连接语法：<a href="#命名锚记名称"></a>

6.opacity:0.5;(文字和背景都透明)（取值范围0~1）

background:rgba(,,,透明度)

7.滚动条

说明：Overflow内容溢出时的设置

属性： overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的属性值:

visible,scroll,hidden,auto.

visible 默认：其中的内容无论是否超出范围都将被显示。

hidden ：任何超出“width”和“height”的内容都会隐藏。

scroll ：无论内容是否超越范围，都将显示滚动条。

auto ：当内容超出范围时，显示滚动条，否则不显示。

8.滚动字幕

语法：

<marqueebehavior=“scroll/alternate” 滚动形式

direction="up/down/left/right" 滚动的方向

scrollamount=“value” 滚动速度

height="value" 滚动的范围

width="">

</marquee>

behavior（行为）="scroll(滚动)/alternate（晃动） direction（方向）="up(从下向上)/down（从上向下） /left（从右向左）/right（从左向右）”

scrollamount（滚动速度）="value"

height="value(上下滚动范围)" width=""(左右滚动范围)

12 图片整合

1.精灵图

使用软件CSS Satyr v1.2,exe

图片生成后，head部分用.pic写图片位置，再用.pic-$的位置。

body部分使用<span>标签使用精灵图。

2.滑动门

说明：滑动门是利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果。

特征：使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。

13 宽高自适应

1.宽度自适应

若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行（继承父元素宽度）。

应用场景：

页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。
子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度*百分比;

2.高度自适应

1）父元素高度由子元素撑开

(1)若是子元素都浮动了，父元素不会被撑开（高度塌陷）

解决办法(清除浮动):

* 给父元素添加最后一个子元素(块级元素)

{ height:0;overflow:hidden;clear:both; (clear:left/both/right)}

缺点：造成不必要的浪费

* 给父元素添加{overflow:hidden;}

缺点:可能造成需要的部分被隐藏掉

* 伪元素清除法.（万能清除法）

.clearfix::after

{content:"";

display:block;

height:0;

overflow:hidden;

visibility:hidden;

clear:both;

zoom:1;}

备注：使用时，给父元素添加类名 clearfix即可。

clear:both清除浮动 clear:left清除左浮 clear:right清除右浮

(2)预防子元素会没有内容，撑不开父元素的情况

解决办法：给父元素添加最小高度min-height。

（当内容高度小于最小高度时，按最小高度显示。当内容高度大于最小高度时，按内容高度显示）

BFC块级格式化上下文

14 块级格式化上下文 (Block Formatting Context)

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。

满足下列条件之一就可触发BFC

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block

【5】position的值为absolute或fixed

特性

【1】阻止垂直外边距（margin-top、margin-bottom）重叠

属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠

解决：触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠,display:inline-block;

【2】包含浮动元素

可以包含它内部的所有元素，包括浮动元素——因此一清除内部浮动

解决：清除浮动， overflow: hidden;，为其本身创建一个BFC

bfc的作用：

1.自适应两栏布局

2.可以阻止元素被浮动元素覆盖

3.可以包含浮动元素——清除内部浮动

4.分别属于不同的BFC时可以阻止margin合并

15 浏览器兼容

一、常用的浏览器

1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN

二、五大浏览器内核

•Trident （MSHTML）（ie 三叉戟；三叉线；三齿鱼叉）

•Gecko （壁虎 firefox）

•Presto （欧朋opera）

•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

•Blink (由Google和Opera Software开发的浏览器排版引擎)。

16 伸缩布局盒模型（弹性盒模型）

1.说明：

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。

主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

2.flexbox布局功能主要具有以下几点：

a.屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
b.指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
c.指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
d.指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
e.控制元素在页面上的布局方向；
f.按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

3.弹性盒

一、设置在容器：父元素上。

1）使其变为弹性盒：

语法：display:flex;

说明：规定子项目在父元素主轴方向（默认水平）一行显示，不会换行。侧轴方向（默认垂直）会默认拉伸。

2)设置主轴方向：

语法：flex-direction;

属性值：row 默认为水平向右

column 垂直向下

row-reverse 水平向左

column-reverse垂直向上

3）允许子元素伸缩换行：

语法：flex-wrap：nowrap；

属性值：nowrap默认不换行、wrap换行

4）设置子项目在容器主轴方向的对齐方式

语法：justify-content：属性值；

属性值：flex-start 默认在主轴方向起点位置对齐

flex-end 在主轴方向终点位置对齐

center 中间

space-between 将空白区域平分在子项目之间

space-around 将空白区域环绕在子项目两边

5）设置子项目在其所在行的侧轴对齐方式

语法： align-items（单行）：属性值；

属性值：stretch 默认拉伸

flex-start 子项目在其所在行的起始位置摆放

flex-end 子项目在其所在行的结束位置摆放

center 中间

6）设置子项目在侧轴方向的对齐方式

语法：align-content(控制多行)：属性值；

属性值：flex-start 默认在所在行起点位置对齐

flex-end 在所在行终点位置对齐

center 中间

space-between 将空白区域平分在子项目之间

space-around 将空白区域环绕在子项目两边

二、设置在子项目上：

1）设置子项目在父元素主轴方向的比份；

语法：flex:number;

2）设置单个子项目在其所在行的侧轴对齐方式；

语法：align-self：属性值；

属性值：stretch 默认拉伸

flex-start 子项目在其所在行的起始位置摆放

flex-end 子项目在其所在行的结束位置摆放

center 中间

3）设置子项目的顺序；

语法：order:number;

说明：写了order的排在没有order属性的元素后面。

写了order的，属性值越小的在越前面；

没写order的属性值默认为零，order可以写负值。

4）设置子元素压缩；

语法：flex-shrink: 0/1;

属性值：0---不压缩；

1---压缩；

17 多列布局

说明：css多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。跟瀑布流效果相仿。

核心属性：（一般加在body上）

column-width 列宽，定义每列列宽；类似于最小宽度min-width； auto 自适应；

column-count 列数，定义分列列数；最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定

column-gap：定义列间距；不能为负数；

column-rule：定义列边框；与定义边框一样：2px dashed #ccc;

column-span：属性值；定义多列布局中子元素的跨列效果；通常用于标题；

属性值：none：不跨列； all：跨所有列；

当出现图片与下方标签不配对时，使用break-inside: avoid;（断点）这类属性加在图片的上级父元素上；

18 媒体查询

1.说明：页面结构简单使用

2.屏幕分界点：

超小屏幕xs （移动设备）768px以下

小屏设备sm 768px-992px

中等屏幕md 992px-1200px

宽屏设备lg 1200px以上

3.语法

1）@media screen and (条件：最小宽度，最大宽度等)

2）min-width 若当前页面宽度大于min-width的值时，则样式生效。注意！链接的css文件的min-width应从小写到大;

19 移动端布局

操作顺序：

1.链接相应的CSS、JS文件。注意所链接文件顺序。

使用其他编码器时，注意设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.确定设计稿大小，改相应rem、js参数；（插件：cssrem）

640px设计稿/rem、js（function）为640，插件（font-size）改为64，

750px设计稿/rem、js为750，插件改为75。

3.设置页面为高度自适应；

{height：100%}

4.根据测量布局；

5.当整体产生滚动条时，设置position：absolute；脱离布局流

6.px、em、和rem的区别

1）概念

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

2）特点

px特点：字体大小固定。

em特点：

a. em的值并不是固定的；

b.em会继承父级元素的字体大小。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em）,区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

19 过渡transiton

1.transition-property规定应用过渡的 CSS 属性的名称。

2.transition-duration定义过渡效果花费的时间。默认是 0。

3.transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。

a.ease规定慢速开始，然后变快，然后慢速结束的过渡效果
b.linear规定以相同速度开始至结束的过渡效果
c. ease-in规定以慢速开始的过渡效果
d. ease-out规定以慢速结束的过渡效果
e.ease-in-out规定以慢速开始和结束的过渡效果
f.transition-delay规定过渡效果何时开始。默认是 0。

语法：transition:all 2s linear 3s;

20 2D转换transform

1、translate( X,Y)偏移方法

[水平（正值为右），垂直（正值为下）]

2、rotate(0reg，0reg)旋转方法(reg为角度)

3、scale( X,Y)缩放方法，x,y为倍数，可放大可缩小

4、skew(Xdeg,Ydeg)扭曲方法

21 3D变换

1.transform之3d移动变换: （加在父元素上）

语法：transform:translate3d(x,y,z)

z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。

transform:translateY() translateZ(z) 【女神上来】

2.transform-style规定变换的样式（加在父元素上）

当写3d模式时，要加上这句语法，开进图片3D状态。

属性值：flag平面（默认） preserve-3d保持3d变换 transform-style: preserve-3d 保持3d变换

3.设置观察的距离，

景深 perspective:value(父元素) 【案例女神向我走来】

4.transform之rotate3d

transform:rotate3d(x,y,z,角度)

此时x、y、z取值为0或1，0代表不旋转，1旋转

transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度)

备注：左手定律，大拇指指向轴的正方向，其他手指弯曲的方向为旋转的正方向【体操】

5.立方体改变盒子变换的基准点

语法：perspective-origin ：（，）观察的基准点(角度deg)

属性值：第一个值为水平方向，正值为往右；第二值为垂直方向，正值为往下；

语法：transform-origin：（，）改变盒子变换的基准点。

22 动画

1.自定义动画

（1）通过@keyframes指定动画序列；
（2）通过百分比将动画序列分割成多个节点；
（3）在各节点中分别定义各属性
（4）通过animation属性将动画应用于相应元素；

2.animation属性

(1)animation-name动画名字(必须)
(2)animation-duration动画播放时间（必须）
(3)animation-timing-function 动画播放的形式
属性值： linear线性 ease ease-in steps(n)
(4)animation-delay 动画播放的延迟
(5)animation-iteration-count 动画播放的次数
infinite无限次播放
(6)animation-direction 动画是否轮流反向播放
属性值:alternate交替播放 reverse反向播放
alternate-reverse 轮流反向
animation:1 2 3 4 5 6 ;（缩写）

补充：

(1)animation-play-state:paused; 暂停动画
(2)animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。属性值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

三，总结

除语义化标签外，以上便是现阶段学西html和css的主要学习内容

原文链接：https://blog.csdn.net/m0_57185539/article/details/123245479