举例：span del i em b strong a(title=”鼠标移入时显示的文字”;target=” “(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开) …2、块元素块元素定义：可以设置宽高，独占一行。
举例：div 标题标签 列表标签 段落标签 …3、行内块元素行内块元素定义：可以设置宽高，在一行显示。
举例：img 【title=”鼠标移入时显示的文字” 】 表单控件元素的转换块元素： display:block;行内块元素：display:inline-block;行内元素： display:inline;元素的级别块元素 > 行内块元素 > 行内元素元素嵌套规范1、同一级别可以相互嵌套2、级别高的元素可以嵌套级别低的元素3、段落标签只能嵌套行内元素4、a标签不可以嵌套a标签；p不能嵌套p盒子模型及其问题四部构成：1、margin 外间距 盒子与盒子之间的距离2、border 边框3、padding 内填充（内间距） 边框与内容之间的距离。
4、content 内容margin-top margin-right margin-bottom margin-leftmargin: 50px; 上 右 下 左margin: 50px 100px; 上下 左右margin:0 auto; auto自动margin: 50px 100px 150px; 上 左右 下margin: 50px 100px 150px 200px; 上 右 下 左border: 1px solid red;border-top \ border-right \border-bottom \ border-leftborder-top-width：上边框的宽度padding:设置方法同margincontent: ;width : 数值 百分比 autoheight: 数值 百分比 auto盒子模型的问题：1.大部分元素的margin和padding默认为0，但有一部分的margin和padding不为0，例如body 标题标签（h1-h6）（ul ol il等列表标签） 段落标签2.想领的两个块元素的margin会重合，值会取最大值3.margin可以为[负数] ，padding不可以设置[负数]。
4.行内元素margin只有左右，没有上下5.如果（1）发生嵌套关系的元素，（2）父元素没有上边框，（3）上padding ，（4）父元素与子元素之间没有别的内容，此时子元素margin-top就会作用到父元素身上margin-top的解决方式：1.用父元素的padding-top代替子元素的margin-top；2.给父元素添加overflow：hidden；宽高的设置和计算height：auto / 百分比 / px；width：auto / 百分比 / px；height：auto； 参照与父元素width：auto；参照与内容box-sizing：border-box； 将边框算入盒子内；一个元素实际的宽高实际宽度 = border-left + padding-left + width +paddint-right + border-right;实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;浮动作用：让块元素横排排列样式： float：left；从左往右排列float：right；从右往左排列原理：让元素脱离文档流，让元素从文档层浮动到浮动层。
引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。
（浮动的元素脱离文档流）*解决方式一：给父元素添加 overflow：hidden；（超出部分隐藏）*解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。
clear：right/left/both ； 别的浮动对它的影响清除掉例：.box：after{content: “”;display:block;width: 0;height: 0;clear:both;}*解决方式三：父元素能设置高度的尽量设置高度浮动之后的块元素参照内容：属性值 auto定位定位的元素脱离文档层，到达定位层定位的元素会多出5个样式：top right bottom left z-index：999上 右 下 左 层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】层级：z-index：整数；定位的几种方式：1.相对定位：相对于自身来定位，在文档层中保留原来的位置用法：position：relative；2.绝对定位：相对于最近的 定位的 祖先元素 来定位，完全脱离文档流（其他顶替其位置）用法：position：absolute；+方向值3.固定定位：相对于浏览器的四条边，完全脱离文档流用法：position：fixed；top与bottom同时定义，那个样式会作用到元素身上的判断关系：top的权重比bottom的权重大left的权重比right的权重大元素作用时：1.如果是position：relative；left：；margin：；先作用margin，在作用relative；2.如果是position：absolute；left：；margin：；先作用absolute，在作用margin；定位元素的居中方式：方法一：1.水平居中：position：absolute；left：50%；margin-left：-自身长度的一半；2.垂直居中：position：absolute；top：50%；margin-top：-自身长度的一半；3.绝对居中：position：absolute；left：50%；top：50%；margin-left：-自身长度的一半；margin-top：-自身长度的一半；方法二：1.水平居中：position：absolute；left：0；right：02D和3D2D和3D属性：1.平移样式transform:translate(x,y); 向上为负， 向下为正transform:translateX(100px);transform：rotate（180deg） ； （1turn）转一圈平移 transform:translate（） 例子：translate（x，y） translateX（）旋转 transform:rotate（） 例子rotate（180deg）顺时针 -180deg 逆时针transform：rotate（）空格translate（）；transform-origin:px px;变换的中心点；left center；缩放 transform:scale（） 例子：scale（2） 放大为原来的2倍 scale（0.n）缩小为原 来的0.n scale（m，n） x轴m，y轴n斜切 transform:skew（） 例子：skew（45peg） 左拉伸45° skew（45peg，m）过渡transitiontransition：all 0.5s；全部 时间3.过渡的属性样式： transition-property: ， ;可以为：属性的全部样式4.过度的总时间： transition-duration：；5.过渡的时间函数：transition-timing-function：；linear（匀速） ease（开头结尾慢，中间快）cubic-bezier（1，0.07，0.54，0.21） 贝塞尔曲线6.延迟 transition-delay：；3d效果：和2d的一样transition，transform；prespective：给父元素加prespective（灭点的值）prespective-origin：x y；灭点的位置 调整观察的角度（大多数情况不设置）transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）transform：ratateY（45deg）transform：translate3d（0-1，0-1，px）父元素：transform-style：preserve-3d；动画动画规则：@keyframes 动画名（随便给）{（动画规则）from{}to{}}@keyframes 动画名（随便给）{（动画规则）0%{}50%{}100%{}}@keyframes animation1{from{background-color:red;}to{background-color:blue;}}挂载动画:将动画加到元素身上.元素{animation：animation1 时间 步数 时间函数 延迟时间 次数 ；}挂载多个动画：.元素{animation：animation1 时间,animation2 时间,animation1 时间；其他动画的相同的可以附件通过animation属性；}animation的样式动画名：animation-name时间： animation-duration步数：animation-steps：8；时间函数：animation-timing-function延迟： animation-delay动画次数： animation-iteration-count：infinite（无限次）/2；指定下一次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；最后的状态：animation-fill-mode：backwards（默认（保持一开始的状态））/forwards（保持当前的状态）；状态即指定动画是否运动： animation-play-state: running（运行）/paused（静止）;元素分类按照在页面中的呈现效果：1.行内元素：在一行内显示 ，不可以设置宽高 ：（存放文字）span a b i strong del2.行内块元素：在一行内显示，可以设置宽高：（有缝隙 不常用）img 表单控件3.块元素 ：可以设置宽高，独占一行div 标题标签（h1-h6） 列表标签（ul-li ol-li dl>dt+dd 段落标签 （p pre））元素嵌套规范：1.同一级别可以相互嵌套2.级别高的可以嵌套级别低的元素3.p标签只能嵌套行内元素4.a链接不能相互嵌套元素的转换：1.块元素：display：block；2.行内块元素：display：inline-block；3.行内元素：display：inline；背景图片以及浏览器内核背景图先设大小，在引background；background: url(‘路径’) no-repeat left bottom/contain；//图片位置 禁止重复 位置（top bottom left right）路径：background-image：url（“”），url（“”）；加载多张背景图背景图大小： background-size：100px auto，100px auto； 会重复背景的图重复：4. background-repeat：no-repeat，repeat；（无重复）5. background-repeat：repeat-x（x方向重复）background-repeat：repeat-y（y方向重复）背景图的位置：background-position：x y；（数值 方位值（top/bottom left/rightcenter（可以省略）） ）背景开始渲染的位置： background-origin: ;8. padding-box；（默认）从padding位置开始渲染9. border-box；从边框的位置开始渲染content-box；从内容的位置开始渲染图片结束渲染的位置：background-clip: ;11. padding-box；（默认）从padding位置结束渲染12. border-box；从边框的位置结束渲染content-box；从内容的位置结束渲染使得背景图加载到浏览器中background-attachment: fixed;8.可以简写：background：空格隔开；背景图渐变background: linear-gradiend(top，颜色1，颜色2，颜色n)//渐变开始的方向（默认top） 类似25deg（25度）10.浏览器内核//背景色渐变1. /* 标准语法 */例子：background: linear-gradient(top,#3bbcff,#47eaff);2. /* 谷歌内核 -webkit- */例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);3. /* 火狐内核 -moz- */例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);4. /* 欧鹏内核 -o- */例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);5. /* IE内核 -ms- */例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);文件的读取方法路径绝对路径：从盘符开始的一条完整路径相对路径：两个文件的位置关系边框的相关属性【圆角，边框形状】border-radius：边框的半径 设置圆角 n%或者num像素border-style:dotted solid double dashed;上边框是点状右边框是实线下边框是双线左边框是虚线透明度透明性的选择：（整个容器都变）opacity：；0-1之间的值；字体font-family =“ 字体” //字体样式可以被继承鼠标移入样式span标签cursor：pointer； 鼠标样式：手型阴影box-shadow：x轴偏移量 y轴偏移量 阴影的模糊程度 阴影的大小（0和本身一样大小） 阴影的颜色；引入字符图标引入字符图标：行内元素 随意span class=“iconfont 图标类名”可调节样式： 同文字文档流文档流：标准情况下 ，页面元素从左往右 从上往下 依次排列flex布局(规范的设计稿)-d性布局容器（父元素）的属性：【display:flex;】*flex-direction: 决定主轴方向。
row 主轴在水平方向，从左向右（默认）。
row-reverse 主轴在水平方向，从右向左column 主轴在垂直方向，从上到下column-reverse 主轴在垂直方向，从下到上*flex-wrap: 决定项目换行wrap: 项目换行nowrap: 项目不换行（默认值）wrap-reverse： 项目换行且反转*justify-content: 决定项目在主轴的对齐方式flex-start;主轴的起点flex-end;主轴的终点center;主轴的中心space-between;两端对齐space-around;项目两侧距离相等*align-items：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）flex-start:交叉轴的起点flex-end：交叉轴的终点Center：交叉轴的中心baseline： 基线对齐（文本底部）*align-content:定义项目在交叉轴上的对齐方式（仅适用于多根轴线）flex-start;交叉轴的起点flex-end;交叉轴的终点center;交叉轴的中心space-between;两端对齐space-around;两侧距离相等子元素（项目）的属性：*order：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。
*flex-grow:定义项目的放大比例。
默认值为0，即使存在剩余空间，也不放大。
*flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;*align-self:定义单个项目在交叉轴的对齐方式.flex-start:交叉轴的起点flex-end：交叉轴的终点Center：交叉轴的中心滚动条overflow-x：auto；超出部分在x轴的表现形式。
auto：自动；（如果超出，就自动以滚动条的形式显示）去滚动条： 加在具有overflow属性的元素身上::-webkit-scrollbar{height：0；}overflow-x: visible|hidden|scroll|auto|no-display|no-content;值 描述 测试visible 不裁剪内容，可能会显示在内容框之外。
测试hidden 裁剪内容 – 不提供滚动机制。
测试scroll 裁剪内容 – 提供滚动机制。
测试auto 如果溢出框，则应该提供滚动机制。
测试no-display 如果内容不适合内容框，则删除整个框。
测试no-content 如果内容不适合内容框，则隐藏整个内容。
测试轮播图swiper(.js).com表格[行] [列]table身上的属性table身上的属性：border：表格边框 cellspacing：单元格间的间距cellpadding：单元格的内容与其边框的内边距bgcolor：表格的背景颜色 background：表格的背景图片width：表格宽度 height：表格高度border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于 前两个边框宽度之和caption：表格标题background:表格背景图cellspacing:单元格之间的间隙宽度align:表格的水平对齐方式，通常是left，center，right表格的标题<caption align=”水平对齐方式” valign=”标题与表格的相对位置”></caption>单元格【tr】【td】width：单元格宽度height：单元格高度align：单元格内文本的对齐方式,通常是左，中，右 left，center，rightvalign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottomnowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行<tr align=”center” valign=”bottom”><td align=”center” nowrap>手机空中免费充值</td><td width=”100px”>IP卡</td><td width=”100px” bgcolor=”#006400″ valign=”top”>网游</td></tr>表格的跨行与跨列【td】rowspan：跨行标签，表示跨了多少行colspan：跨列标签，表示跨了多少列表格标签拓展及其属性thead：定义表格的表头。
tbody：定义表格主体（正文）。
tfoot：定义表格的页脚（脚注或表注）。
colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。
注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。
1、<thead> 内部必须拥有 <tr> 标签！2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
4、必须在 table 元素内部使用这些标签。
5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。
标题栏《tr》<th></th>《/tr》 用法和td相似 知识自动将单元格内容以粗体显示表单控件表单标签<form action=” ” method=” “>action:表单信息提交的位置；method：提交的方式get：地址栏，信息量少，安全性低post：信息量多，比较安全1.输入文本【输入框】：用户名：<input type=”text” placeholder=”请输入用户名” maxlength=”10″ value=” ” name=”username” class=””>placeholder：默认提示文本;maxlength:规定输入的最大字符数name:本文本框的名字，与后台进行数据交互用class:定义本文本框的样式，相当于盒子placeholder下的缩进text-indent：2em；缩进2.输入密码【密码框】：密码：<input type=”password” placeholder=”请输入密码” maxlength=”10″ value=” ” name=”psw” class=””>3.单选按钮[name的值必须相同]：请选择你的性别：<label for=”man”> [label实现点什么就选中 ，for中的值和id中的值相同]男：<input type=”radio” name=”sex” id=”man” checked> //checked默认选项</label><label for=”woman”>女：<input type=”radio” name=”sex” id=”woman”></label>4.多选按钮[name的值必须相同]：请选择你喜欢的音乐：摇滚：<input type=”checkbox” checked>摇滚：<input type=”checkbox” checked>摇滚：<input type=”checkbox” checked>5.下拉列表【下拉框】：选择你的学历：<select name=”” id=””><option value=””>学士</option><option value=””>博士</option><option value=””>硕士</option></select>6.上传文件：选择你的照片：<input type=”file”>7.留言文本空间：<textarea name=”” id=”” rows=”” col=””></textarea>8.用户是否允许重新设置textarea大小css属性：resize:none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向 拖动9.重置按钮：<input type=”reset”>10.提交按钮：<input type=”submit”>11.自定义按钮：<input type=”button” value=”按钮”><button>搜索</button>12.颜色：<input type=”color”>13.时间日期：年月：<input type=”month”>年周：<input type=”week”>时分：<input type=”time”>年月日：<input type=”date”>年月时分：<input type=”datetime-local”>14.验证<input type=”email”> 邮箱验证<input type=”tel” autofocus> 电话15. autofocus 自动获取焦点</form>文本模型文本换行使非中日韩文本换行word-break: break-all ;文本禁止换行white-space:nowrap;单行文本溢出部分以省略号显示overflow: hidden;(放文本的容器)text-overflow: ellipsis;多行文本溢出指定为d性盒子display: -webkit-box;在d性盒模型中指定元素的排列顺序-webkit-box-orient: vertical;指定文本显示（溢出）的行数;-webkit-line-clamp: 3;height要是line-height的倍数line-height: 70px;overflow：hidden；音频视频标签音频标签<audio src=”” controls loop autoplay></audio>controls 空间向用户显示：loop 循环播放autoplay当前页面加载完自动播放视频标签<video src=”” controls loop autoplay></video>H5语义化标签<header>头部</header><nav>导航</nav><aside>侧导航<aside><section>页面中的某一部分</section><main>主体</main><footer>底部</footer>meta标记【签】name=”关键字” cantent=”内容”<mate http-equiv=”Refresh” content=”10″;url=”跳转路径”> //每10s刷新一次并且跳转到跳转路径知识的文件bgsound标签<bgsound src=”路径” loop=”播放次数”>body属性bgcolor:背景颜色background：背景图片text：文档中文字的颜色link：超链接的颜色alink：正在访问的超链接的颜色vlink：已访问过的超链接的颜色leftmargin/rightmargin/topmargin/bottommargin： 左/右/上/下边距的像素值对文字 *** 作的标签<p></p>开始一个新段落，可单可双换行标签，单独标记<pre></pre>预格式化【敲什么样式，显示什么样式】<font></font> 用来设置文字的字体 大小 颜色 粗细等文字样式标记[均成对出现]b 粗体 i 斜体 u 下划线 tt 等宽sup 上标体 sub 下表体 strike 删除线 big 大号字样small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样列表标签符号列表<ul type=”circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）”>2. <li><li></ul>排序列表<ol type=”1(数字) /a（a，b，c..）/ A(A,B,C…)/ i(i,ii,iii,…)/ I(I,II,III,…)”>4. <li><li></ol>a标签<a href=”路径 ” title=”鼠标移入时显示的文字” target=” “(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) …[字符实体]常用的转义字符显示结果 描述 实体名称空格< 小于号大于号& 和号” 引号‘ 撇号 (IE不支持)￠ 分（cent）£ 镑（pound）¥ 元（yen）€ 欧元（euro）§ 小节© 版权（copyright）® 注册商标™ 商标× 乘号÷ 除号选择器分类css选择器1.通用选择器：*｛｝//选择所有的标签2.群组选择器：E1,E2,E3..｛｝//选择E1 E2 E33.标签选择器标签名｛｝4.类名选择器：.类名｛｝5.后代选择器.E1 .E2｛｝ //选择E1 的后代E26.交叉选择器标签名.类名｛｝7.id选择器例如 创建id<div id=“box”></div>#id名｛｝ //选择页面中id为**的标签8.伪类选择器：鼠标移入状态E：hover{ } E元素选择鼠标移入状态E：hover .子类{ } 选择e元素下鼠标移入时子类的变化获取焦点，用于表单的输入E: focus{outline: none;}9.伪结构选择器：E：first-child｛｝ 作为子元素的第一个孩子的E标签E：last-child｛｝ 作为子元素的最后第一个孩子的E标签E: nth-child(n){} //作为子元素的第n个孩子的E标签E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签E：first-of–type｛｝ 作为子元素的同类型的第一元素E：last-of–type｛｝ 作为子元素的同类型中的最后一个元素E: nth-of–type（n） 作为子元素的同类型中的第n个元素E: nth-last-of–type(n) 作为子元素的同类型中的倒数第n个元素（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）例子：5.15/伪结构选择器10.伪元素选择器：::after{} 在元素之后加入一个::before{content：“内容之前”；color：；} 在元素之前属于行内元素::after{} ::before{}伪元素 content：””； 样式必须写11.子类选择器相邻兄弟选择器E1+E2｛｝ 选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）div.box>a+img a和img统计子类选择器E1>E2{} 选择E1的子类元素E2例子：div.box>div.item{$}*20div.box>a>img12.属性选择器[属性名]{} 选择所有拥有属性为 属性名 的元素[属性名=“value”]｛｝ 选择拥有属性名的属性 且属性值为valueE[属性名=“value”]{} 选择拥有属性名的属性 且属性值为value的E元素E[属性名~=“value”]{} 选择拥有属性名的属性 并且属性值一个或者多个，其中一个属性值为value的E元素E[value^=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 开头的E元素E[value$=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素E[value*=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值包含 1 的E元素例子：属性选择器选择器的优先级宗旨：越具体的优先级越高id (100 ) > class( 10 )> 标签名( 1).box .son{ } 10+10=20abcde优先级（e为个位）：a:行内样式b:id选择器c:类名选择器 伪类选择器（：hover） 属性选择器d:标签选择器 伪元素选择器 （：：after）e:通用选择器有一个选择有中有一个abcde在其位置+1移动端布局步骤修改视口<meta name=”viewport” content=”width=device-width”>视口：视觉视口，布局视口，理想视口em:当前字体的倍率 100px=10emrem：html字体的倍率移动端窗口 375*667html{font-size：0.5rem；}.box{width： 750rem； //375px=750rem*0.5px ； 100px=1remheight： 1334rem；}引入rem.js<script src=”路径”></script>修改rem.js中设计稿的宽度100px=1rem
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）