HTML和CSS的知识点总结

VSCode编辑器
VS code下载地址：https://code.visualstudio.com/

如何安装插件：语言包，open in browser view in browser

学习编辑器的基本使用（增删改文件）
ctrl + s 保存
ctrl + c 复制
ctrl + v 粘贴
ctrl + x 剪切
ctrl + z 撤销
shift + end 选中一行 shift + home
shift + alt + ↑/↓ 快速复制一行
alt + ↑或↓ 快速移动一行
tab 向后缩进
shift + tab 向前缩进

什么是HTML，CSS
语义化标签 meta
meta主要用于设置网页中的一些元数据，元数据不是给用户看的，是给浏览器和搜索引擎看的
charset指定网页的字符集
name 指定的数据名称
content 指定的数据内容

    keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开<meta name='keywords' content='html ,css'>description 用于指定网站的描述<meta name='description' content='这是我对meta的总结'>title 标签中的内容会作为搜索结果的超链接上的文字显示<meta  name='title' content='这位是一个'>页面重定向   页面三秒后跳转到百度网页<meta http-equiv='refresh' content='3,url=https://www.baidu.com'>

行内元素与块级元素
块元素一般情况下对页面进行布局
行内元素行内元素一般用来包裹文字

    一般情况下  会在块级元素放行内元素  不会再行内元素放块元素块元素内可以放任何元素p元素中不放任何的块元素

文本修饰标签
强调=>双标签：,

 区别1.写法和展示效果是有区别的，一个加粗，一个斜体2.strong的强调性更强，em强调性稍弱下标:<sub></sub>           上标：<sup></sup>删除文本：<del></del>插入文本：<ins></ins>注：一般情况下删除文本和插入文本一起配合使用的

图片标签和图片属性
=> 单标签
src：引入图片的地址

alt:当图片出现问题的时候，可以显示一段友好的提示文字title：鼠标悬停时可以出现图片的标题width，height：控制图片的大小

引入文件的地址路径（相对路径和绝对路径）
相对路径：相对于某一个文件引入
.表示当前路径 …表示上一路径
绝对路径：网络路径/自己电脑的硬盘的位置

链接的用法
点我一下，就能百度
target: _blak 在一个新的网页中打开超链接
_self(默认)在自己的窗口中打开网页

    herf设置#号  可以直接跳到当前页面的顶部位置跳到任意位置  可以给该位置的设置标签的id属性 herf进行跳转到当前id就可以（#+id）开发中可以把#写成占位符  可以使用JavaScript：；可以作为占位符使用  点击没有什么作用

跳转链接
a=> 双标签
herf 要跳转的路径
target:可以改变链接打开的方式，默认情况下在当前页面打开
注：改变a标签的默认行为 base=>单标签还可以设置默认的跳转路径

跳转锚点
当前页面内进行跳转
1.#+id进行当前页面内的跳转
2.#+name进行当前页面内的跳转

列表标签
无序列表

:符合嵌套的规范，同时存在
type属性:改变前面标记的样式（一般通过css去控制）
有序列表

排行榜可以使用
定义列表
列表项需要添加标题和对标配进行描述的内容

容器
专业术语或名词

对名词进行解释和描述

嵌套列表
列表之间可以互相嵌套，形成多层级的列表

表格标签

:表格最外层容器
：定义表格行

：定义表格标题
之间是有嵌套关系的，要符合嵌套规范。
：定义表头	：定义表格单元

语义化标签:<tHead>,<tBody>,<tFood>    注：在一个table中tBody是可以出现多次的 但是thead和tfood只能出现一次

表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式 left center right
valign:上下对齐方式 top middle bottom

表单input标签

:表单的最外层容器 : 标签用于搜索用户信息，根据不同的type属性值，展示和不同的控件，如输入框，密码框，复选框等 input（单标签）有个 type属性 text 普通文本输入框 password 密码复选框 CheckBox 复选款 radio 单选框 file 上传文件 submit 提交按钮 reset 重置按钮

表单标签
：多行文本框
:下拉菜单 size :显示个数 disabled 不可选 multiple多选 selected 被选中 checked默认选中
:辅助表单

div :做一个区域划分的块 span ：对文字进行修饰的，内联

