html，css基础

文档基础结构

DOCTYPE：

document type 声明文档类型 告诉浏览器以何种规范解析当前文档
html：以H5的标准解析文档

结构标签

<html></html>作为页面中一个最大的标签，包裹住其他小标签，称其为根标签<head></head>文档的头部，在这其中必须包含tilte标签<title></title>文档的标题，给页面设置标题<body></body>文档发主体，页面中的内容基本都放在改标签里。

html：

根标签，网页中最大的标签，有且仅有一个。所有的标签必须写在HTML内lang="en" language：定义当前文档语言类型en：english 英语

head：

head：头标签，设置字符集，说明性的标签，页面标题，外部文件，内部样式表等...charset:一般写在head标签内的第一行，保证页面标题不会出现乱码。UTF-8:一种通用的编码方式，解决中文乱码。

body：

body:设置网页的主体内容。

基础标签

标题标签：h1最大，h6最小。默认样式：上下外边距，字体大小，字体样式。
emeat语法：h${标题$}*6 $:从1开始生成 *n 生成到n.{}:定义标签中的文本。p：段落文本标签，块元素，所有的文本标签都是行内/行元素，p除外。默认的外边距，上下16px --><p>段落标签</p>div:标准的块标签，默认宽度100%，高度由内容撑开。(没有内容高度为“0”)行内元素：宽高均由内容决定。span:普通文本标签。

属性

contenteditable="true"//定义可编辑文本
<bdo dir="rtl">大卫佛海v哦i文化</bdo>//显示位置，rtl即right to left从右往左
draggable="true" //定义可拖拽文本
target="_blank"  //打开新窗口
title="首先是教学设计"   //悬浮提示

文本标签：

<span>普通文本</span><strong>语义化加粗文本，强调文本的重要性。</strong><b>加粗文本，不具有强调意义。</b><em>具有强调意义，表示文本的重要性。</em><i>斜体文本，不具有强调意义。</i><del>具有强调删除意义，表示被弃用的内容</del><s>删除线文本</s><ins>具有强调意义，表示新增的内容</ins><u>插入文本</u><small>小号字体</small><big>大号字体</big><!-- 计算机输出文本 --><code>电脑自动输出</code><kbd>键盘码</kbd><samp>计算机代码样式</samp><var>变量</var><pre>预格式文本。尊敬的XXX:pre标签可以定义有格式的文本，文本中的所有空格以及换行都可以显示。其他标签之内的文本与换行只能编译为一个英文空格符，标签之间的换行也会被编译为一个英文空格符。真厉害。亚亚子❤️</pre><sup>上标</sup><sub>下标</sub>

语义化结构标签

语义化结构标签：根据内容的结构"内容语义化"，选择合适的标签"标签的语义化"。作用:便于开发者阅读，让浏览器爬虫和机器更好的解析。优点：1. 在没有css样式的情况下，页面也能呈现出很好的内容结构"代码结构".2. 代码结构清晰，方便阅读和团队合作开发。3. 方便搜索引擎识别页面结构，有利于SEO(搜索引擎优化)。4. 方便其他设备解析(屏幕阅读器，盲人阅读器，移动设备)，以语义化的方式渲染页面。<nav>标记导航，仅对页面中重要的链接群使用</nav><header>页眉，通常包含LOGO，主导航，全站链接以及搜索框...</header><main>页面主要内容，一个页面只能使用一次。</main><aside>侧边栏，定义所有内容之外的部分或之外的一组链接等。</aside><section>区域，一段，定义页面中的章节或块，代替div</section><footer>页脚，只有当父元素是body时才是整个页面的页脚</footer>

超链接和路径

 a:超链接 href：url,网页链接。target:设置新超链接的打开方式。_self:默认值，默认在当前标签页打开超链接。_blank:新建标签页打开超链接。title:光标悬停时的提示文本。相对路径:./:查找同级文件../:查找上级文件../../:查找上两级文件绝对路径:C:/Users/mac/Desktop/开课第一天/02-标签.html

图片

img:图像、图片src:图片资源路径，支持网络图片或本地图片。alt:图片加载失败时的提示文本

列表标签

列表标签ul:unorder list 无序列表li：list 列表选项。ol:order list 有序列表dl：define list 自定义列表dt：define title 自定义标题dd：define details 自定义详情

表单标签

表单标签 form 创建表单。action：定义表单数据发往何处。method：定义发送数据的方式。get/post。单行文本输入框 type:定义表单的类型text：文本输入框password:密码输入框number:数字输入框tel:手机号码输入框email:邮箱输入框color:颜色选择器file:文件选择器

type属性

<input type="text"><input type="password" name="" id=""><input type="number" name="" id=""><input type="tel" name="" id=""><input type="email"><input type="color"><input type="file"><!-- 年月日选择器 --><input type="date"><!-- 本地年月日时选择器 --><input type="datetime-local"><!-- 周选择器 --><input type="week"><!-- 月选择器 --><input type="month"><p><!-- 单选，必须定义相同的name，才可以实现单选。 -->男 <input type="radio" name="sex">女 <input type="radio" name="sex"></p><p><!-- 多选 --><input type="checkbox"></p><!-- 进度条 --><input type="range"><!-- 图片按钮 --><input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"><button>普通按钮</button><!-- 提交按钮，value:定义按钮的值。 --><input type="submit" value="登录"><!-- 按钮 --><input type="button"><!-- 重置按钮 --><input type="reset" value="清空"><!-- 隐藏的输入框 --><input type="hidden">

列表选择器：

select：列表选择器size:属性用于定义多选时，所显示选项的个数，默认值：4.multiple：允许多选。optgroup：选项组label:定义选项组标题。option：选项value：选项的值.disabled:属性用于设置禁用的标签。selected:属性用于定义默认选中项。HTML中定义，属性与值相同时，可以省略属性值。name:属性用于定义表单控件的名称。

