常州网站公司怎么选,百度关键词指数工具,可信网站 认证规则,有需要做网站的吗文章目录 前言HTML总结语义化标签常用标签H5新的语义元素H5的媒体标签\embed 元素#xff08;少用#xff09;\object元素#xff08;少用#xff09;\audio\video 元素包含关系iframe元素嵌入flash内容常用表单inputselect CSS总结权重样… 文章目录 前言HTML总结语义化标签常用标签H5新的语义元素H5的媒体标签\embed 元素少用\object元素少用\audio\video 元素包含关系iframe元素嵌入flash内容常用表单inputselect CSS总结权重样式计算过程常用伪类LOVE准则 contenteditable属性定位POSITION相对定位RELATIVE绝对定位ABSOLUTE固定定位FIXED粘性定位STICKY例子 变量varcss颜色rgb(r,g,b)rgba(r,g,b,alpha)hsl(h角度,s百分比,l百分比,alpha)hwb(h角度,w百分比,b百分比,alpha) 盒子模型**盒子类型****盒子的组成****不过行盒有其特殊之处**空白折叠box-sizing盒子模型的背景 常规流布局**包含块containing block**块盒常规流每个盒子的宽度必须等于**包含块的的宽度**高度不适用块盒的高度百分比取值高度的百分比 外边距合并 浮动float高度坍塌不规则排序 弹性布局flextip 规则css指令堆叠上下文stack context同一堆叠上下文元素在z轴的排列 svg 前言
本文总结了常用的html元素以及其特性还有一些可能会用到的内容还总结了css的大部分常用内容透彻的解析了原理内含内容比较多还有一些内容会以后补充欢迎大家收藏 HTML总结
语义化标签
html其实是使用各种标签来表示不同的文本所代表的信息全称为超文本标记语言 (Hyper Text Markup Language)
不同的标签有其对应的语义所以选择对应的标签是一种更好的习惯也能使整体结构更加清晰例如 // 根据w3c中对语义标签的定义 非语义元素的例子 和 - 无法提供关于其内容的信息。 语义元素的例子、 以及 - 清晰地定义其内容表单、表格、图片。 常用标签 em 来强调重点 b 来吸引对文字的注意 mark 来标记关键词或短语 strong 来表明文本具有重要意义 cite 来标记书籍或其他出版物的标题 i 来表示西方文本中的技术术语、音译、思想或船名 br 回车 hr 生成分割线可通过内置属性设置样式不过兼容性不好 s 删除线 sub 将其内容变为下标格式如Csub8/subHsub10/subC8H10 u 下划线u 元素的有效用例包括标注拼写错误、向中文文本中的专有名称添加专名号以及其他形式的注释。你不应该使用 u 为文字添加视觉上的下划线或者表示书籍的标题。 p 表示一段文本文本段落 a 锚元素超连接可以起到跳转作用 href超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议 使用文档片段链接到页面的某一段使用文本片段链接到某一段文字使用媒体片段链接到某个媒体文件使用 tel: URL 链接到一个电话号码使用 mailto: URL 链接到一个邮箱地址如果 web 浏览器不能支持其他 URL 协议网站可以使用 registerProtocolHandler() rel该属性指定了目标对象到链接对象的关系 !-- a 元素跳转百度 --
a hrefhttps://www.baidu.com Mozilla /a!-- a 元素链接到下面部分 --
pa href#Section_further_down 跳转到下方标题 /a/p!-- 要链接到的标题 --
h2 idSection_further_down更下面的部分/h2!-- a 元素链接邮箱 --
a hrefmailto:nowheremozilla.orgSend email to nowhere/aform 用于向目标提交表单 action指定目标url这个值可被button或input的提交事件改变method浏览器使用这种 HTTP 方法来提交 表单 post表单数据会包含在表单体内然后发送给服务器get表单数据会附加在 action 属性的 URL 中并以 ? 作为分隔符dialog如果表单在dialog元素中提交时关闭对话框
H5新的语义元素
如下图样式都没有什么特别的只是增强了语义性更容易阅读 article元素规定独立的自包含内容文档有其自身的意义并且可以独立于网站其他内容进行阅读(如文章详情页)下面是一个例子 articleheaderh1What Does WWF Do?/h1pWWFs mission:/p/headerpWWFs mission is to stop the degradation of our planets natural environment,
and build a future in which humans live in harmony with nature./p
/article section 元素被定义为相关元素块 header 元素为文档或节规定页眉 footer 元素为文档或节规定页脚 nav 元素定义导航链接集合 aside 元素页面主内容之外的某些内容比如侧栏
H5的媒体标签
embed 元素少用
所有主要浏览器均支持 embed 元素,embed 元素将外部内容嵌入文档中的指定位置而此内容由外部应用程序或其他交互式内容源如浏览器插件提供 大多数现代浏览器已经弃用并取消了对浏览器插件的支持所以如果你希望你的网站可以在普通用户的浏览器上运行那么依靠 embed 通常是不明智的。 以下为一个例子
!DOCTYPE html
html
bodyembed width100% height500px src/demo/html/table.html/body
/html它的src可以选择图片、视频、音频、html文件等但是它旨在将插件例如 Java applet、PDF 阅读器和 Flash 播放器嵌入网页中可是大多数浏览器不再支持 Java Applet 和插件。所有浏览器均不再支持 ActiveX 控件。在现代浏览器中对 Shockwave Flash 的支持也已关闭。自然而然就很少用到此元素了
object元素少用
object 标签的作用是在 HTML 页面中嵌入多媒体元素如音频、视频等
基本语法如下
object datamovie.swf height200 width200/如果浏览器不支持 Flash将无法播放视频。 与embed 有点类似但在当前有些浏览器支持embed不支持object而有些浏览器相反所以这两种方式用的并不多。 audio
用于播放音频基本语法如下
audio controlscontrols// 内部source/标签可以选择音频来源由于不同的浏览器所支持的音频格式有所不同所以可以使用此标签来选择多个音频文件以此来解决部分兼容问题source srcsong.mp3 typeaudio/mp3 /source srcsong.ogg typeaudio/ogg /// 还是无法兼容显示无法兼容信息
Your browser does not support this audio format.
/audio如果只需要一个音频源文件则可以省略source
audio controlscontrols srcsong.mp3
/audio还可以使用embed元素来进一步解决兼容性问题
audio controlscontrols height100 width100source srcsong.mp3 typeaudio/mp3 /source srcsong.ogg typeaudio/ogg /
embed height100 width100 srcsong.mp3 /
/audio内含属性 autoplay布尔值属性是否自动播放 controls此属性只有声明或不声明表示是否显示播放控制器 audio controls src/media/cc0-audio/t-rex-roar.mp3/audio
audio src/media/cc0-audio/t-rex-roar.mp3/audiocurrentTime获取当前文件播放到的事件 disableRemotePlayback布尔值属性用来禁用在远程设备上进行进度控制的能力 duration视频总长度 loop布尔值属性,是否循环播放 muted布尔值属性,是否默认静音 src嵌入的音频的 URL
事件
audioprocess输入缓冲区已准备好进行处理durationchangeduration 属性已更新ended视频停止播放因为媒体已经到达结束点loadeddata媒体的首帧已加载完成loadedmetadata元数据已加载完毕loadstart 浏览器开始加载资源时触发pause 播放已暂停play播放已开始timeupdate由 currentTime 属性指示的播放时间已更新
video
用于播放视频的标签基本语法如下
video width320 height240 controlscontrols// 内部source/标签可以选择视频来源由于不同的浏览器所支持的视频格式有所不同所以可以使用此标签来选择多个视频文件以此来解决部分兼容问题source srcmovie.mp4 typevideo/mp4 /source srcmovie.ogg typevideo/ogg /source srcmovie.webm typevideo/webm /
/video和音频的使用大致类似不过属性有所不同
最好的兼容性写法也大致相同
video width320 height240 controlscontrolssource srcmovie.mp4 typevideo/mp4 /source srcmovie.ogg typevideo/ogg /source srcmovie.webm typevideo/webm /object datamovie.mp4 width320 height240embed srcmovie.swf width320 height240 //object
/video内部属性 autoplay布尔值属性是否自动播放 controls此属性只有声明或不声明表示是否显示播放控制器 controlslist当浏览器显示播放控制器时controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。 允许的值有 nodownload(禁止下载)、nofullscreen 禁止全屏和 noremoteplayback禁止远程播放。 disablepictureinpicture布尔值属性防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式 height视频显示区域的高度单位是CSS 像素 loop布尔值属性,是否循环播放 muted布尔值属性,是否默认静音 playsinline布尔值属性是否位于包含块内播放原播放区域没有此属性并不意味着视频始终是全屏播放的 poster海报帧图片 URL用于在视频处于下载中的状态时显示如果未指定该属性则在视频第一帧可用之前不会显示任何内容然后将视频的第一帧会作为海报帧来显示 src要嵌到页面的视频的 URL width视频显示区域的宽度单位是CSS 像素
事件
audioprocess输入缓冲区已准备好进行处理durationchangeduration 属性已更新ended视频停止播放因为媒体已经到达结束点loadeddata媒体的首帧已加载完成loadedmetadata元数据已加载完毕loadstart 浏览器开始加载资源时触发pause 播放已暂停play播放已开始timeupdate由 currentTime 属性指示的播放时间已更新
元素包含关系
块级元素独占一行可以换行可以包含行极元素
行级元素一行不能换行不能包含块级元素a元素除外
随着语义化标准的完善有了新的总结
容器元素如div可以包含任何元素a元素几乎可以包含任何元素有些元素有固定子元素如ulli、olli、tabledldtdd标题元素无法包含容器元素、段落元素
iframe元素
内联框架元素它能够将另一个 HTML 页面嵌入到当前页面中
例如需要其他网站的内容时我们的网站禁止访问就可以使用此元素内嵌要访问的网站再用这个网站访问自己的内容
比如访问bilibili视频 然后放入代码中
div classaiframe srchttps://player.bilibili.com/player.html?isOutsidetrueaid113211076512189bvidBV1adxAepEL9cid26036864706p1 scrollingno frameborderno framespacing0 allowfullscreentrue/iframe
/div.a{width: 1000px;background-color: #50e024;
}
iframe{width: 1000px;height: 800px;
}嵌入flash内容
使用object元素与embed元素实现
type为互联网媒体类型MIME
不过现在几乎都不支持flash了
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0/headbodyobject data./BVN 2.6.swf typeapplication/x-shockwave-flashparam namequlity valuehighembed src./BVN 2.6.swf typeapplication/x-shockwave-flash qulityhigh/object/body
/html常用表单
input
div classa!-- 文本 --pinput typetext/p!-- 密码 --pinput typepassword/p!-- 进度 --pinput typerange/p!-- 日期 --pinput typedate/p!-- 搜索 --pinput typesearch/p!-- 纯数字 --pinput typenumber/p!-- 多选框 --p爱好input namehobby typecheckbox唱 input namehobby typecheckbox跳/p!-- 单选框 --p性别input namegender typeradio男 input namegender typeradio女/p!-- 取色 --pinput typecolor/p!-- 文件选择 --pinput typefile/p/divselect
div classs
!-- 下拉框 --select namehobby idhobbyoption value唱唱/optionoption value跳跳/optionoption value篮球篮球/option/select!-- 多重下拉可多选 --select namegame idgame multipleoptgroup labelfpsoption valuecf/optionoption valuecsgo/option/optgroupoptgroup labelmobaoption valuelol/optionoption valuedota/option/optgroup/select/divCSS总结
权重
类型选择器标签与伪元素选择器::before权重最低
类选择器与伪类选择器权重第二
id选择器权重最高
!important此声明将覆盖任何其他声明不过尽量少使用以免破环元素间的样式联系当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时拥有更大优先级的声明将会被采用
样式计算过程
赋值
自己为元素属性赋的值(没有冲突)
层叠冲突
若有重复则以后赋的值为准
style.aaa{color:#fff;color:#000;}
/style若有多处赋值冲突则需要比较权重来得到最终值
div classa idbdawdad/divdiv{font-size: 30px // 权重1
}
div.a{font-size: 20px // 权重3
}
div#b{font-size: 12px // 权重5
}最终此div的font-size为12px 继承
若没有赋值则会向上查看父元素的此属性值有则继承此属性值
不过如背景等非文本属性是无法继承的
// 以下文本aaa的字体大小会为30px
divspanaaa/span
/divstylediv{font-size: 30px}
/style默认值
元素的所有属性不是默认为空的而是都有初始值若没有赋值也没有可继承的值则会使用默认值 常用伪类
伪类含义:link选中未访问过的超链接:visited选中已访问过的超链接:hover选中鼠标移入的元素:active选中鼠标按下的元素:focus选中聚焦的表单元素:disabled选中被禁用的表单元素:checked选中被选中的表单元素:first-child选中第一个子元素:last-child选中最后一个子元素:nth-child(anb)选中第「anb」个子元素a和b是常量n的值会从0开始依次递增:first-of-type选中第一个指定类型的子元素:last-of-type选中最后一个指定类型的子元素:nth-of-type(anb)选中第「anb」个指定类型的子元素a和b是常量n的值会从0开始依次递增
LOVE准则
即以 :link、:hover、:visited、:active的顺序来设置属性这样可以避免样式的冲突根据所需要的优先级比如如果:active在:hover前配置那点击时鼠标还是悬于此元素上那样还是显示:hover的样式而不是:active的样式
contenteditable属性
该属性是一个布尔属性可以设置到任何元素上它可以让该元素变为可编辑的状态
在实际开发中通常用于制作富文本框
基本语法如下设置了此属性则此div的内容可以改变
divdiv contenteditabletruepadwdawd/p/div/div定位POSITION
用于指定一个元素在文档中的定位方式
相对定位RELATIVE
元素先放置在未添加定位时的位置再在不改变页面布局的前提下调整元素位置因此会在此元素未添加定位时所在位置留下空白
绝对定位ABSOLUTE
元素会被移出正常文档流并不为元素预留空间通过指定元素相对于最近的非 static 定位祖先元素一般为相对定位relative偏移来确定元素位置
固定定位FIXED
元素会被移出正常文档流并不为元素预留空间而是通过指定元素相对于屏幕视口viewport的位置来指定元素位置元素的位置在屏幕滚动时不会改变
粘性定位STICKY
元素根据正常文档流进行定位然后相对它的最近滚动祖先nearest scrolling ancestor和 containing block最近《包含块》块级祖先 nearest block-level ancestor包括 table-related 元素基于 top、right、bottom 和 left 的值进行偏移
例子
以下列场景为例通过查看有left和left为0、不停的改变position来看效果代码如下
div classadiv classbdiv classc/div/div/div.a{width: 400px;height: 400px;background-color: red;position: relative;left: 40px;
}
.b{position: relative;width: 300px;height: 300px;background-color: blue;// left: 20px;left: 0px;top: 30px;
}position为relative时
以下为分别盒子b的left为0和为20px后面一致 此时为相对定位刚开始b随a一起向右此时left为0所以相对于b自己位置也还是那里然后b的left变为20px相对于b自己本身的位置再向右移动了20px
position为absolute时 看似和上面一样其实原理不一样刚开始b随a一起向右此时left为0b相对于a左右并没有移动所以此时它们左边依然是重合的然后left变为20px由于a为相对定位所以b相对于a进行移动向右移动20px
position为fixed时 由于是固定定位所以b直接相对于视口定位不管其他的了所以left为0时直接与左边视口重合left为20px后也是相对于视口向右移动了20px
position为sticky时 此时为粘性定位很明显b的父元素并没有滚动能力再往上看 确实没有一个具有滚动的祖先元素所以b没有参照物left不起作用
变量var
使用一个变量来代替经常使用的属性值
定义变量名使用 --开头即可
变量值正确可用的即可
var(预选值备选值)
.a{--dark-color: #ccc;--blue-color: blue;--abc-aaa: orange;width: 400px;height: 400px;background-color: var(--dark-color);position: relative;left: 40px;
}
.b{position: absolute;width: 300px;height: 300px;background-color: var(--abc-aaa,--blue-color);left: 20px;// left: 0px;top: 30px;
}css颜色
rgb(r,g,b)
由红0-255、绿0-255、蓝0-255三原色的占比来配置颜色
rgba(r,g,b,alpha)
由红、绿、蓝三原色的占比来配置颜色加上a来配置透明度默认为1不透明
hsl(h角度,s百分比,l百分比,alpha)
根据颜色的色调、饱和度和亮度分量在 sRGB 颜色空间中表示颜色。可选的 alpha 组件表示颜色的透明度如下
.b{position: absolute;width: 300px;height: 300px;background: hsl(0.3turn 60% 45% / .7);left: 20px;// left: 0px;top: 30px;
}hwb(h角度,w百分比,b百分比,alpha)
根据颜色的色调、白度和黑度来表示 sRGB 色彩空间中的颜色。可选的 alpha 组件表示颜色的透明度如下
.b{position: absolute;width: 300px;height: 300px;background: hwb(30deg 10% 0% / .5);left: 20px;// left: 0px;top: 30px;
}盒子模型
box一个元素在页面会形成一个矩形区域类似盒子
盒子类型
行盒display为inline内容不可换行一行到尽头
块盒display为block独占一行相当于一大行可换行
行块盒display为inline-block内容不可换行但可以直接设置宽高
盒子的组成
无论行盒或块盒都是一样的结构组成 如上margin外边距、border边框、padding内边距、content内容width、height设置的就是此内容也叫内容盒共同组成盒子模型
不过行盒有其特殊之处 行盒的内容盒 行盒的宽高是源于内容的大小与长度所决定的并不能由自己设置如下
div classa idbspan你好12dwdqqqqqqq/span
/divspan{width: 1000px;
}行盒的内边距padding 水平方向有效会挤压文本内容垂直方向会以文本内容为中心对背景大小进行改变可以说不能得到想要的效果无效 span{padding: 100px;
}边框border 和内边距差不多水平方向有效会挤压文本内容垂直方向会以文本内容为中心对背景大小进行改变 span{border: 100px solid red;
}外边距margin 也是水平方向有效会挤压文本内容垂直方向会以文本内容为中心对背景大小进行改变 span{margin: 100px;
}空白折叠
行盒与行块盒都会产生空白折叠即两个行盒或行块盒挨着时它们之间会有一个空格间隔而且不能消除
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0stylea{display: inline-block;width: 100px;height: 20px;line-height: 20px;border: 1px solid #6ee663;color: #38f;text-decoration: none;box-sizing: border-box;text-align: center;
}/style/headbodydiv classa idba hreflorem/aa hreflorem2/a/div/body
/html 不过在Vue中好像没有这个空白Vue 模板在编译时可能会移除某些空白字符。如果你没有在 a 标签之间放置明显的换行符或空格Vue 可能会自动处理掉这些空白间隔 box-sizing
用于指定width、height等设置的是内容盒还是边框盒
box-sizing: content-box默认
此时设置的width、height就是内容盒 box-sizing: border-box
此时设置的width、height就是边框盒 盒子模型的背景
背景图片默认覆盖到整个border可以使用background-clip来设置覆盖范围 常规流布局
所有元素默认情况下都是常规流布局
总体规则
块盒独占一行行盒水平依次排列
包含块containing block
每个盒子都有它的包含块包含块决定盒子的排列区域一般情况下盒子的包含块为其父盒子的内容盒
块盒常规流
每个盒子的宽度必须等于包含块的的宽度高度不适用
div classadiv classb/div
/div.a{width: 1000px;border: 10px solid;height: 300px;background-color: #50e024;
}
.b{height: 100px;background-color: #db6262;
}宽度默认值为automargin默认值为0
它们的auto代表吸收其他空间比如包含块宽度为100px而b的宽度只有50px此时设置margin为auto两边的外边距就会吸收多余的50px这也是常规流块盒水平居中的做法margin垂直方向的auto为0
如下
.a{width: 100px;height: 300px;background-color: #50e024;
}
.b{width: 50px;height: 100px;background-color: #db6262;margin: auto;
}不过width的吸收能力要大于margin如下
.a{width: 100px;height: 300px;background-color: #50e024;
}
.b{width: auto;height: 100px;background-color: #db6262;margin: auto;
}块盒的高度
高度的auto指的是适应内容的高度
.a{width: 100px;height: auto;background-color: #50e024;
}
.b{width: 10px;height: 100px;background-color: #db6262;
}百分比取值
一般的width、margin、padding的百分比取值都是以包含块的宽度为基准的
至于为什么设置这个padding-top见下面外边距合并
.a{width: 100px;height: 400px;background-color: #50e024;padding-top: 1px;
}
.b{width: 50%;height: 100px;margin-top: 50%;background-color: #db6262;
}高度的百分比
若包含块有高度、不依赖子元素撑开不为auto则以包含块高度为基准
.a{width: 100px;height: 400px;background-color: #50e024;
}
.b{width: 50%;height: 50%;background-color: #db6262;
}若包含块依赖子元素撑开则百分比无效
外边距合并
若两元素包括兄弟元素、父子元素的外边距相邻没有border、padding等隔开则会取较大的一个外边距成为它们共同的外边距如上面
.a{width: 100px;height: 400px;background-color: #50e024;// padding-top: 1px; 不用padding-top隔开
}
.b{width: 50%;height: 100px;margin-top: 50%;background-color: #db6262;
}父元素也会共用这个20px的margin-top
浮动float
会时元素变为块盒设置display为block默认值为none
此时元素的包含块与常规流一致也是父元素的内容盒 float:left 左浮动元素处于包含块左上 float:right 右浮动元素处于包含块右上 div classadiv classbaaa/divdiv classbaaa/divdiv classcaaa/divdiv classcaaa/div
/div.a{width: 1000px;height: 400px;background-color: #50e024;
}
.b{float: left;
}
.c{float: right;
}margin的auto代表margin为0 宽度的auto代表自适应内容宽度 高度的auto代表自适应内容高度 百分比设置也与常规流一致 浮动盒子在包含块中排列时会避开常规流盒子 div classadiv classbaaa/divdivbbb/divdiv classbaaa/divdiv classcaaa/divdiv classcaaa/div
/divdiv{border: 1px solid;
}
.a{width: 1000px;height: 400px;background-color: #50e024;
}
.b{float: left;
}
.c{float: right;
}行盒在排列时会避开浮动盒子文字环绕而块盒在排列时会无视浮动盒子 div classadiv classbaaa/divspanbbb this is a demo, no see/spandivccc/divdiv classbaaa/divpbbb this is a demo, no see/p/divdiv{border: 1px solid;
}
.a{width: 1000px;height: 400px;background-color: #50e024;
}
.b{float: left;
}
.c{float: right;
}
span{background-color: #f50d0d;
}
p{background-color: #4c57ef;
}高度坍塌
若子元素都浮动父元素的高度自适应时块元素会无视浮动元素去排列所有会有父元素高度无法被撑开的问题
div classadiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/div/divdiv{border: 1px solid;
}
.a{width: 1000px;background-color: #50e024;
}
.i{width: 300px;height: 300px;background-color: red;float: left;
}解决方法
clear
none 不清除浮动left 清除左浮动使此元素在所有左浮动元素的下方right 清除右浮动使此元素在所有右浮动元素的下方both 清除所有浮动使此元素在所有浮动元素的下方
div classadiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classi/divdiv classs/div/divdiv{border: 1px solid;
}
.a{width: 1000px;background-color: #50e024;
}
.i{width: 300px;height: 300px;background-color: red;float: left;
}
.s{clear: left;
}不规则排序 左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的顶边不得高于上一个盒子的顶边若剩余空间无法放下浮动的盒子则该盒子向下移动直到具备足够的空间能容纳盒子然后再向左或向右移动
弹性布局flex
justify-content
横轴摆放flex-start;flex-end;center;space-between;space-around;
看例子
div classaul classblia/lilia/lilia/lilia/lilia/li/ulul classb2lia/lilia/lilia/lilia/lilia/li/ulul classb3lia/lilia/lilia/lilia/lilia/li/ulul classb4lia/lilia/lilia/lilia/lilia/li/ulul classb5lia/lilia/lilia/lilia/lilia/li/ulul classb6lia/lilia/lilia/lilia/lilia/li/ul/div// 此处为less语法
.a{ul{list-style: none;border: 1px solid black;margin-top: 20px;}.b{display: flex;justify-content: flex-start;}.b2{display: flex;justify-content: flex-end;}.b3{display: flex;justify-content: left;}.b4{display: flex;justify-content: right;}.b5{display: flex;justify-content: space-around;}.b6{display: flex;justify-content: space-between;}
} align-content:
纵轴摆放flex-start;flex-end;center;space-between;space-around;
flex-direction:
改变坐标轴row;row-reverse;column;column-reverse;
.a{ul{list-style: none;border: 1px solid black;margin-top: 20px;}.b{display: flex;justify-content: flex-start;flex-direction: row;}.b2{display: flex;justify-content: flex-start;flex-direction: row-reverse;}.b3{display: flex;justify-content: flex-start;flex-direction: column;}.b4{display: flex;justify-content: flex-start;flex-direction: column-reverse;}.b5{display: flex;align-content: flex-start;flex-direction: column;}.b6{display: flex;align-content: flex-start;flex-direction: column-reverse;}
}order
设置弹性盒子元素的顺序number
align-items
纵轴摆放此元素内的每个单独的子元素flex-start;flex-end;center;space-between;space-around;
flex-wrap:
元素间隔及顺序nowrap;wrap;wrap-reverse;
align-self:
元素纵向摆放此元素本身的纵轴摆放flex-start;flex-end;center;space-between;space-around;
tip
推荐大家这个网站https://flexboxfroggy.com/这是一个针对flex布局的小游戏玩了之后应该会对flex布局有一个更好的理解 规则css指令 import “path” 导入另一个css文件 charset “字符编码集” 声明使用的是特定的字符编码集必须写于顶行 font-face{} 创建字体指令让用户强制临时下载此字体。iconfont就是基于此制作 font-face{font-family: 字体名称,src:url(字体文件路径)
}堆叠上下文stack context
由某个元素创建规定此区域中的内容在z轴上的排列顺序
html元素与设置了z-index数值非auto的定位元素会创建堆叠上下文
同一堆叠上下文元素在z轴的排列
创建堆叠上下文的元素的背景与边框堆叠级别为负值的堆叠上下文常规流非定位的块盒非定位的浮动盒常规流非定位的行盒任何z-index为auto的定位子元素以及z-index为0的堆叠上下文堆叠级别为正值的堆叠上下文
svg
scalable vector graphics可缩放的矢量图 该图片使用代码书写而成 缩放不会失真 内容轻量不能适用于复杂的图片内容 可以直接嵌入网页直接把svg代码加入源码即可 div classasvg height1100 node-id1 sillyvgtrue template-height1100 template-width1100 version1.1 viewBox0 0 1100 1100 width1100 xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlinkdefs node-id183linearGradient gradientUnitsobjectBoundingBox idlinearGradient-1 node-id5 spreadMethodpad x10.5 x20.5 y10.000000000000001373901 y21stop offset0 stop-color#ffd5d7/stop offset1 stop-color#fff3f2//linearGradientlinearGradient gradientUnitsobjectBoundingBox idlinearGradient-2 node-id8 spreadMethodpad x10.071961135 x20.94699264 y10.4140801 y20.4140801stop offset0 stop-color#ff3a1c/stop offset0.23685916 后面省略/linearGradient/linearGradient/defs/svg
/div可以适用img元素src导入也可以由元素背景图片设置导入等等。