按类型划分标签
按类型 block：块 div,p ,ul ,li ,h1-h6…
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

        inline：内联  span,a ,em ,strong,img ....1.不会独占一行2.有些样式不支持（width，height，margin，padding）3.不写宽的时候，宽度由内容决定4.所占的区域不一定是矩形5.内联标签之间会有空隙，原因：换行产生的inline-block：内联块input ,select....1.挨着一起，支持宽高注：布局一般用块标签，修饰文本一般用内联标签
按内容  Flow：流内容Metadata：元数据Sectioning：分区Heading：标题Phrasing：措辞Embedded：嵌入的Interactive：互动的（详情：https://www.w3.org/TR/html5/dom.html）按显示替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容img，input非替换元素：将内容之间告诉浏览器，将其显示出来        div,P,h1-h6....

标签嵌套规范

ul,li
dl,dd,dt
table  tr td 1.块标签可以嵌套内联标签<div><span></span></div>
2.块标签不一定能嵌套块<div><div></div></div>        特殊：p标签不可以嵌套div标签
3.内联标签不能嵌套块标签、特殊：a标签是一个例外

strong与em b标签和i标签
表现形态都是（strong b）文本加粗和（em i）文本斜体
区别在于strong和em是具备语义化的，而b和i是不具备语义化的

引用标签的基本操作
blcok:引用大段的段落解释
q:引用小段的词语解释
abbr：缩进或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

br与wbr
br标签表示换行操作
wbr标签表示软换行操作（如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word break opportunity（单词换行时机））

pre和code标签（针对网页中的程序代码的显示效果的）
pre：元素可以定义预格式化的文本，被包围在pre元素中的文本通常会被保留空格和换行符
code：只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签，虽然code标签通常只是吧文本变成等宽字体，但它暗示着这段文本是源程序代码

map与area
给特殊图像添加链接
定义一个客户端图像映射，映射图像指带有点击区域的一幅图像。area元素永远嵌套在map元素内部，area元素可定义图像映射中的区域
area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标

embed和object
给flash和一些插件进行渲染的操作
embed和object都表示能够嵌入一些多媒体，如flash动画，插件等，基本使用没有太多局别，主要是为了兼容不同的浏览器而已
object需要配合param元素一起完成

audio和video（H5的新功能）
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件

link标签的扩展(引入外部资源文件)
link可以引入外部的css文件

link还可以添加标题栏前的小图标

语义化标签（h5新增的）
header footer main hgroup(标题组合) nav

 注：header  footer  main在一个网页中只能出现一次article:独立的信息aside:辅助信息的内容section:区域figure:描述图像或视频figcaption:描述图像或视频的标题部分datalist：选择列表details/summary：文档细节/文档标题progress/meter：定义进度条/定义度量范围time：定义日期或时间Mark：带有记号的文本

表单扩展新的input控件
email：电子邮箱地址输入框
URL：网址输入框
number：数值输入框
range：滑动条
date/month/week：日期控件
search：搜索框
color：颜色控件
tel：电话号码输入框在移动端会默认调动数字键盘
time：时间控件

新的表单属性
autocomplete ：自动完成
autofocus ：自动获取焦点
required ：不能为空
pattern ：正则验证

扩展标签
fieldset :表单内元素分组
legend：为fieldset元素定义标题
optgroup：定义选项组

内联框架用于向当前页面引入一个其他页面
src 要引入页面的路径
frameborder 指定内联框架的边框
不会被SEO检索（网络爬虫）

选择器的权重
内联样式 1000
id选择器 0100
类和伪类选择器 0010
伪元素选择器 0001
通配符选择器 0000
继承样式没有优先级（！import至高无上）

单位
长度单位
-像素屏幕（显示器）：实际上是有一个一个的小点点构成
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
-同样的200像素在不同的设备下显示的效果不一样

    -百分比 -也可以可以设置属性值相对于其父元素属性的百分比-设置百分比可以使子元素跟随父元素的改变而改变-em-em是相对于元素自身的字体大小来计算的-1em = 1font-size-em会根据字体大小的改变而改变1em=16px（默认）-rem                -rem是相对于根元素的字体大小来计算（根元素就是html）

浏览器默认样式
-通常情况下，浏览器都会为元素设置一些默认样式
-默认样式的存在会影响到我们页面的布局，通常情况下我们在编写页面的时候必须要去除浏览器的默认样式（pc端）
-上下的外边距合并
-通配符选择器
*{
margin:0;
padding:0;
list-style:none;
}

css样式引入方式
-内联样式表
style属性
-内部样式
style标签
区别：
内部样式的代码可以复用，复合w3c的规范标准，进行让结构和样式分开处理
-外部样式
引入一个单独的css文件 name.css