多行文本输入框：

多行文本输入框 name:定义表单控件的名称。cols:一行所显示英文字符的个数，显示的列数。rows:显示的行数(取值为英文字符的行数)fieldset:对表单内的元素分组。legend:对不同的分组进行文字说明。<fieldset><legend>标题</legend>datalist:此标签与文本输入框结合，相当于一个下拉框，input既可以手动输入，又可以下拉选择。将datalist的id属性值赋值给input的list属性，即可实现。<datalist id="record"><option value="HTML5.0"></option><option value="CSS3.0"></option><option value="Javascript"></option></datalist>

CSS样式

1. 行内样式表。2. 内嵌样式表。3. 外联样式表。引用方式的优先级。正常情况下：行内样式 > 内嵌样式 > 外联样式非正常情况下：内嵌样式和外联样式会有浏览器的执行顺序问题(最后引用的会覆盖之前的样式。)

CSS选择器

>父子选择器  父元素>子元素
空格代表后代选择器
~ 代表兄弟选择器
+ 相邻兄弟选择器

浏览器是怎么解析css选择器的：-css选择器的解析是从右往左解析的。如果从左至右匹配，发现不符合规则需要回溯，会损失很多性能。-若从左至右匹配，先要找到所有的左边第一个节点，对应的每个节点上寻找其父元素节点直到找到根元素或满足条件的匹配元素，则结束这个分支遍历。

伪类选择器

  -根据序号查找元素，称之为 序号选择器。-根据类型查找元素

序号选择器

:nth-child(n)根据：前指定的标签选择第n个为此标签的元素。如果是even(2n+1)就是偶数,odd(2n+1)就是奇数(正数)
:nth-last-child(n)倒数第n个子元素
:last-child(n)选择最后一个：前指定的子元素。
:first-child(n)选择第一个：前指定的子元素。
:only-child 选择唯一的子元素。--------以下根据标签类型选择
:first-of-type根据标签类型选择第一个元素。
:last-of-type根据标签类型选择最后一个元素。
:nth-of-type(n)根据指定标签类型选择第n个标签(正数)
:nth-last-of-type(n)根据指定标签类型选择倒数第n个标签(倒数)

扩展

1、:first-child：表示选择第一个子元素，如 .box1 p:first-child 表示选择box盒子中的第一个p2、：nth-child():表示选择任意序号的子元素，如 .box2 p:nth-child(3)表示选择box2盒子中的第三个p。另外nth-child还可以写成an+b的形式，如 .box2 p:nth-child(3n+2)表示从第二个p开始，每三个p选择一个 ps：2n+1等价于odd及奇数，2n等价于even及偶数3、:nth-of-type：表示选择同种标签指定序号的子元素，如 .box3  p:nth-of-type(3)表示box中p类型的第三个p4、:nth-last-child()：表示倒数选择5、:nth-last-of-type()：表示倒数选择

交集选择器

每个选择器都有自己的权重值，简称权值，权值越大，优先执行。
id选择器>class选择器/伪类/属性>元素选择器
100      10          1选择器优先原则：!important(10000) > 行间样式(1000) > ID 选择器(100) >class 选择器｜伪类选择器｜属性选择器(10) >元素选择器｜伪元素选择器(1) > 通配符选择器｜子选择器选择器｜相邻兄弟选择器(0)权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。选择器权值可以相加
!important(无条件优先执行，权重10000)交集选择器：选择器连接使用，多个选择器选择一个标签。

并集选择器

, 用逗号分隔多个选择器，同时选择多个标签*:not(body,html)意思指选择除了html，body标签之外的其他标签

伪元素选择器

::selection   定义光标选中时的样式
::first-letter  为某个元素中的第一个字符设置样式，有符号会连带符号，可以加个空格解决
::first-line    定义首行文本的样式
::placeholder   定义input的placeholder属性的样式
::before {content:""  //content必须设置，如果不需要插入文本可以为""} 在某个元素之前插入一些内容
::after 在某个元素之后插入一些内容
//如果同时使用了before和first-letter两个为元素，第一个字要从before里面的内容开始算起
//first-letter和first-line两个伪元素不适用于行内元素，在行内元素内两个选择器均失效
//first-letter的优先级高于first-line

target目标伪类选择器

实现点击a标签，改变div(目标元素可点击)的样式 如何实现？绑定a与div，将div的id属性值赋值给a标签的href属性。
target目标伪类选择器查找目标元素时触发：target

焦点取消默认样式

:focus{outline: none;
}

颜色明暗亮度调节

opacity:取值0-1，越靠近1越亮

背景图片

定义背景图片如何重复显示。repeat:重复显示no-repeat:不重复显示repeat-y:重复y列repeat-x:重复x行

background-position: x轴 y轴;取值：number(px/%)、关键字。关键字：left right top bottom center
background-position: center center;
vh:view height 视口高度(可视区域的高度) 100vh=可视区域总高
vw:view width 视口宽度(可视区域的宽度)  100vw=可视区域总宽
background-position-x:-100px(50%)
background-position-y:300px(50%)

background-size:宽 高；
取值： number(px/%)、关键字 关键字：cover contain一个值，值为宽度，高度默认等比例缩放（默认值为auto）contain：背景图片等比例缩放，直至高度或宽度填充满整个容器为止，容器可能留白cover：背景图片等比例缩放直至高度和宽度填充满整个容器为止，图片可能显示不完全

background-attachment: fixed;固定背景图片，不随页面的滚动二滚动，此属性只对body有效

两个背景图片的设置css3之前，一个元素只能设置一个背景图片。
使用方式：
1.定义多重背景时，需要给background-image设置多个url(),多个值以","隔开。
2.每个图片都具有背景图的任何属性，每个属性都需要定义多组值，一组值对应一张背景图，多组值之间使用","隔开。
background-image: url(图片1),url(图片2);background-position: left bottom,0 0;background-size: 500px auto;background-repeat: no-repeat,repeat;

背景渐变

background-image: linear-gradient(red, black)
linear-gradient（渐变方向，颜色，颜色......）线性渐变
渐变方向:to bottom从上往下(默认值)to top从下往上to left从右往左to right从左往右to top left从左上角，后面可以依次推
deg 角度取值 0deg -360deg
六点方向开始顺时针方向，0deg即六点方向正下方，从下往上看90deg即九点方向正左方，从左往右看180deg即十二点方向正上方，从上往下看270deg即三点方向正右方，从右往左看

径向渐变

radial-gradient(中心形状单词，颜色，颜色....)
如:  background-image: radial-gradient(circle,red,blue)可以定义每种颜色的分布空间，如下例子：
background-image: radial-gradient(circle,red 20%,blue 10%,blue 30%)

文本样式

@font-face 自定义字体
自定义字体名称 font-family
src:url()引入字体
字体默认大小为16px。
字体粗细font-weight：bold（400-700，400和noemal是正常字体，700粗体）
text-align：justify  文本两端对齐
文本水平对齐方式：laft左对齐right右对齐center居中justify多行文本两端对齐
line-height:   行高，文本垂直居中，值与边框高度相等，行高没有单位时，取值为font-size的倍数。单位%，相对font-size
letter-spacing：  字间距
空格在css中叫做“后代选择器”在html中叫做“空格分隔符”
text-indent   文本缩进  rem相对根元素  em相对父元素text-decoration-line: ;文本装饰线的位置，必须值underline：下划线；linr-through：中划线/文本贯穿线overline：上划线text-decoration-color: ;文本装饰线的颜色，可选值，不定义时默认取值coler的颜色text-decoration-style: ;文本装饰线的样式，可选值。不定义时默认值为solid(实线)。
dotted(点线) dashed(虚线)double(双线)wavy(波浪线)none(无样式，去掉下划线)以上三个属性的简写方式，叫做“复合属性”text-decoration：bule wavy underline 3px；颜色，样式，位置，边框大小。最后一个值可能不被浏览器支持，删除即可，但一部分可以支持

大小写转换

text-transform：capitalize:首字母大写uppercase：转换为大写lowercase：转换为小写

方向逆转

direction: rtl;从右往左right to left ltr：从左往右left to right
direction:定义文本的阅读方向，与html中的dir属性一致unicode-bidi:; 可以改变direction不能逆序的情况，对direction的一个增强normal:默认值bidi-override:文本的一个重写

排列方式

writing-mode:;  定义文本在水平或垂直方向的排布方式值：vertical-lr:文本垂直方向排列，从左往右读(IE浏览器不能用此值，可以用tb-lr)vertical-rl文本垂直方向排列，从右往左读(IE浏览器不能用此值，可以用tb-rl)horizontal-tb:默认值，文本水平方向排列，从上往下阅读
white-space:; 属性定义空白符如何显示值：pre:多个空格不会合并;换行符有用,且文字不会受到盒子宽度的影响.文本怎么写就怎么显示，保留文本所有的空格和换行（文本一行排列不下不会自动换行）pre-line：只保留换行不保留空格pre-wrap：保留空格与换行，文本一行排列不下时会自动换行nowrap; 强制内容在一行显示，文本不换行text-overflow:  文本溢出如何显示。ellipsis：溢出的文本显示为省略号溢出文本显示省略号的条件：1. 固定的宽度2.文本不换行3. 溢出隐藏4.溢出文本为省略号

文本阴影

text-shadow:;  文本阴影：值一：X轴阴影，正值左侧，负值右侧阴影。必须值值二：Y轴阴影，正值底部阴影，负值顶部阴影。必须值 值三：阴影的模糊程度，值越大阴影越模糊。可选值值四：阴影的颜色，可选值

盒子模型

外边距

包括 margin-border-padding-contentmargin：外边距，盒子之间的距离。取值1-4个值一值：上下左右外边距二值：上下 左右外边距三值：上 左右 下外边距四值：上 右 下 左外边距margin定宽居中只对块元素有效，行和行内块元素无效bottom：下外边距top：上外边距left：左外边距right：右外边距

边框

border-color:;颜色，可选值width:;宽度，可选值style:;样式，必须值(double：双线   dotted：点线   dashed：虚线  soild：实线)复合写法：border：bule  dashed  10px;左边框颜色：border-left-color:;
下边框：border-bottom:none;  去边框
text-align：justify 文本两端对齐注意：设置border / padding会改变盒子的总宽高度
默认情况下盒子总宽高的计算方式。width=内容宽height=内容高总宽=左右边框+左右内边距+内容宽总高=上下边框+上下内边距+内容高box-sizing：属性用于修改盒子的计算方式content-box：盒子默认计算方式border-box：修改盒子的计算方式（固定盒子总宽高，不会被填充撑大）修改后盒子总宽高的计算方式

边框圆角

border-1:;值为半径，取值100%为圆一组值可以用/分开，比如50px/100px。/前后为两个半径值画的圆焦点连接即为样式10px 20px/10px 20px相当于10px/10px 20px/20px即两组半径画的圆相交而得10px 20px 30px 40px/10px 20px 30px 40px相当于10px/10px 20px/20px 30px/30px 40px/40px即四组值半径画的圆相交而得取值50px;即x轴50px，y轴50px为半径画圆，取值50px/100px即第一个圆50px，第二个100px为半径画圆取四个值：一个值：四个角两个值：左上右下  右上左下三个值：左上  右上左下 右下四个值：左上 右上 右下 左下border-top-left-radius：定义左上圆角（其余角也可以这样定义）

盒子阴影

box-shadow值一：x轴阴影，正值右侧阴影，负值左侧阴影值二：y轴阴影，正值底部阴影，负值顶部阴影值三：阴影的模糊程度 值越大阴影越模糊值四：阴影的宽度。值五：阴影的颜色值六：inset 内层阴影

外边距合并/塌陷

外边距的合并发生在块级元素之间。(浮动，绝对/固定定位元素除外)只会在垂直方向发生，水平方向不影响1. 相邻的兄弟之间的外边距合并2. 父元素的第一个子元素的上外边距/最后一个子元素的下外边距会穿透父元素，表现为父元素的外边距两个外边距的值设置/margin合并规则：同为正值取最大一正一负值相加同为负值取最小

margin合并解决方案：块状格式化上下文：BFC如果一个元素符合BFC的条件会成为一个独立的容器，容器内部的元素会垂直的沿着其父元素的边框排列，和外部元素会不影响触发BFC的条件：1. 浮动元素：float 除了none之外的值。2. 绝对/固定定位元素：position：absolute/fixed3. display值为inline/inline-block，只要不是块级元素4. overflow：除了visiable之外的值(hidden/auto/scroll)都可以解决方案一：给父元素设置为块状格式化的元素BFC(触发BFC条件)
解决方案二：给父元素添加边框(border)
解决方案三：给父元素添加padding(值不小于零)

元素的特性

根据元素不同的特性可以将元素划分为三类：1.行元素(文本类标签（不含p标签）)多个行元素相邻时会在同一行排列，一行排列不下会自动换行。默认宽高皆由内容决定设置宽高无效可以转换块或者行内块元素margin上下无效，左右有效2.块元素(结构标签，标题标签，p标签，列表标签，td....)默认情况下，块元素独占一行，垂直排列默认宽高100%，高度由内容决定可以设置宽高可以转换行或者行内块元素margin上下左右均有效3.行内块元素(input button img taxtarea select)多个行内块元素相邻时会在同一行排列，一行排列不下自动换默认宽高皆由内容决定(一部分标签例外)可以设置宽高只能转换块元素不能转换行元素margin上下左右均有效

元素之间可以相互转换(行内块不能转换为行内)display：inline：(转换为行元素)block：(转换为块元素，或者显示元素和none互用)none：(隐藏元素)inline-block：(转换为行内块元素)

定宽居中

定宽居中只对块元素有效

margin左右left/right取值为auto左侧auto表示水平剩余空间在元素左侧使元素居右右侧auto表示水平剩余空间在元素左侧使元素居左
auto取值只对块元素有效左右同时取值auto元素水平居中，或margin:0 auto;行，行内块元素水平居中需要给父元素设置样式，单独给行，行内块元素设置无效

浮动布局

float：浮动东布局，可以使浮动的元素向左或向右移动，直到遇到父元素的边界或浮动的兄弟元素。left：向左移动right：向右移动
浮动的元素会脱离文档流，如果父元素没有定义高度，这时父元素的高度为零，父元素之后的元素布局会发生改变。文本会避开浮动的元素，形成图文环绕的效果。float-left元素从左往右排列
float-right元素从右往左排列

清除浮动

浮动的元素脱离文档流会影响布局，所以要清除浮动
清除浮动的方法:1.给父元素添加高度（适合父元素有固定高度的情况）2.给父元素添加overflow-hidden;（注意：溢出的内容会隐藏，适用于不隐藏的情况）3.给使用浮动的元素之后添加一个空块，为其设置clear:both;（弊端：页面使用较多会出现较多的空的块元素)