rel:引入资源的类型
herf：引入资源的地址

            @import(不建议使用)     区别：link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；           link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别；可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

css盒模型(css将所有页面中的所有元素都设置为了一个矩形的盒子)

每一个盒子都有几个部分组成内容区（content  width和height设置内容区的宽高）内边距（padding）边框（border）外边距（margin）
border  边框的宽度  border-width(默认值一般为3px)指定四个方向的宽度（上右下左顺时针）边框的样式  border-style (默认值为none)边框的颜色  border-color(如果不写 默认color的值)注：边框的大小会影响盒子的大小   solid表示实线   dotted 表示点状虚线   dashed 虚线  double 双线

内边距（padding）
内边距的设置会影响到盒子的大小
背景色也会延伸到内边距上
一个盒子可见宽的大小，是由内容去内边距和边框共同决定
所以在计算盒子大小是，需要将这三个区域加到一起计算
padding 内边距的简写属性可以同时指定四个方向的内边距（方向：上右下左）

外边距（margin）
不会影响盒子的大小，但外边距会影响盒子的位置，一共有四个方向的外边距
-元素在页面中是自左向右的顺序排列的
所以默认情况下如果我们设置的是左和上外边距，将会移动元素的自身
而设置下右外边距会移动其他元素（不会挤自己）
-margin可以设置负直播，元素会向相反的方向移动
-默认情况下设置margin-lefrt没有任何效果
垂直方向上的margin会合并

元素的水平方向的布局
-元素在其父元素中水平方向的位置由以下几个属性共同决定
margin border padding width
-一个元素在其父元素中，水平布局必须满足以下的等式
width margin-left margin-right 可以设置为auto
-如果某个值设置为auto，则会自动调整为auto的那个值使等式成立

垂直方向的布局
-默认情况下父元素的高度被内容撑开
-子元素在父元素的内容区排列，如果子元素的高度超过了父元素，则子元素就会从父元素中溢出
使用overflow:auto处理父元素的溢出问题
overflow的取值：visible:默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden：超出部分将会被裁剪不会显示
scroll：产生水平和竖直方向的滚动条
auto：浏览器自动设置（产生滚动条）

外边距垂直方向重叠（折叠）问题
-相邻的垂直方向上的外边距（margin）会发生重叠现象
-兄弟元素
-兄弟元素间的相邻垂直外边距会取两者之间的一个较大值（两者都是正值）
-特殊情况
-如果相邻的外边距一正一负，则取两者的和
-如果相邻的外边距都为负值，则取两者中绝对值较大的

    -兄弟元素之间的外边距重叠，对于开发是有利的，所以我们不需要处理-父子元素    -父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）

行内元素的盒模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
-行内元素可以设置border，但是垂直方向的border不会影响页面的布局
-行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局
-display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块级元素
inline-block 行内块元素（既可以设置宽度和高度，又不会独占一行）
table 将元素设置为一个表格
none 元素不会在页面中显示

visibility:用来设置元素的显示状态可选值：visible:默认值，元素在页面中正常显示hidden：元素在页面中隐藏不显示，但任然占据页面的位置

盒子的尺寸
默认情况下，盒子可见框的大小是由内容去，内边距和边框共同决定的

        -box-sizing  用来设置盒子尺寸的计算方式（设置width和height）可选值content-box 默认值 宽度和高度用来设置内容去的大小border-box  宽度和高度是用来设置整个盒子可见框的大小

CSS选择器
-元素选择器
作用：可以根据标签名选择指定的元素
语法：标签名{}
例子： p{} div{} h1{}