基线对齐

 什么是基线？元素水平排列时，垂直对齐的位置叫做“基线”。空块/img的基线在底部。文本的基线在四线三格的第三条线。（baseline（此值只针对有文本的属性）基线在四线三格的第三条线)多行文本元素的基线在最后一行文本四线三格的第三条线。

定位

position:static 静态定位默认的定位方式，静态定位的元素在文档流内从上往下(块)、从左往右(行/行内块)排列。元素默认的定位方式叫做“流式布局”relative 相对定位absolute 绝对定位fixed 固定定位固定定位，将元素固定到指定的位置，不随页面的滚动而滚动。参照物：浏览器可视区域。使用left，right， top，bottom属性偏移元素的位置top/left优先级高于 right/bottomsticky 粘性定位

calc(计算函数)

支持计算不同单位的值，运算符与值之间必须使用空格隔开。先乘除后加减，小括号修改运算优先级
left：calc(50% - 100px);效果等同于
left：50%
margin-left:-100pxtop：calc(50% - 100px);效果等同于
left：50%
margin-left:-100px

相对定位

relative：相对定位，定位的元素不会脱离文档流使用left、right、top、bottom属性偏移元素参照物：相对定位元素初始位置

绝对定位

absolute：绝对定位，定位的元素会脱离文档流使用left、right、top、bottom属性偏移元素参照物：自定义。如何让自定义：1.必须是绝对定位的上级元素2.上级元素必须要有定位方式（static除外）绝对定位欸的元素会逐级向上查找有定位方式的上级元素，以有定位方式的上级元素作为参照。如果上级元素都没有定位方式，则最终查找至body为止。以body作为参照。非定位元素，百分比相对于父元素绝对定位元素，百分比相对参照物如果父元素本身没有定位方式则为其添加相对定位，因为相对定位不会脱离文档流，不会影响布局如果上级元素本身有定位方式，则无需为其修改/添加

粘性定位

sticky:可以被认为是一个固定定位和相对定位的结合。在视口滚动到小于top值时，元素是一个相对定位，大于top值时，元素为固定定位注意：1.需要在嵌套中使用粘性定位（非body嵌套）父元素的高度不能低于粘性定位的高度2.必须指定top属性（0也可以）3.粘性定位元素只在其父元素之内生效。4.父元素不能使用overflow：hidden

flex布局(弹性布局)

flex布局，又称弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局采用flex布局的元素，成为flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。容器内存在两条轴线，水平的主轴和垂直的交叉轴。
display:flex;定义水平方向，水平方向就是主轴。垂直方向就是交叉轴定义垂直方向，垂直方向就是主轴。水平方向就是交叉轴主轴和交叉轴是根据自己定义的，可变的。默认水平的主轴和垂直的交叉轴注意：设为flex布局后，子元素的float，clear和vertical-align，属性将失效

容器属性（父级）

flex-direction:;属性用于定义项目的排列方向，默认值：row 主轴为水平方向，起点在左端row-reverse：主轴为水平方向，起点在右端column：主轴为垂直方向，起点在上端column-reverse：主轴为垂直方向，起点在下端justify-content:属性用于定义项目在主轴的对齐方式。flex-start:项目主轴起点对齐，默认值。flex-end：项目主轴终点对齐。center:项目主轴居中。space-between:项目在容器中两端对齐，项目之间间距相等space-around：项目之间间距相等，是项目到容器两端的两倍。space-evenly:项目之间间距和项目到容器两端间距相等align-items：属性定义项目在交叉轴的对齐方式normal:默认值，项目不设置高度，高度=容器高度。baseline:对齐文本的四线三格的第三条基线对齐。flex-start:容器交叉轴起点对齐flex-end:交叉轴终点对齐center:交叉轴居中对齐。多行弹性布局，弹性布局的项目默认不换行flex-wrap:;属性用于定义项目的换行方式nowrap:默认值，单行，项目不换行wrap：多行，项目换行，首行在上方wrap-reverse：多行，项目换行，首行在下方align-content:;属性用于定义多条轴线在交叉轴的对齐方式stretch：默认值，当项目没有高度时，多行的高度占满整个容器。有高度时，无效.flex-start:多条轴线交叉轴起点对齐。flex-end:多条轴线交叉轴终点对齐。center:多条轴线居中对齐space-between:  轴线两端对齐，轴线之间的距离相等             space-around:   轴线之间间距相等，是轴线到两端的两倍space-evenly:间距均相等注意：此属性只对多行有效
------------------------------------------------------
justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置）， space-evenly将剩余空间平均分割，例如有5个元素，这样就有6个相同宽度的间隔空间，间隔空间的数量等于元素的数量加一。有5个元素，justify-content: space-between最左边和和最右边的元素分别占据最左边和最右边的空间，然后剩余空间平均分割，这样就有4个相同宽度的间隔空间，间隔空间的数量等于元素数量减一。

项目属性（后代）

order:属性用于定义项目的排列顺序，值越小项目越靠前(支持负值)，默认为0
align-self：属性允许单个项目有与其他项目不同的对齐方式。align-self属性的优先级>align-items属性
flex-grow:属性用于定义项目的放大比例，主轴存在剩余空间时项目才会放大，
如果每个项目的值都为1时，将均分主轴剩余空间
flex-shink:定义项目的缩小比例，默认值为1，表示当空间不足时。所有项目等比例缩小，值为0时，表示当空间不足时。项目不缩小，取值越大，表示当空间不足时，项目缩小的越快越厉害
flex-basis:属性定义项目所占据的空间，优先级高于width。

显示与隐藏

display:none   隐藏/不占据原来空间
display: block;  显示visibility:hidden   隐藏/占据原来空间
visibility: visible; 显示opacity:0; 透明/取值0-1，0为完全透明，1为不透明，0.5半透明，后代元素都会继承，rgba只改变背景颜色的透明度
opacity: 1; 显示

精灵图

一张小图片填满容器。小图片的高度=100%*100%
大图的宽度100%*n个小图宽度
大图的高度100%*n个小图高度设置精灵图的好处:将多张较小的图片放在一张大图上，减少浏览器对服务器的请求

z-index堆叠层级

z-index：堆叠层级，对非定位元素和静态定位无效
取值正值，在没有设置层级的元素之上
取值负值，在没有设置层级的元素之下
只能取整值，不能取小数
值越大，元素越靠上

2D转换&过渡

2D转换平移 缩放 旋转transform：2d转换，使...转换/变化translate:(X轴，Y轴)平移  translateX:水平X轴平移 正值向右 负值向左translateY垂直Y轴平移  正值向下 负值向上translateZ往前平移  正值向前 负值向后(只在三维空间有效)origin:属性定义转化的基准点取值：center top/bottom left/right/number类型的值rotate(360deg);旋转，单位deg正值，顺时针旋转负值，逆时针旋转  可以和origin结合取点scale();缩放，值>1——>放大  值<1——>缩小一个值的话，影响宽高两个值的话，值一宽度，值二高度     transform: skew(30deg, 120deg);设置倾斜效果

过渡transition-property: 规定应用过渡的css属性。可以指定某个css属性应用过渡效果，如width，height；可以指定所有css属性应用过度效果，alltransition-duration:设置过渡的时间  单位s/ms opacity:.1;设置透明度transition-timing-function: ease;缓动函数"时间曲线”ease：默认值，逐渐减速ease-in：加速ease-in-out：先加速后减速ease-out：减速linear：匀速transition-delay: 2s;设置过渡效果延迟的时间以上四个属性的简写复合属性transition：值顺序：过渡所花费的时间 过渡延迟时间 过渡的css属性。 缓动函数"时间曲线”  应用过度的时间和应用过度的属性必须值 后俩值无顺序，