-id选择器作用：可以根据id属性值选择指定的元素语法：#id属性值{}例子：#id名称{}    -class类选择器作用：可以根据class属性值选择指定的元素（class可以重复使用）可以通过class属性来为元素分组可以同时为一个元素指定多个class属性语法：class属性值{}    例子：.class{}-通配符选择器   作用：选中页面中的所有元素语法：*-层次选择器-后代：M N  只要是后代都会被选择，所有的孩子都会被设置-父子：M>N只选择孩子，不会选择孩子的孩子-兄弟：M~N当前M下面的所有N标签-相邻：M+N     当前M相邻的下面的N标签-属性选择器-M[attr]{ }            例子：div[class]{}  div中有class属性的所有divdiv[class=box] 完全匹配  *=  部分匹配^=  起始匹配$=  结束匹配[][][][][]多个[]进行组合匹配-伪类选择器CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加                  M:伪类{}:link       访问前的样式        (只能添加给a标签)  :visited    访问后的样式·       (只能添加给a标签)  :hover      鼠标移入时的样式    (可以添加给所有标签加)  :active     鼠标按下时的样式    (可以添加给所有标签加) 注：一般的网站都只设置a{link，visited， active }和a:hover{}:after , :before           通过伪类的方式给元素添加一个文本内容，使用content属性（清除浮动，精灵图标的操作）:checked   :disabled  :focus  都是针对表单元素的结构性伪类选择器nth-of-type()  nth-child()角标是从1开始的，1表示第一项，2表示第二项 | n值  表示从0到无穷大奇数用odd表示   event表示偶数first-of-type   第一个last-of-type    最后一个only-of-type    只有一个的时候才会生鲜nth-of-type 和 nth-child()type:类型child：孩子

解决高度塌陷问题
1.给父元素设置overflow:hidden （开启bfc布局）
2.给父元素使用伪元素选择器
::after{
content:"";
display:block;
clear:both
}
3.在父元素下面写一个div 给这个div进行清除浮动（不推荐，容易造成代码的冗余）

选择器的权重
内联样式 1000
id选择器 0100
类和伪类选择器 0010
元素选择器 0001
通配符选择器 0000
继承样式没有优先级（
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器时单独计算的）
如果优先级计算相同，此时则优先级使用靠下的样式
可以在某一个样式的后边添加！inportant，则此时该样式会获得最高的优先级，甚至超过内联样式（！important至高无上）
注；在开发中这个玩意一定要慎用

css背景样式
background-color：背景颜色
background-image：背景图片（默认会水平垂直都铺满背景图）
background-repeat:背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x,y都进行平铺，默认值)
no-repeat 都不平铺
background-position:背景图片的位置
x y number(正值向右下负值左上移动)
x: left center right
y: top center bottom
background-attachment:背景图随滚动条的移动方式
scroll(默认值) （背景位置是按照当前元素进行偏移的）
fixed 固定（背景位置是按照浏览器进行偏移的）

CSS文字样式
font-family:字体类型
英文，中文宋体（simsun）
衬线体和非衬线体
注意点：
1.多个字体类型设置的目的（设置的字体类型适应更多的设备）
2.引号的添加的目的（有的字体中间有空格，认为是一个整体）

    font-size:字体大小默认：16px属性取值         字体大小xx-small          最小  x-small           较小  small              小medium         正常（默认值） 对应的16pxlarge              大 x-large           较大 xx-large          最大  写法：可以是具体的像素 也可以使用上面的属性取值注：字体大小一般为偶数font-weight： 字体粗细模式： 正常（normal）  加粗（bold）  数值（100-900的选择）写法：单词  |   数值（100,200.....900   100-500都是正常的  600-900都是加粗的）font-style:   字体样式模式： 正常（normal）  斜体（italic）写法： 单词（normal italic   oblique）注：oblique也表示斜体，用的比较少，一般了解即可。区别: 1.italic所有带有倾斜字体的可以设置2.oblique没有倾斜属性的字体也可以设置倾斜操作   color:字体颜色

CSS段落样式
text-decoration：文本修饰
下划线 underline
删除线 line–through
上划线 overline
不添加任何装饰 none
注：添加多个文本修饰例：text-decoration: underline overline;

    text-transform:文本大小写  针对英文大写:uppercase小写：lowercase  首字母大写：capitalizetext-indent:文本缩进    首行缩进 em单位：相对单位  一个1em永远跟字体大小相同text-align：文本对齐方式    取值：left  right center  justify(两端点对齐)   line-height: 定义行高什么是行高：一行文字的高度，上边距和下边距的等价关系定义：        默认：不是固定值，而是变化的，根据当前字体的大小再不断的变化取值：1.number  px  |  scale  (比例值，跟文字大小成比例的)letter-sapcing:定义字间距    字体之间的间距          word-sapcing:定义词间距（针对英文段落的）词之间的间距英文和数字不自动折行问题：1.word-break:break-all  (非常强烈的折行)2.word-wrap:break-word  (不是那么强烈的折行，会产生一些空白区域)