filter滤镜

filter：滤镜，给图片添加滤镜效果值：grayscale():给图片添加特效，变成灰色  范围0-100%，值越大，图片越灰sepia():褐色，图片为复古风，范围0-100%，opacity():图片透视，取值0-1，0完全透明，0.5半透明，1不透明hue-rotate()：色相转换，用来改变图片的色相，单位degcontrast()：明暗的对比度，明暗程度，值越小图片越暗，值越大图片越亮brightness():曝光率，值越大颜色越亮invert():反色，类似照片底片效果blur():图片的模糊程度，值越大越模糊，pxdrop-shadow(x轴10px，y轴10px，模糊度10px，颜色red)：可以根据图片轮廓添加阴影，值和盒子阴影一样

3D转换

 transfrom-style:preserve-3d;设置元素是在2d平面内，还是三维空间中值：flat：默认值，指定元素在2d平面内preserve-3d;指定元素是在三维空间内translateZ():Z轴平移  正值向前 负值向后（需要定义观察者距离和三维空间）backface-visiblity:的属性定义元素的背面/反面 面向观察者时是否可见值：visible，默认值，背面可见hidden，背面不可见perspective:100px;设置透视距离，观察者到平面的距离,值越大距离越远，值越小距离越近perspective-origin:定义观察者的位置，类似transform-origin属性；transfrom：rotate3d(1,1,1,90deg)：前三个值代表xyz轴，0表示不旋转，1表示旋转，后面是旋转的角度

响应式布局-媒体查询

什么是响应式布局？

响应式布局指的是同一个页面在不同的屏幕尺寸下有不同的布局方式。传统的开发方式是pc端开发一套移动端开发一套。而使用响应式布局只要开发一套就够“缺点是css样式较重”。

响应式布局实现方案 —— 媒体查询

CSS3 Media Query(媒体查询) @media可以根据不同的屏幕尺寸设置不同的样式，页面适用于PC端，移动端“在调整浏览器试图可以查看”。媒体查询可以用于检测设备“viewpoint(视图窗口)的宽度和高度，旋转方向(横屏或竖屏)，分辨率大小”。

width与device-width

width通常指的是视口宽度。device-width指的是屏幕的物理宽度。
例如：一部手机的屏幕分辨率是1136 * 640，竖屏的device-width是640，横屏时是1136，移动端的屏幕基本上都是全屏的所以一般width=device-width。但是height与device-height的情况不一样(浏览器上方的地址栏和下方的工具栏不算近视图窗口高度之内)，所以一般的媒体查询不采用height。

语法规则

直接在css样式中添加

@media mediatype 操作符 (media featrue) { CSS-code}
以@media开头，然后指定设备类型“mediatype”，接着添加操作符，然后在()中规定媒体/设备特征，最后是{代码块“书写格式与css相同(属性名：值)”}

逻辑运算符

and：一般在拥有多个媒体特征的时候使用，必须条件都满足的情况下会执行样式。
not：用于排除设备类型，或条件取反。
only：指定某个媒体设备。
all：适用于所有设备。

设备类型 mediatype

screen：适用于电脑，平板，智能手机。
all：适用于所有类型。
print：适用于打印机和打印预览。
speech：适用于屏幕阅读器。

媒体特性 Media Feature

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。
min-device-pixel-ratio	最小设备像素比。
width/height ：	定义输出设备中的页面可见区域宽度/高度，输出的是你的网页可见区域的宽高。
device-width/height ：	定义输出设备的屏幕可见宽/高度。不管你的网页是在safari打开还是

CSS实现媒体查询

实现响应式布局需要使用媒体查询。
媒体查询语法：@media mediatype 连接符/逻辑运算符 查询条件{满足查询条件，执行的样式}@media 媒体查询mediatype：设备类型  screen：适用于电脑、平板、智能手机。逻辑运算符：and，所有条件都要成立，才能执行{}中的样式。not，不查询指定设备，条件取反(反条件)only，指定某个设备类型orientation：判断设备类型是横屏还是竖屏landscape：查询横屏portrait：查询竖屏min-width 最小宽度，相当于>=如min-width:600px  屏幕>=600时，才执行样式max-width，最大宽度，相当于<=如max-width:1200px  屏幕<=1200时，才执行样式min-height:最小高度max-height:最大高度媒体查询代码写在最下面注意：@media查询多个不同屏幕时，依照屏幕尺寸从大到小排列@media查询的样式要放置在样式表底部

webapp

Native App开发

Native App开发即我们所称的传统APP开发模式（原生APP开发模式），
该开发针对iOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，
该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、
数据内容、逻辑框架均安装在手机终端上。

Web App开发

Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），
该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，
APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，
去云端取数据呈现给手机用户。

移动端的解决方案：

1，专用型：PC端页面和移动端页面分别开发。当用户请求页面时，服务器先判断用户的设备类型，
然后根据用户设备类型返回响应类型的页面，PC端一套代码，移动端一套代码。(代表有百度，饿了么)
2，通用型：只设计一个页面，页面本身能够根据不同的浏览器尺寸，显示为不同的样式。
一套代码适应PC端和移动端，这种页面叫做响应式布局页面（苹果官网，bootstrap）

meta标签

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，
但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），
搜索关键词等，或其他 web 服务。
meta 标签用于网页的与中

属性

name：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。
http-equiv：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。
content：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。

用以说明生成工具（如Microsoft FrontPage 4.0）等；
页面关键词(告诉搜索引擎页面是与什么相关的)。content规定一个逗号分隔的关键词列表 - 相关的网页。将最重要的关键词放在最前面，让相关的关键词相邻。
版权
description 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。定义关键词的meta标记项放在定义描述的meta项之前。
定义网页作者
Robots(机器人向导)用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