CSS复合样式
一个css属性只控制一种样式，叫做单一样式
一个css属性控制多种样式，叫做复合样式
复合样式(复合的写法是通过空格的方式实现的,有的是不需要关心顺序的例如background，border；有的是需要关心顺序的，例如font。)
background:red url() repeat 0,0,
border：1px solid red
font: weight style size family
注：最少要有两个值 size family
注：如果非要混合去写的话，要么先写混合样式，在写单一样式，这样样式才不会被覆盖掉

显示框类型（diaplay）
block
inline
inline-block
区别
none 不占空间的隐藏
visibility:hidden:占据空间的隐藏

overflow（溢出隐藏）
visible：默认
hidden：超出部分将会被裁剪不会显示
scroll：滚动条
auto：浏览器自动设置（产生滚动条）
支持某一个轴 overflow-x overflow-y

透明度与手势
opacity：透明度
取值：0（透明）-1（不透明）占据空间 0.5（半透明）
注：所有的子内容也会透明
rgba（a是透明度，可以让背景透明，让字体可以不受影响）
注：可以让指定的样式透明，而不影响其他样式
cursor：手势
default：默认箭头
pointer：小手
move：可移动的十字架
help：箭头后面带有一个？号、
可以自定义图片设置鼠标的样式：
准备图片：格式（.cur .ico）
定义格式：cursor:url(路径)，auto；

最大，最小宽高
min-width,max-width
min-height,max-height

    %单位：换算->  以父容器的大小进行换算一个容器怎么适应屏幕的高：容器加height：100%； body：100%； html：100%

css默认样式
有些标签有默认样式，有些标签没有默认样式
没有默认样式：
div span
有默认样式
body ，h1…h6,p,ul,…
CSS重置样式（css reset）
*{ margin：0；padding：0；}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能

    img{display:block}        问题的现象：图片跟容器底部有一些空隙内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的，vertical-align：baseline；  基线对齐方式，默认值写具体页面的时候或者一个布局结构的时候1.写结构2.CSS重置样式（css3.写具体样式

float 浮动
脱离文档流，沿着父容器靠左或靠右进行排列
取值：left
right
none
float的注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

 如何清除浮动上下排列：clear属性，表示清除浮动的 ：left  right  both嵌套排列：固定宽高：不推荐  不能把高度固定死，不适合做自适应的效果父元素浮动：不推荐，因为父元素浮动起来也会影响到后面的元素overflow：hidden（BFC规范）：如果有子元素想溢出，那么会受到影响设置空标签：不推荐，会多添加一个标签after伪类：推荐，是空标签的加强版，目前各大公司的做法（clear属性只会操作块标签，对内联标签不起作用）

position定位
position特性
css position属性用来指定一个元素在文档中的定位方式。top right bottom left属性则决定了该元素的最终位置
position取值
static(默认)
relative（相对定位）
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素的布局
left top right bottom 是相对于当前元素自身进行偏移的
absolute（绝对定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块基本内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）
fixed(固定定位)
使元素完全脱离文档流
使内联元素支持宽高
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky（黏性定位）
在指定的位置进行黏性操作
z-index 定位层级
嵌套时的层级（决定谁在上面谁在下面，比较时同级进行比较）
定位实现元素居中
top：50% left:50% margin 调一下就好了
定位实现列表的装饰点
相对定位

css添加省略号
width 必须有一个固定的宽度
white-space:nowrap 不让内容折行
overflow:hidden 隐藏溢出的内容
text-overflow:ellipsis 添加省略号

CSS Sprite
特性：css雪碧也叫作css精灵，是一种网页图片应用处理的方式，它允许你将一个网页涉及到的所有吧零星图片都包含到一张大图中去加载
好处：可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页的打开

CSS圆角
border-radius 添加圆角
border-radius:20px / 40px 椭圆相切
半圆： div{ width: 200px;height: 100px;background-color: red; border-radius: 100px 100px 0 0;}

CSS3
浏览器前缀
浏览器厂商以前就一直在实施css3，但它还为成为真正的标准，为此，当有一些css3样式语法还在波动的时候，它们提出来针对浏览器的前缀
1.浏览器前缀
css3去兼容不同的浏览器，针对旧的浏览器做兼容，新的浏览器基本不需要添加前缀

            浏览器                  内核                前缀IE                      Trident            -ms-Firefox                 Gecko              -moz-Opera                   Presto             -o- Chrome                  Webkit             -webkit-     Safari                  Webkit             -webkit-     Opera,Chrome            Blink

transition过渡
transition-property:规定设置过渡效果的CSS属性的名称
transition-duration:规定完成过渡效果需要多少秒或毫秒
transition-delay：定义过渡效果何时开始（延迟执行的时间（数值为正数），也可以提前（数值为负数））
transition-timing-function:规定速度效果的速度曲线
ease:默认值
ease-in:
ease-out
ease-in-out
cubic-bezier
linear
注：不要加到hover上

transform变形
translate:位移
transform:translate(x轴，y轴)
translateX
translateY
translateZ (3d)
scale：缩放(值是一个比例值，正常大小就是1,会以当前元素中心点进行缩放注：宽高比例一样的时候，可以只写一个值)
transform:scale(2,0.5)
scaleX
scaleY
scaleZ（3d）
rotate：旋转(旋转的值，单位是角度，deg，弧度)
transform:rotate()
rotateX(3d)
rotateY(3d)
rotateZ（和rotate是等级关系，正值按顺时针旋转，负值按逆时针旋转）
skew：斜切
transform:skew(30edg，0)
skewX:单位也是角度，正值向右倾斜，负值向左进行倾斜
skewY：
transform的注意事项
1.变形操作不会影响到其他元素的
2.变形操作只能添加给块元素，但是不能添加给内联元素
3.复合写法，可以同时添加多个变形操作
执行是有顺序的，先执行后面的操作，再执行前面的操作

text-shadow文字的阴影
注：阴影的默认颜色和原文字颜色一样

Flex弹性盒模型
作用在容器上
flex-direction
用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上
取值含义
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
flex-wrap
用来控制子项整体单行显示还是换行显示
取值含义
nowrap 默认值，表示单行显示，不换行
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面
flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开
justify-content
决定了主轴方向上子项的对齐和分布方式
取值含义
flex-start 默认值，表示为起始位置对齐
flex-end 表现为结束位置对齐
center 表现为居中对齐
space-between 表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白的一般
space-evenly evenly是匀称，平等的意思，也就是视觉上，每个flex子项两侧空白间距完全相等
align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式
取值含义
stretch 默认值，flex子项拉伸
flex-start 表现为容器顶部对齐
flex-end 表现为容器底部对齐
center 表现为垂直居中对齐
align-content
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
取值含义
stretch 默认值，每一行flex子元素都等比例拉伸，例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start 表现为起始位置对齐
flex-end 表现为结束位置对齐
center 表现为居中对齐
space-between 表现为两端对齐
space-around 每一行元素上下都享有独立不重叠的空白空间
space-evenly 每一行元素都完全上下等分
作用在flex子项上
order
可以通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order的属性值是0
order的值越大越往后，值越小，越往前，可以设置负值
flex-grow
属性中grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白间隙。默认值为0
flex-shrink
属性中shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足的时候，单个元素的收缩比例，默认值是1
flex-basis
flex-basis定义了分配剩余空间之前元素的默认大小（指定固定的大小）
flex
flex属性是flex-grow flex-shrink和flex-basis的缩写
默认值: flex：0 1 auto
align-self
align-self指控制单独某一个flex子项的垂直对齐方式

Grid网格布局
Grid网格布局是一个二维的布局方法，纵横两个方向总是同时存在
作用在grid容器上
grid-template-columns
grid-template-rows
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content

        作用在grid子项上grid-column-startgrid-column-end        grid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-selfplace-self

移动端适配方案
1.百分比布局，也叫流式布局
2.等比缩放布局，也叫rem布局

HTML和CSS的知识点总结相关推荐

css 小知识点：inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
HTML+CSS自用知识点（第四周）
HTML+CSS自用知识点拨云见日篇(续) 三十五.CSS定位 1.relative的相对定位 1.position 2.relative 2.absolute绝对定位 3.fixed固定定位 4. ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
一文梳理总结HTML+CSS琐碎知识点快速上手前端开发
一文梳理总结HTML+CSS琐碎知识点 1 前端三要素 2 HTML 2.1 HTML骨架 2.2 HTML标签的基本概念 2.3 HTML基础标签 2.4 HTML高级标签 2.4.1 列表 2.4 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
CSS重要知识点汇总
CSS重要知识点汇总本文通过对w3school的CSS基础教程,整理出比较常见的却又容易遗忘或者忽略的CSS相关知识点.本文的标题顺序与w3school中的CSS基础教程标题顺序保持一致.适合翻阅和 ...
105道CSS 面试知识点总结
来源 | https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 ...

HTML和CSS的知识点总结

HTML和CSS的知识点总结相关推荐

最新文章

热门文章