robots是一组使用逗号(,)分割的值，
通常有如下几种取值：none，noindex，nofollow，all，index和follow。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

申明编码方式
一个页面过上一定的时间，自动转到另一个页面或者站点去。content中的6表示时间，单位为秒，url=后面是你要转向的网址。
让网页每隔一段时间刷新一次，10秒刷新一次。
告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面。

Web App开发需要增加的标签或设置：

H5文档类型：

viewport 视口设置：

viewport视窗，窗口。viewport的宽度决定了html这个标签的宽度
width 宽度，可设为px或 device-width
height 高度，可设为px或 device-height，通常不用设置
比如：width=device-width表示我们将viewport的宽度设为跟设备一样宽，
以iPhone6为例，iPhone6的横向分辨率为750，转换之后所代表的css宽度为375px，
这个时候viewport的宽度就为375px，也即是html的宽度为375px。
一般设计稿也是以375或者750来出图，这样就可以很方便的在设备上实现页面了。
initial-scale 初始的缩放比例（默认设置为1.0）
minimum-scale 允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
user-scalable 是否允许用户通过双指缩放（默认设置为 no 或者 0，因为我们不希望用户放大缩小页面)
指定页面为 Web App,全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />

指定 Web App 系统状态栏样式：
隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。
content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

指定 Web App 的标题：添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="天气预报">

禁止自动识别手机号/邮箱地址

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

指定 Web App 图标：

<link rel="apple-touch-icon" sizes="57x57" href="icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="icon144.png" />
<link rel="apple-touch-icon" sizes="196x196" href="icon196.png" />

指定 Web App 启动图片：

<link href="startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

视口 viewport 单位

移动互联网发展起来之后，引入了 vw、vh 两个单位，以方便 Web App 和手机页面的开发。
使用 vw、vh 能很好地解决宽度、高度适配问题，比使用 % 单位更高级！
vw、vh可以理解为：
相对于视口的宽度。视口被均分为100单位的vw
相对于视口的高度。视口被均分为100单位的vh
即：
x vw = x% * (viewport width)
x vh = x% * (viewport height)
即可以指定 height: x vh;
也可以指定 height: x vw;
比单纯指定 height: x %; 要有用得多！

 @media screen and (max-width:1500px) and (min-width:1200) {.nav2 {background-image: linear-gradient(to top, rgba(252, 247, 249, 0.986), rgba(252, 247, 249, 0.5));}.nav1 {background-image: linear-gradient(to top, rgba(252, 247, 249, 0.5), rgba(252, 247, 249, 0.1));}}

动画

animation-name: ;定义动画名称
animation-duration: ;定义动画持续时间
animation-delay:n ;  负值：动画n秒后开始，执行n秒后的样式，之前的不执行(跳过几秒)  正值：延迟n秒之后开始
animation-timing-function: ;规定动画的速度曲线默认是“ease”取值：ease：默认值，逐渐减速ease-in：加速ease-in-out：先加速后减速ease-out：减速linear：匀速             animation-iteration-count: ;定义动画执行的次数，可以是number值(数字)/infinite(无限播放)
animation-fill-mode: forwards;//规定动画结束的状态backwards：动画播放结束，回到初始状态forwards：动画播放结束，停留至最终状态。
animation:4s infinite ease-in 2s bgcolor动画属性的简写方式。animation 前一个时间值，动画所持续的时间。第二个时间值，动画延迟的时间必须值：动画名称，动画所持续的时间animation-direction: alternate;//规定动画是否在下一周期逆向播放。值：normal:默认值，始终从起点到终点播放alternate:交替播放。alternate-reverse:元素反转方向，再交替播放。如:元素默认在左侧，则反转至右侧，再进行交替播放。animation-play-state: paused;规定动画是否正在运行或停止，默认running运行，paused停止@keyframes 动画名称{}
@keyframes定义关键帧动画。
form{}初始样式  //可以百分比代替  等同于0%
to{}结束样式 //等同于100%

动画库

         1. 引用动画库<link rel="stylesheet" href="./animate.css">2. 给需要动画的元素添加class关键字 animate__animated 3. 将所需要的动画名称 添加给 class属性。<div class="animate__animated  animate__backInDown">哈哈哈</div><p class="animate__animated animate__jackInTheBox">animate.css</p><p class="animate__animated animate__fadeInLeftBig">animate.css</p>

鼠标样式

cursor:;设置鼠标的变化default:默认正常鼠标指针pointer:鼠标变为小手形状wait:加载效果help:帮助选择效果crosshair:十字准星，精准选择效果se-resize:拉伸效果，对角调整s-resize:垂直调整ne-resize:右上角调整col-resize:表格样式列调整row-resize:表格样式行调整zoom-out:缩小镜zoom-in:放大镜move:上下左右调整，移动选择效果text:文本输入标    文本选择/输入效果url("图片地址"),auto;  设置指针为自定义图片效果,需要设置下两个属性值:auto/default，不然不显示，推荐32*32的小图片图片要是png/gif格式IE浏览器不支持gif/png等图片

背景渲染

background-clip:;Z属性用于控制背景颜色的渲染区域border-box:默认值，渲染border之内的区域(包含border)padding-box:渲染padding之内的区域(包含padding)content-box:渲染content之内的区域(包含content)

重复性线性渐变

background-linear-gradient()重复线性渐变

边框裁剪

border-image:;边框图片border-image-slice:;设置四个方向的裁剪距离，值为numberfill:边框图片填充内容部分。默认边框图片填充border部分，中间的图像部分会被丢弃
border-image-width:;定义边框图片填充的宽度。如果不定宽度，那么默认是元素border的宽。值：numberborder-image-outset:length|number;作用：规定边框图像超过边框盒的量。length：表示设置边框图像（border-image）与边框的距离，默认为0。number：代表相应的border-width的倍数。说明：1、border-image-outset属性规定边框图像超出边框盒的量，包括上下部和左右部分。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。2、border-image-outset属性不允许使用任何负值。

音频视频

video:视频
audio:音频音视频必须要添加controls属性。controls:播放控件。
autoplay:自动播放，必须定义muted才有效。muted:静音播放loop:循环播放preload:是否自动加载(如果使用该属性，则表示视频在页面加载是进行加载，并预备播放)视频格式:ogg、MP4、MPEG4、WebM格式source:定义多个媒体资源加载规则：浏览器支持第一个视频类型则执行第一个，不支持第一个则匹配第二个视频类型，依次类推...注意:当使用source标签定义多个媒体资源时，video/audio标签不能使用src属性，否则source将不会被加载。src:媒体资源路径type:定义媒体类型mark:标记标签，定义带有记号/标记的文本，需要突出某段文本时使用。

继承性

inherit:;继承，指定某个属性继承父元素的样式如width:inherit;继承父元素的宽background-color:inherit;继承父元素的背景颜色
子元素定义了或者自带默认样式优先级最高，默认不继承，只能自己加样式，不会去继承父元素的样式

表格

table定义表格caption定义表格标题tr定义表格中的一行行th 定义表格的标题行td 表格块thead表头
tfoot页脚
tbody主体rowspan：行合并，用于设置一个单元格占几行。
colspan：列合并，用于设置一个单元格占几列。border=1 定义表格的边框
cellspacing 是边框与边框之间的间隙大小；
cellpadding 是边框与其内容的间隙大小；值：number数字border-collapse: collapse;设置单元格合并值：separate：默认值，不合并collapse：合并
label标签表格table可以自定义宽高；writing-mode: vertical-lr;垂直排列去边框通用：table table tr>td:first-child {border-left: none;}table table tr:first-child>td {border-top: none;}table table tr>td:last-child {border-right: none;}table table tr:last-child>td {border-bottom: none;}

边框补充凹凸效果

border-style:groove;3D凹槽效果
border-style:ridge; 3D垄起效果

溢出隐藏

                当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容任然会显示。overflow: 设置元素溢出部分内容的显示方式，默认为显示。值：visible：默认值：内容不会被隐藏，溢出的内容出现在元素大小之外。hidden：溢出的部分不显示。scroll：溢出的内容可以滚动查看，出现xy轴。auto：隐藏溢出内容，根据内容多少显示出现滚动条。overflow: hidden; overflow: scroll; overflow: auto; overflow: visible; overflow-x: 设置水平方向溢出内容的显示方式。overflow-x: scroll; overflow-y: 设置垂直方向溢出内容的显示方式。 overflow-y: scroll; 文本不换行 white-space: nowrap; text-overflow: ellipsis;  文本溢出以省略号...为后缀。 resize: 允许用户调整元素的大小。值：none：默认值，不能调整元素的大小。horizontal：允许用户调整元素的宽度。vertical：允许用户调整元素的高度。both：允许用户调整元素的宽高。

HTML特殊转义字符列表(放在实体名称实体编号的上面点击一下就有显示)

最常用的字符实体
Character Entities

显示	说明	实体名称	实体编号
	半方大的空白（半个中文宽度)
	全方大的空白(中文空格)
	不断行的空白格(英文空格)
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"
©	版权	©	©
®	已注册商标	®	®
™	商标（美国）	™	™
×	乘号	×	×
÷	除号	&pide;	÷

ISO 8859-1 (Latin-1)字符集

多选框改变样式

用label绑定多选框label::after{、background-color:red;可以改变多选框}

内嵌网页

iframe内嵌式网页，内嵌网页内容多的时候会显示滚动条。(行内块元素，不是块元素，margin:0 auto无效，可以设置display变成块元素)src:内嵌网页路径    frameboeder:定义内嵌网页是否显示边框，0显示1不显示scrolling：是否显示滚动条，auto(默认值，内容超出时显示，反之不显示)，no不显示滚动条src属性所加载的页面链接，可作为初始页面显示a超链接:target属性定义超链接的打开方式。_self:在浏览器当前标签页打开_blank:浏览器的新建标签页打开。取值为iframe的name值，则表示在指定的内嵌网页中打开链接。
a标签的target属性绑定iframe的name的值，可以设置a标签的页面在iframe中打开

html和css基础整理相关推荐

最全CSS基础知识图片形式整理
文章目录一.HTML5基础 -- H5标签二.CSS基础三.CSS核心属性四.css盒模型和文本溢出五.CSS元素类型六.定位.锚点.透明七.图片整合八.宽高自适应九.浏览器兼容十 ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML CSS 学习整理
HTML CSS 学习整理码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页这是一个简单的跳转页面操作 --修改plac ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
H5前端学习之一HTML和CSS基础认识
前言我是一个转行的前端小白,大专非计算机专业毕业,所以对计算机很不擅长,但是对信息技术的好奇,让我对技术党尤为崇拜,既然好奇代码和崇拜技术,不如成为它!所以我来学习了当前教主流的--前端.初学前端, ...
html + css 基础总结
html + css 基础总结文章目录 html + css 基础总结模板介绍 Demo01-写一篇博客 Demo02-超链接和列表 Demo03-图片使用 Demo04-知识补充 Demo05- ...
CSS基础：CSS的上下文之BFC
CSS的上下文之BFC 看到这个名词,可能会有些陌生,但其实上下文 = 区域,如果这么理解的话就会有行级上下文.块级上下文.flex上下文等等有一定排列规则的区域,我们今天只聊一聊块级格式化上下文 ...
字节跳动前端面试题：CSS 基础
实战教程全栈技术精选好文注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...