前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录
HTML结构
作用：–有哪些内容组成
一、标签（标记、元素）
-
基本标签
- <!DOCTYPE html> //HTML5标准,文档声明标签 <html lang="en"> //语言为英文的; zh-CN中文,ja-jp日文;可以给搜索引擎译中 <meta charset="UTF-8"> //字符集,用UTF-8万国码密码本编码解码为0101 - 文本标签 <h1>一级标题</h1> ...自带加粗，独占一行，默认间距 - 段落标签 <p>段落文本内容</p> 段落之间有间距 - 换行 <br/> - 水平线 <hr/> - 文本加粗 <b>加粗内容</b>; <strong>强调内容</strong> - 倾斜 <i></i>; <em></em> - 删除线 <s></s>; <del></del>; - 扩展 下划线 <u></u> 下标 <sub></sub> 上标 <sup></sup> -
htmltagwrap插件- alt+w --> < p>< p>
-
Auto Rename Tag插件- < XX></ XX>前后对应自动修改
-
Live Sever插件- 实时修改页面
-
open in browser插件- 在浏览器中显示
-
<标记 属性= “属性值”></标记>
<标记 属性= “属性值” />
属性 属性值 备注 width “600” 宽度 align “left\right” 居中/左/右 color “green\blue” 颜色 -
-
< div></ div> 无具体意义，但能划分区域(< div>*3)
-
< span style=“color=XX”> 没有实际意义，当文本独立修饰的时候，内容有多宽就占用多宽的空间距离，不改变格式
-
注释：ctrl+/ 即<! ---->
-
回车：ctrl+enter
二、列表，表格，表单
1、列表
- 无序列表
（li里面可以随便放标签，但ul里面只能放li；默认生成黑色实心圆；还有空心圆、正方形、无）
<ul type="disc/circle/square/none">
<li>无序列表</li> <li>无序列表</li>
</ul>
–快捷键ul>li{aaa}*3 回车
- 有序列表
（li里面可以随便放标签，但ol里面只能放li；数字自动生成）
<ol type="1/a/A/i/I",start="4"> 开始标记从第四个开始
<li>有序列表</li> <li>有序列表</li>
</ol>
- 自定义列表
<dl>
<dt>图片1</dt>
<dd>文字1</dd>
</dl>
<dl>
<dt>图片2</dt>
<dd>文字2</dd>
</dl>
–快捷：dl>dt{111}+dd{444}
2、图片
先将所需图片放入总文件的图片文件夹下
<img src="imggg/XXX.gif> “img图片文件夹下的XX图片”
“./表当前路径下的XXX.gif” “…/表上一个文件夹的内容”
| 图片标签下的属性 | 属性值 |
|---|---|
| title | 鼠标悬停上去之后的提示信息 |
| alt | 图片不显示之后（加载失败）的提示信息 |
| width | 200px |
| height | 200px |
3、超链接–实现不同页面的跳转
< a href=“已有网站/自己的html路径”> 内容、img </ a>
| 属性 | 属性值 | 备注 |
|---|---|---|
| title | XXX | 鼠标悬停的提示信息 |
| target | _self 默认值”当前页面“ | 规定在何处打开文档 |
| _blank “新窗口打开” |
4、table表格
<table>
<tr>
<td>11</td><td>22</td>
</tr>
<tr>
<td>333</td><td>444</td>
</tr>
</table>
–快捷：table>(tr>td)*2---------可直接设置第一行每个单元格的宽度
| 属性 | 备注 |
|---|---|
| width、height | (总表格、单元格)宽度、高度(px或百分比) |
| border | (表)外边框线的宽度 |
| bordercolor | (表)边框的颜色 |
| bgcolor | 背景颜色 |
| cellspacing | (表)单元格与单元格之间的间距 |
| cellpadding | (表)单元格与内容之间的间隙 |
| align=“left\right\center” | (文字、表格)水平对齐 |
| valign=“top\middle\bottom” | (文字)垂直对齐 |
| Colspan=“2” | 合并的单元格的列数，必须给td 横着来占 |
| Rowspan=“4” | 合并的单元格的行数，必须给td 竖着来占 |
5、表单1 --收集用户信息给后端input
<form method="get\post" action="向何处发送表单数据">---js
用户信息：<input type="text" placeholder="请输入你的用户名" name="username">
<br>
密码：<input type="password" placeholder="请输入你的密码">
<br>
<input type="submit" value="登录"> 点击提交信息到action指定的地址--后端地址
==<button type="submit">登录</button>
</form>
----type=“text文本框”、“password密码框”、“submit提交框”、“button按钮框”、"reset重置框"
CSS表现
作用：决定页面是怎么样子的，横向纵向？怎么布局？–布局 配色 定位 做动画等
一、CSS语法
1.外部样式表
-
CSS样式–选择符h3和声明{}，声明–属性和属性值
-
声明内容放在{}中，属性和属性值用：连接，属性有多属性值时，不分先后空格隔开
-
每条声明用；结束
①<!-- 直接在html中嵌入CSS，最好放在head中 --> <style> h3{color: blue;} h2{color: brown; } </style> ②<!--另外新建一个css，直接将CSS样式放在css文件中--> h3{color: blue;} h2{color: brown; } <!-- 在html中使用CSS样式，head(最好使用link，兼容性更好些)--> <link rel="stylesheet" type="text/css" href="css/index.css> 或者<style> @import url(css/index.css); </style>
2.行内样式表
③类似与span，<h3 style=“color: blue;”;>
----样式属性的优先级：就近原则
②外部样式link <①外部样式直接 <③行内样式
改变最高优先级：XX:XXX !important;
3.选择器
（1）标签选择器
div、h1、p、strong、tr、ol{}
（2）类选择器
<style>
.aaa{background-color: aqua; }
.bbb{}
</style>
<h5 class="aaa bbb">xnfjdfsdk</h5>
（3）id选择器
<style>
#box1{background-color: aqua; }
#box2{}
</style>
<h5 id="box1">xnfjdfsdk</h5> 唯一id
（4）通配符选择器
作用：清除所有元素的默认边距值和填充值
*{
margin:0; 外边距
padding:0; 内边距
}
（5）群组和后代(包含)选择器
①群组选择器
div,.box1,h1{ ---中间逗号
background-color:yelliw;
}
<div>dhjka</div>
<h5 class="box1">xnfjdfsdk</h5>
<h1>dsf</h1>
②后代选择器
div h1{ ---中间空格
background-color:yelliw;
}
<div>
<h1>dhjka</h1>
</div>
（6）伪类选择器–也可用于盒子.box:hover{}
<style>
a：link{属性：属性值;}超链接的初始状态
a：visited{属性：属性值;}超链接被访问后的状态
a：hover{属性：属性值;}鼠标悬停时状态（一般情况下都要另外定义）
a：active{属性：属性值;}鼠标按下时超链接被激活时的状态
</style>
<a href="已有网站/自己的html路径> 内容、img </a>
注意：四者的顺序不能改，不然样式被覆盖失效
（7）选择器的权重
—多选择器且有属性冲突：(!important)
元素选择器 <Class选择器 <id选择器 <包含选择器(权重之和比较) <行内样式
二、CSS核心属性
1.css文本属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| font-size | 字体大小 | 分辨率：像素px(浏览器默认16px，设计图常用12px) |
| font-family | 字体 | 宋体，仿宋，楷体， 微软雅黑……（连续时用逗号隔开） |
| color | 颜色 | color:red; color:#ff0; color:rab(255,0,0); 0-255 |
| font-weight | 加粗 | font-weight:bolder(更粗的)/bold(加粗) /normal(常规) |
| font-weight:100-900; 400正常 600-900加粗 | ||
| font-style | 倾斜 | italic(斜体字) /oblique(倾斜的文字) /normal(常规显示) |
| text-align | 文本水平对齐 | left; right; center; （justify;水平2端对齐，但是只对多行起作用） |
| line-height | 文字行高 | 100px; (line-height)=(height)时可实现单行文本垂直居中 |
| text-indent | 首行缩进 | 可以取负值；该属性只对第一行起作用(XX:2em==&emsp$emsp) |
| letter-spacing | 字符间距 | 文字或字符之间的间距 |
| word-spacing | 单词间距 | 英文单词之间的间距 |
| text-decoration | 文本修饰 | none 没有、under下划线、overline上划线、over-through删除线 |
| font | 文字简写**** | font是style weight font-size/line-height family的简写 |
| font:italic 800 30px/80px “宋体”；顺序不能改变 |
2.css列表属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| list-style-type | 列表符合样式 | disc(实心圆)、circle(空心圆)、square(实心方块)、none(去符号) |
| XX-image | 将图片设置为列表符合样式 | list-style-image:url(img/1.jpg)； |
| XX-position | 列表项标记(type、image)的放置位置 | outside；默认值列表的外面 inside；列表的里面 |
| list-style | 简写 | XX：none;去除列表符号；顺序可变 |
简写/复合写：list-style: none inside url(img/VS.png);
3.css背景属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| background-color | 背景颜色 | XX：red；rgb(0,0,0); |
| XX-image | 背景图片 | XX-image:url(img/1.jpg)； |
| XX-size | 图片大小 | px px、XX% XX%、 cover(扩展到足够大，会被裁掉一些)、contain(最大尺寸，盒子有留白) |
| XX-repeat | 图片的平铺 | no-repeat/repeat/repeat-x/repeat-y; |
| XX-position | 图片的定位 | XX: 水平位置(right/center/left) 垂直位置(top/center/bottom)；可为负值 |
| XX-attachment | 图片的固定、滚动 | scroll(默认滚动)/ fixed(固定，固定在浏览器窗口的位置里，固定之后就相当于浏览器窗口了，与盒子无关–不在盒子范围时不显示); --视觉差demo |
| background | 简写 | 可以只取一个值，其他的默认值显示(会覆盖)；size只能单独使用；空格隔开；顺序可以换 |
4.css边框属性–盒子模型
5.css浮动属性–盒子水平排列
-
作用：定义网页中其他文本如何环绕该元素显示；让竖着的东西横着来(该样式浮动，后面的顶替原先位置，会依次排序)
float:left;元素靠左浮动
right;元素靠右浮动
none;不浮动
-
清浮动
若前多者浮动完将后者挡住，要将其挡住内容重新显现出来，位置下移–计算高度差线：
①写固定高度(即已知前面的高度来固定前多者整体的高度)
②清浮动 --只是改变元素的排列方式，该元素还是漂浮着的，不占据文档位置
clear: none; 允许前面有浮动对象 –即放在后者样式中
:right; 不允许右边有浮动对象
:left; 不允许左边……
:both; 不允许有浮动对象
③在两者中间(即后者前面加一个空盒子，不设宽高，clear:both;)
<div class="box1"></div> <div class="box2"></div> <div style="clear:both;"></div> <div class="box2"></div>④bfc，让浮动元素计算整体高度
.cc{overflow:hidden;} <div class="cc"> <div>aa</div> <div>bb</div> </div>
三、盒子模型
1、内边距（内容与边框之间的距离）
–背景色会蔓延到内边距–不支持负值
padding：20px、30px；
1个值,4个方向一样；2个值,上下 左右；
3个值,上 左右 下；4个值,上 右 下 左（顺时针方向）
padding-方向：XX；（top、bottom、left、right）
2、边框（包裹在内容的外部）
–背景色会蔓延到边框
- border：10px solid red;
style样式：solid 实线、double双实线、dashed方点状线、dotted圆点状线
- border-方向：XX；（top、bottom、left、right）
- --width、style、color三者可以分开定义四个方向
-
倒三角▼的实现：
{ width:0px；height:0px；(border里面的内容大小为0-0) border-top:20px solid black;（上面的三角形为黑色，其他三个为透明） border-top:20px solid transparent; border-top:20px solid rgba(0,0,0,0); border-top:20px solid transparent; top:-10px; （使▼放到中间） }
3、外边距（两个边框之间的距离）
–背景色不会蔓延到外边距–支持负值
- margin：20px、30px; （和padding一样）
--用XX：0，auto可水平居中，但不可以与 float: left;放在同一个div中
- margin-方向：XX；（top、bottom、left、right）
- *{padding：0；margin：0；}
-
特性：1、兄弟关系，两个盒子外边距合并问题：
①垂直方向，外边距去两者max；
②水平方向，外边距会合并+；
2、父子关系，给子盒子加外边距，但作用于父身上–解决（即要实现父盒子位置不动，子盒子动）：
①从子盒子–>给父盒子加内边距pading-top，+父盒子的height减掉相应大小（X）
②子盒子加外边框，+给父盒子设置边框 border: 1px solid green(transparent透明的)；
③子盒子加外边框，+给子盒子/父盒子加浮动 float:left;（是两者不在同一个层面）
④子盒子加外边框，+给父盒子加 BFC overflow:hidden.
4、PS基本操作（–P62、63盒子–66溢出）
用ps可以量取出每个盒子的对应边框、边距、大小等，还能吸取颜色
- 图片放大缩小：ctrl+"+_" alt+鼠标滑动
- 图片移动：空格，鼠标变小手，拖动图片
- 调整出标尺：ctrl+r
- 截图：
①快捷键：选中区域----ctrl+c(复制)-----ctrl+n(新建图层)-------回车-------ctrl+v(粘贴)-----ctrl+s(保存)
②切片工具：选中区域---点击文件--存储为web所用格式（格式:仅限图像，切片:所有用户切片）
- 吸取颜色：吸吸笔--点击颜色/右击--获取十六进制
四、其他
1、溢出
overflow:visible; //溢出也会显示内容(默认) ------overflow-x: X轴溢出；------overflow-y: Y轴溢出；
| 其他属性 | 说明 |
|---|---|
| hidden | 隐藏（多余内容剪切） |
| scroll | 滚动（溢出内容以滚动方式显示，不管是否溢出都会有滚动条） |
| auto | 有溢出-滚动条；无溢出-正常 |
| inherit | 应遵从父元素继承overflow属性的值 |
-
修改滚动条样式----- : :webkit_scrollbar{ display:none; } //隐藏滚动条
-
溢后如何处理元素内的空白
white-space： normal默认值，空白被浏览器忽略
属性 说明 nowrap 文本不换行，同一行上继续，直到遇到换行符 pre 显示空格、回车、换行– 预格式化文本，保留编辑格式
pre-wrap 显示空格，回车，换行 pre-line 只显示回车，不显示回车、换行 inherit 隐藏 -----溢出省略号的实现：
white-space：nowrap； //不换行 overflow：hidden； //溢出部分隐藏 text-overflow：ellipsis； //显示… （clip裁断）
2、元素类型
-
块元素：会默认含有**{display:block、list-item;}**（矩形区域）—属性默认一行，自上而下排；宽度高度；可包裹其他元素
div、p(不可嵌套div)、ul、li、ol、dl、dt、dd、h1-h6等
-
行内元素：会默认含有**{display:inline;}**（行形式）—无宽高；可以横着排列
a、b、em、i、span、strong等
-span只能设置左右边距，不能设置上下边距
-
行内块元素：{inline-block;}—宽度；一行一行显示
img{}、input{}等
-
元素的相互转换（抽奖小功能.hide）
将属性display的值改掉：block–占据整行，显示整块内容；
inline–对应文字长度；none–隐藏
—二级菜单（嵌套< ul>，二级菜单.html）
注意控制的对象不一样–hover的位置不一样
3、定位
position：static;（默认值）------------top:50px;-----left:50px;
| 属性值 | 说明 | 文档流 | 偏移位置 |
|---|---|---|---|
| static; | 静态定位 | 默认 | 默认（50px–无效） |
| relative; | 相对定位 | 不脱离 | 相对于自己的初始位置移动（右下移动50-50） |
| absolute; | 绝对定位 | 脱离 | 直接定义距离左上角的距离：①当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏；②有父元素且父元素有定位，参照物是父元素 |
| fixed; | 固定定位 | 脱离 | 浏览器的当前窗口(很多右下角固定广告) |
| sticky; | 粘性定位 | 可以做吸顶效果，粘性定位是css3新增的，兼容性不好 |
4、锚点–点击后跳到该页面对应位置 a链接
<a href="#锚点名字"></a> /*跳转的对应位置*/
<div id="锚点名字"></div> /*点击位置*/
5、精灵图
CSS Sprites的原理（图片整合技术）（CSS精灵/雪碧图）
①将图片整合成一张背景图 ----{background:yellow url(./dabeijing.png);}–显示左上角的小区域
②显示对应位置的小区域，用.box1{background-position：-205px;-111px;}来实现背景图片的定位技术
优势：可以减少对服务器的请求次数，从而提高面的加载速度；可减小图片的体积。
6、宽高自适应、窗口自适应
导航栏、通栏布局、平均宽高度(根据内容来撑大小)
-
不写或者auto就是自适应----宽度自适应—{width:auto;}
-
高度自适应—{height:auto;}--------设置最小/大 高度/宽度{min-height：500px；}
-
浮动元素之父元素高度自适应----父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
①给父元素加声明overflow:hidden;（缺点：会隐藏溢出的元素）
②在浮动元素下方添加空块元素，并给该该空元素添加声明< div style=“clear:both;” ></div height:0; overflow:hidden;}（缺点：在结构里增加了空标签，不利于代码可读性，且降低了浏览器的性能）
③万能清除浮动法
div:after{content:" "； //插入空的伪元素--默认为行内的 clear:both； //清除浮动 display:block； //改成块内元素的 width:0；height:0； visibility:hidden；/overflow:hidden；} //占位 但不显示出来 -
伪元素：—不是标签也能显示增加的内容
选择符::after{content属性一起使用，定义在该对象后的内容} div：：before{content属性一起使用，定义在该对象前的内容} div：：first-letter：定义对象内第一个字符的样式 div：：first-line：定义对象内第一行文本的样式 -
窗口自适应–盒子根据窗口的大小进行改变：
:root/html, body{ height:100%;}
-
二/三栏布局： -----可以应用于各种宽度的浏览器
定左定右，中间定位：(注意顺序) ①先左右盒子浮动+定中间盒子距离窗口左右两边距离 {margin-left:200px; margin-right:200px;} ②三者都浮动+中间盒子的宽度要先定义 {width：calc(100% - 200px);} //- 左右有空格--宽度会改变 注：calc()函数：用于动态计算长度值 -----支持+ - * /运算
7、表单进阶2
-
"radio单选框" —一般用于注册页面、反馈页面中
<div> <div>你的性别</div> <div> <input type="radio" name="sex" id="man" checked="checked"> /*一样的name表示是同一个框框内容，会相互制约，一起给后端；checked表示默认选中-可省略一样的英文*/ <label for="man">男</label> /*表示点击”男“字也是同样效果*/ </div> <div> <input type="radio" name="sex" id="woman"> <label for="woman">女</label> </div> </div> -
"checkbox复选框" --其他都一样
-
"file上传文件/图片等" 和 "hidden隐藏字段"
<input type="hidden" name\id="" value="带给后端的个人信息"> -
"image图片按钮"-代替提交按钮submit----点击按钮提交给后端
<form action=" "><input type="image" src="submit.jpg"> </form>
-
禁用— disabled、只读— readonly
<botton disabled="disabled">注册</botton> <input type="radio disabled">不满意 <input type="text" readonly value="111111"> -
"select下拉菜单"
<div> <div>你的收获地址</div> <select size="2" multiple> /*属性：size="2"控制要显示几个，默认为一；multiple 可多选*/ <option value="gz">广州</option> /*value提供给后端需要用的value值*/ <option value="sz">深圳</option> <option value="st" selected>汕头</option> /*selected默认选中*/ </select> </div> -
"textarea多行文本输入框-文本域" —会有竖直方向的滚动条
textarea{width:300px; height:200px; resize:vertical; /*垂直方向重新设置大小，horizontal水平方向，默认both两个方向，none都不可随意拖动*/ } <textarea cols="10" rows="10" placeholder="请输入你的意见:提示文字">/*提前设置好的value:会显示出来---注意空格换行*/ </textarea> -
"fieldset字段集"–有分割线的小分组
fieldset{XXX；} <fieldset> <legend>爱好</legend> <!--自动出现缺口添字--> <input type="checkbox" name="aihao">打篮球<br> <input type="checkbox" name="aihao">跑步<br> <input type="checkbox" name="aihao">听歌<br> </fieldset>
8、备注
-
默认后来者居上(层) ------{z-index:200;} 属性值谁大谁在上层显示
-
将行元素转化为块元素：①display：block；②绝对定位 absolute；③浮动 float：left；
-
元素水平垂直居中：
①margin：0 auto；--水平方向居中 ②{width:200px;height:200px; position:absolute; top:50%；left:50%; /*先移到窗口/窗口50%-50%的位置,再往回移盒子一半宽一半高*/ margin-left:-100px； margin-top:-100px； } --水平垂直居中 ③{text-align:center; --文本、图标水平居中 line-height:50px;(=height)} --垂直居中 ④父盒子{display:flex;} .center{margin:auto;} --水平垂直居中
-
浮动和绝对定位的区别：float：半脱离，文字环绕效果
absolute：全脱离，不会出现文字环绕效果
-
一般都加 :
<style> *{ /*清除所有元素的默认边距值和填充值*/ margin:0; 外边距 padding:0; 内边距 } html, body{ height:100%;} /*窗口自适应--盒子根据窗口的大小进行改变*/ </style> -
大背景显示qq空间动态图：大盒子.box{background-image: url(./a.png)；}
-
行内块图标和文字对齐，让后面文字垂直居中：
span{vertical-align:middle;}
-
HTML5+CSS3新增
一、HTML5新增
1、新增语义化标签
—容易给其他开发者或爬虫看的
header{XXX} section{YYY} ---需要自己加样式
<header>header</header>
<section>
<nav></nav>
<main></main>
</section>
<footer>footer</footer>
| 元素 | 说明 |
|---|---|
| header | 页面(某页面的块^)的整个头部 |
| footer | 页面(某页面的块^)的整个底部脚注 |
| section | 整个页面的身体内容块 |
| nav | 页面中导航链接部分 |
| aside | 页面侧边栏 |
| article | 页面中一个个区和块 |
| figure | 独立的内容标签，配合figcaption来为其添加标题(第一个或者最后一个子元素的位置) |
| main | 页面中的主要内容(ie不兼容) |
2、音频标签、视频标签
–可替代flash(很多都不支持)
也可以使用CSS样式：video{XXX}
<audio/video src="XXX controls loop width=“200px” height=“200px” >
//可加网页服务器上或者自己文件中的音频；controls 控制栏； loop自动循环；autoplay有些可以自动播放；muted静音播放 ；poster="YYY.jpg"视频播放前的海报显示
3、表单3
< from><input type=“range” name=“range” min=“100” max=“200” value=“100” step="2>
可以定义元素的范围—min;max；初始值—value；移动步长—step
一定要放在表单中–name–提供给后端
| 表单元素 | 说明 |
|---|---|
| color | 选取颜色 |
| 填写邮箱 | |
| url | 填写完整网址 |
| tel | 填写手机号码，一般适用于手机 |
| range | 滑块效果 |
| number | 保证输入的是数字 |
| search | 搜索框 |
| date/month/week | 日期选择-日历 |
| datetime-local | 填写当地详细时间 |
4、数据/选项列表datalist
<input type="text" list="mylist"> --将两个关联，使得text中显示datalist的对应内容
<datalist id="mylist">
<option value="手机"></option>
<option value="手表"></option>
<option value="手镯"></option>
</datalist>
5、属性
| 属性 | 说明 |
|---|---|
| autofocus | 获取焦点(页面中只能有一个) |
| required | 必填字段，填完整 否则有提示 |
| multiple | 支持多个地址、文件，用逗号隔开 |
| pattern | 正则表达式，提交时会检查是否符合给定格式 |
| <input pattern="[0-9][A-Z{3}"（表示1+3） | |
| name | 传输给后端的名字 |
| value | 初始值 |
| step | 移动步长 |
二、CSS3新增
1、解决功能属性不支持浏览器的方法
①渐进增强–针对低版本浏览器进行构建页面，保证最基本的功能–再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
②优雅降级–一开始构建完整的功能，再针对低版本浏览器进行兼容
2、新增选择器–页面布局
（1）层级选择器
.box1>div{XXX} //当前元素的子元素
.box1+div{XXX} //当前元素的后面的第一个兄弟
.box1~div{XXX} //当前元素的后面的所有兄弟
<div class="box1">1111</div>
<div>2222</div>
<div>3333</div>
（2）属性选择器
标签【属性~=XX】{} ------ “=” 表得完全匹配，“~=”为包含匹配
模糊匹配：class^=b ------开头是b的匹配
class$=b ------结尾是b的匹配
class*=b ------含有字符b的匹配
[class]{XXX} ---只要有class属性的元素都会被选择
div[class]{XXX} ---有class属性的为div标签的元素才会被选择
[class=box1]{XXX} ---只有class属性且值为box1的元素都会被选择
<div class="box1">1111</div>
<div class="box1">1111</div>
<p class="box1">1111</p>
（3）结构伪类选择器
li：first-child{XXXX} --第一个孩子
ul li：last-child{XXX} --最后一个孩子
li：nth-child(4),li：nth-child(2){XXXXX} --偶数2n(even)、奇数2n+1(odd)、前5个(-n+5)
div：empty{XXXX} --没有孩子的div、onlychild只有一个孩子的div
（4）目标伪类选择器–锚点反应
div:target{background:yellow；} ---刚好处于目标节点时会适用该样式--点击锚点后除跳转以外对应位置背景为黄色（还会有的其他属性样式）
<a href="#锚点名字"></a> ---跳转的对应位置
<div id="锚点名字"></div> ---点击位置
----折叠面板
div.content{ display:none；} ----表未点击锚点aaa时内容被隐藏
div.content:target{display:block；} ------点击锚点aaa时内容被显示
<a href="#aaaa">aaa</aaa>
<div id="aaa" class="content">点击aaa后显示的内容(被折叠了)</div>
（5）UI状态伪类选择器
(用户界面)-----一般用于表单
input：enabled{XXX} ----已应用元素的样式(默认)
input：disabled{XXX} ----已禁用…
input：focus{XXX} ----获取焦点，会匹配此选择器
div：：selection{background:yellow；color:red；} ---被选中或高亮状态时div上文字时会出现的样式
<input type=" " disabled>
<!--checkbox比较特殊-->
input【type=checkbox】{appearance:none;XXXXX;} ---清楚原先的样式，再定义未点击时的样式
input:checked{XXX} ---点击选中时的样式
（6）否定和动态伪类选择器
- 否定伪类选择器---- div：not(:empty){} ----除了为空的其他div
- 动态伪类选择器---- link、visited、hover、active
3、其他
（1）文本、盒子阴影
①text-shadow：10px 20px 30px red（ ,30px 30px 30px yellow）；
（水平方向位移 垂直方向位移 模糊程度 阴影颜色）--可同时定义多个阴影
②box-shadow：10px 20px 30px 40px red inset； ---40px表示阴影大小，inset盒子内阴影
（2）圆角边框
border-radius：10px； --px或者%
（一个值，四个角都一样；两个值，左上右下、左下右上一致；四个值，顺时针方向；
若为30px/20px 表示水平/垂直移动的弧度）
border-top-left-radius：10px； ---定义左上角
border-radius：50%； --形成⚪，盒子的一半
（3）字体引入
@font-face{font-family:aaa；src:url(XXX网上字帖)；} ---声明字体
div{font-family:aaa; font-size:50px; text-shadow：10px 0 0 red；} --使用该字体
（4）透明度
ul li：not(:nth-child){ opacity：0；} ---除了第7个以外的其他透明
ul:hover li{ opacity：1；} ---悬停时，所有都不透明
4、其他CSS新布局
（1）怪异盒模型-CSS3新布局
可解决扩大padding时每行最后一个盒子因为空间不足掉下去：
**box-sizing：border-box； **-----根据padding的值自动修改中间内容块的大小
（2）弹性盒flex–适用于移动端布局
1）父盒子加上flex属性作用：
— .box{display：flex；}
①会让子元素在里面横向排列（默认）
②行内元素，自动变成了块级元素，可以设宽高
③当只有一个子元素时，margin:auto 让盒子自动(水平垂直)居中
2）排列方向
默认主轴方向为横向，即向横向居左排列**[1234]**
若要将主轴改为竖直向下排列：改成竖向显示：{display:flex；flex-direction:column; }
--column为竖直方向排列，row为横向排列
--row-reverse横向居右(且从右往左)**[4321]**排列，column-reverse竖直向上(从下至上)排列
3）主轴侧轴对齐方式
①调整主轴横向(横向为主轴时)对齐方式：{justify-content:flex-shart；}
flex-shart 横向居左[1234]
flex-end 横向居右[1234]
center 横向居中[1234]
space-between 横向两端对齐方式，14紧紧位于盒子两端
space-around 等距离环绕，自身左右两边距离一样
②调整侧轴竖向(横向为主轴时)对齐方式：{align-items:flex-shart；}
flex-shart 横向第一行[1234]
flex-end 横向最后一行[1234]
center 横向居中一行[1234]
4）折行
增加属性：{flex-wrap:wrap;}
禁止盒子内部折行显示 div{break-inside:avoid;}
5）行间距—控制折行后的行间距 {align-content:flex-shart；}（横向居左为例）
flex-shart 整块居上 紧贴大盒子顶部
flex-end 整块居下 紧贴大盒子底部
center 整块居中
space-between 横向两端对齐方式，第一行和最后一行紧贴于盒子两端
space-around 等距离环绕，自身左右两边距离一样
6）项目的属性—作用于每个小项目：
①对齐方式-------.div1{ align-selft:flex-shart；}
flex-shart 该项目位于第一行
flex-end 该项目位于最后一行，其他不影响
center 该项目位于居中一行
baseline
stretch 拉伸高度(不设高度自动占满整个高度)
②调整顺序------order的值越大越靠后(默认值都为0，可为负值)
③**剩余宽高(窗口自适应)：**方法一–利用浮动+clac()
方法二—.div2{flex:1;} —只设置一个，占满剩余空间 ----若其他项目也有定义，则会根据份额进行分配
备注：项目过程：
摹客取UI图
（用ps量取这三部分及大盒子的宽高）
定义大盒子的大小、位置、使用display:flex、排列形式
分配及定义header、section、footer等小盒子的信息—CSS定义宽高及自适应flex=1
使用前端字体图标—阿里巴巴的iconfont网站下载
<head><link rel="stylesheet" href="testfont/iconfont.css">
span .icon-XXX{font-size:200px…} ----修改样式
</head>
<body><span class="iconfont icon-XXX"></span>
（3）WebApp移动端布局
1）模拟器上显示分辨率/像素问题：
css像素：设备的独立像素
物理分辨率：真正的物理设备像素
-
设备像素比(dpr)=物理像素/CSS像素 —两者倍率一般在真机出厂时会提供
-
设计稿中提供css像素375、物理像素750时要转化(宽高、圆角边框)----为了清晰的页面
-
一般提供一份，一般使用原则：百分比；弹性盒布局；rem布局
-
二倍图使用–表示用100*100的真实图片放在50**50的CSS样式中，当放大两倍时不模糊
2）加入meta标签，viewport视口
<meta name="viewport" content="width=<device-width>, initial-scale=1.0 user-scalable=no>
-
①布局视口：指网页的总宽度，一般移动浏览器都默认设置了布局视口的宽度（设备不同，布局视口的默认值不同，768px、980px、1024px等。iOS，Android基本都将这个视口分辨率设置为980px）
②视觉视口：用户正看到网站的区域，该宽度等同于移动设备的浏览器窗口的宽度
③**理想视口：指对于设备来说是最理想的视口尺寸，**使页面总宽度刚好等同于浏览器窗口
理想宽度=设备宽度：content="width=
-
initial-scale=1.0 缩放比：不缩放了；user-scalable=no 不可捏放显示了
- 纵向滚动—溢出
横向排放、滚动：
header ul{display:flex；overflow:auto；} --设置弹性盒，自动滚动
header ul li{
flex-shrink:0; --挤压值为0，表示不允许被挤压
line-height:45px; --定义垂直方向位置
padding:0 10px; --增加左右内间距
}
（4）多列布局
项目宽高都不同，瀑布流效果
- .box{column-count：5;} --自动(折列)显示的列数
- column-gap：30px --调整各列的间距
- column-rule：2px solid red； --各列之间的边框
- column-fill：auto； --把父盒子占满后再继续分列
- column-width：500px； --调整列宽
- 禁止盒子折列时，内部分成两部分显示 div{break-inside:avoid;}
- （子盒子中定义样式）div>h1{column-span:all；text-align;center；} --- all表示横跨所有列;文本居中
（5）响应式布局
1）响应式需要一个父级作为布局容器，来配合子集元素实现变化效果
2）缺点：兼容各种设备工作量大，效率低；代码累赘，加载时间过长；一定程度上改变了网站原有的布局结构；
3）原则：①模块中的内容：挤压-拉时布局不变
②换行-平铺时布局不变
③删减-增加时布局不变
④模块位置变换时布局不变
⑤模块展示方式改变：隐藏-展开时布局改变
4）媒体查询(Media Query)：根据设备显示器的特性(视口宽度、屏幕比例、设备方向：横向或纵向)来为其设定CSS样式。约束！！！
(括号内为查询条件，width、height、color等)
@media all and (min-width:320px) and (max-width…){
body{XXXXXX}
}
all为所有设备；screen为显示器、笔记本、移动端等设备；handle为便携设备(手机、平板电脑)……
(and为连接到一起，且；only为限定某种设备；not为排除某种设备)
5）横竖屏检测时的样式效果：
@media all and (orientation：portrait) { ---portrait为竖屏时的样式；landscape为横屏时的样式
div{XXXXXX}
}
| 常见的布局方案 | 说明 |
|---|---|
| (可切换的)固定布局 | 以像素为单位，不同设备设计不同布局 |
| 弹性布局 | 以%为单位，可适应一定范围内所有尺寸的设备屏幕及浏览器宽度（最好用于PC） |
| 混合布局 | 和弹性一样，但可以以像素和%为单位 |
| 响应布局 | 随着屏幕的宽度响应出最完美的方式，兼容所有设备；从PC端向下设计，取断点 |
6）bootstrap前端开发框架-组件样式插件
-
框架：一套架构，他有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
-
使用四部曲：
①创建文件结构—直接复制bootstrap文件的内容过来
②创建html骨架结构
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/*要求当前网页使用IE浏览器最高版本的内核来渲染*/
<!--有些需要解决ie9以下识别不了的问题-->
③引入相关样式文件
<link rel="stylesheet" href="bootstrap/css/botstrap.min.css">
④书写内容
--直接拿Bootstrap预先定义好的样式来使用
--修改Bootstrap原来的样式，注意权重问题
--要知道它定义了哪些样式，以及这些样式能实现什么样的效果
-
Bootstrap也需要一个.container布局容器（预先定好这个叻）
①.container类：
–响应式布局的容器，固定宽度
–大屏(>=1200px) 宽度定位1170px
–中屏(>=992px) 宽度定位970px
–小屏(>=768px) 宽度定位750px
–超小屏(100%)
②.container-fluid类：
–流式布局容器 百分百宽度
–占据全部视口（viiewport）的容器
–适合于单独做移动端开发
-
栅格系统–页面内容划分成若干等分的列
通过行row和列column的组合来创建页面布局，你的内容就可以放入这些创建好的布局中；
注意无法使用margin:0 10px；来控制间隔
只要保证所有分数加起来等于12份，少了会空白，多出来的一列会另起一行
<div class="container"> /*加响应式容器*/ <div class="row aa"> /*加行row类*/ <div class="col-lg-3">1</div> /*根据屏幕像素大小添加类前缀，6+4+2也可以*/ <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3 col-md-4">4</div> /*响应式控制当为中屏时占4份*/ </div> </div> -
列嵌套–每次分出来的格子都可以继续分成12份
<div class="container"> <div class="row aa"> <div class="col-lg-3"> <div class="row aa"> /*列嵌套时最好加1个行row 这样可以取消父元素的padding值带来的影响，而且高度会自动和父级一样高*/ <div class="col-md-6">aa</div> <div class="col-md-6">bb</div> </div> </div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3 col-md-4">4</div> /*响应式控制当为中屏时占4份*/ </div> </div> -
列偏移
若有两个盒子要放两端： <div class="col-md-3">aa</div> <div class="col-md-3 col-md-offset-6">bb</div> /*往右偏移的份数=12-两个盒子的份数=6*/ 若只有一个盒子要放中间： <div class="col-md-8 col-md-offset-2">cc</div> -
列排序
若有两个盒子，要将左边的放右边，右边的放左边： <div class="col-md-4 col-md-pull-8">左侧</div> <div class="col-md-8 col-md-pull-4">右侧</div> /*还要往左拉4份*/ -
Bootstrap响应式工具
<div class="container"> <div class="row"> <div class="col-lg-3 hidden-md">1</div> <!--只在中屏时隐藏，其他都出现--> <div class="col-lg-3 "> <span class="visible-lg">Hello</span> /*可在前面改变span的样式,只有在大屏时会显示*/ </div> <div class="col-lg-3">3</div> <div class="col-lg-3">4</div> </div> </div>
（6）等比例缩放布局rem
-
区分px、em和rem
px：50px em：相对于父元素的字体大小的倍数。div width:10em; rem：相对于根元素(html)字体大小的倍数。div width:10rem; -
rem布局准备工作（可用Less运算）
动态计算，等比例的放大缩小font-size值->.box
html{font-size=100px;} --也可以是16px .box{width:3.75(7.5)rem;}---多少倍的html字体大小 （使其自动转换倍数：使用px to rem插件--扩展修改基准值--F1--CSSRem） <script> document.documentElement.style.fontSize=document.documentElement.clientWidth/375（750）*100+‘px’ fontsize计算宽高=当前设备的css布局宽度/物理分辨率（设计稿的宽度）*跟基准font-size </script> -
vw和vh—本身就是等比例缩放单位
vh：view-height ----100vh==视口的高度
vw：view-width ----100vw==视口的宽度
div{width:100vw； /*占满窗口*/ height:100vh； }
①假设视口宽度为375px：375px=100vw ----1px=100/375=0.2667vw
html{font-size:26.67vw；} —100px
div{wigth:3.75rem；}
②1vw的值会随着屏幕的大小而等比例改变
375 1vw=3.75px
414 1vw=4.14px
768 1vw=7.68px
面试题：百分百和100vw的区别
没有滚动条时 100%==100vw
有滚动条时 100vw包含滚动条；100%除了滚动条以外的空间占满
（7）Grid网格布局
将网页划分成一个个网格，可以任意组合不同得到网格
display:grid; 块级网格
display:inline-grid; 行内块级网格
-
行列属性–划分行列
grid-template-rows:200px 200px 200px； grid-template-columns:00px 200px 200px；或者repeat(3,33.33%); fr 片段、auto (网格自适应宽高、按比例分块) 类似flex=1；的用法 grid-template-rows:100px 1fr 200px； grid-template-rows:100px auto 200px； -
间距
grid-row-gap:20px； --行间距 grid-column-gap:20px； --列间距 grid-gap:20px 20px； --复合式写法 -
区域命名与合并–盒子
{grid-template-areas：'a b c' 'd e e' 'g h i';} .box div:nth-child(5){ grid-area:e；} //ee合并 <body> <div>div*9</div> </body> -
对齐方式
竖向显示 grid-auto-flow:column； 水平轴居中 --九宫格：justify-content：center； --项目： justify-items：center； 竖直轴居中 align-content：center； 组合居中 place-content：center center； center /*横向居中*/ space-between /*横向两端对齐方式，14紧紧位于盒子两端*/ space-around /*等距离环绕，自身左右两边距离一样*/ -
项目属性-合并
.box div:nth-child(5){ grid-column-shart: 2; /*从第2条线开始到第4条线结束的区域为一整块*/ grid-column-end: 4; /*row*/ 简化：grid-column：2/4； }
5、渐变、动画、变形的状态
（1）渐变gradient
—两个或多个颜色之间的平稳过渡–不易失真
-
线性渐变 --从”一个方向“到”另一个方向“的颜色渐变
background：linear-gradient（to top，red，green，blue）；支持方向：to top、bottom(默认)、left、right(红色到绿色到蓝色为从左往右) 、bottom right(往右下角)
支持角度的写法：90deg，
-
径向渐变 --从”一个点“向四周的颜色渐变
background：radial-gradient（50% 50%，circle，red 0%，green 10%，blue 30%）； ①50% 50% 表示径心宽高的位置 ②颜色过渡范围：百分比表示范围0-10%为红色，10%-30%为绿色，30%开始为蓝色 ③若（red 50%，green 50%）则表示没有渐变，而是直接分成两部分 ④设置形状，circle渐变为最大的圆形；ellipse根据元素形状渐变，元素为正方形时显示的效果与circle一样 ⑤不同尺寸的渐变：size指定渐变的大小(渐变到哪里停止，它有四个值) 最好加个-webkit- closest-size：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角； -
重复渐变
重复线性渐变：background：repeating-linear-gradient（red，green 10%，blue 20%）； 重复径向渐变：background：repeating-radial-gradient（red ，green ）； -
太极案例
（2）动画transition
-
动画过渡属—hover等效果时调整时间
transition:all 2s linear 2s；
/*all,height--可以定义特定某个属性也可以全部 2s --动画时间 linear --匀速 2s --延迟*/ 注：但display:none/block属性不支持。若要有延迟时间地效果：例 悬停单拉框内容显现 div ul{transition:all 1s； height：0px； ----把他强制改成高度地显现，先隐藏高度，在慢慢出现200px overflow：hidden； } div：hover ul{height：200px；} -
动画过渡类型
linear 匀速；ease 逐渐慢下来；ease-in 加速；ease-out 减速；ease-in-out 先加速后减速
贝塞尔曲线—属性值：cubic-bezier()
-
动画过渡单一属性
all,height--单一属性： transition-property：height background；可以写多个 2s --动画过渡时间： transition-duration linear --匀速：transition-timing-function 2s --延迟过渡时间：transition-delay
（3）2d变形transform
-
2d-平移translate()
将元素向指定的方向移动，类似于position中的relative
水平移动：transform：translateX(+-tx，0) 垂直移动：transform：translateY(0，+-ty) 对角移动：transform：translate(+-tx，+-ty) /*transform属性不会造成浏览器回流重排，因为它是作为合成图层发送到GPU上，由显卡执行的渲染*/ -
2d-缩放scale()
transform: scale(1.5)；---放大1.5倍 ---设置负值为倒置，scaleX()为设置只一个方向 改变缩放中心点的位置：img{transform-origin：left top；} center、left bottom、left center… -
2d-旋转rotate()
transform: rotate(10deg) ---绕中心点转正值为顺时针，负值为逆时针 transform: rotateX(10deg) ---绕X轴转(3d) 改变旋转中心点的位置：img{transform-origin：left top；} -
2d-多属性值-注意顺序
transform：translateX(tx，0) scale(1.5) rotate(10deg) ； -
2d-倾斜shew()
skewX（）：为正值时拽着右下角，往右边拉动，形成30deg； 为负值时拽着左下角，往左边拉动，形成30deg skewY（）：为正值时拽着右下角，往下边拉动，形成30deg skew（30deg，30deg）：为正值时拽着右下角，往右下角方向拉动，形成30deg
（4）关键帧动画、轮播效果
@keyframes identifier{ /*声明动画，定义一个名字*/
0%、from{XXX}初始状态
25%{XXX}
100%、to{XXX}最终状态
}
div{XXX；animation：identifier 2s linear ；} /*2秒钟从from到to状态，只执行一次*/
若要执行无限次 多加上 infinite 属性值
-
关键帧动画-单一属性-都可以直接写在复合属性里
animation-name：identifier； XXX-duration：2s； XXX-timing-function：linear； XXX-delay：5s； XXX-iteration-count：infinite； animation-direction：reverse；--normal 正常；reverse 反方向； alternate 正常方向-交替；alternate-reverse 反方向-交替 XXX-fill-mode：forwards； ---none 默认值；forwards 保持最后的画面；backwards 保持初始画面 div:hover {animation-play-state: paused；} ---表示鼠标悬停时动画暂停 -
关键帧动画-轮播案例：
先定义大容器、长条大盒子(存放4+1张或背景)、图片的宽高
–浮动–通过定义几个关键帧动画(到达每张图片的宽度位置)translateX(tx，0)–调用动画
–最好在最后加上第一张的图片，使其更平滑（可以最后多加一帧空白，使用steps不显示最后一帧空白）
或者使用swiper插件直接使用样式进行轮播：
①下载需要的css和js文件，引入相关文件
<link rel="stylesheet" href="./css/normalize.css" /> /*放在index.css上面*/ <link rel="stylesheet" href="./css/index.css" /> <body> <div class="aa">CCC</div> /*轮播图区域的类中粘贴网上的css代码*/ <script src="./js/flexible.js"></script> <script src="./js/swiper.min.js"></script> <script> var.... /*从网上复制对应的js代码*/ -->(function(){var...})() /*方便后面使用*/ </script> </body>②官网找到类似案例，复制html结构，css样式 js语法
③根据需求定制修改模块
-
关键帧动画-steps 直接进行关键帧跳跃
animation：identifier 5s steps(1,end)；==steps-end
–直接进行关键帧跳跃；end保留当前帧，看不到最后一帧就结束了；start保留下一帧，看不到第一帧
-
animate动画库
引入文件<link rel="stylesheet" href="animate.min.css的网站"> 使用动画<div class="animated bounce(动画名) infinite"></div>
（5）3d变形
.box{transform-style：preserve-3d；perspective：900px；} --先声明一下，flat:2d；preserve-3d:3d舞台
-
3d-平移
transform：translateZ(100px)；
需要先设置景深，眼睛到屏幕的距离：perspective：900px
-
3d-旋转
transform: rotateX(10deg)；和2d一样
-
3d-缩放
transform: scaleZ(10)；也需要加景深
-
3d-立方体
6、Less语言
-
Less是一门CSS预处理语言(扩展语言)，扩展了CSS的动态特性。
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
-
Less变量–注意大小写
@变量名：值； @font14：14px； @color：pink； ---定义，改这里就可以将下面的一起更改 body{XX：@color；} --使用 div{YY：@color；} -
Less编译–使用Easy LESS插件自动转换
将less文件编译生成css文件，这样在html才可以使用
-
Less嵌套
html文件：<div class="header"> <a href="#">XXX</a> </div> less文件中增加样式----less嵌套子元素的样式直接写到父元素里面 .header{XXX； a{YYY；} } 编译后的css文件：.header{XXX；} .header a{YYY；}注意：如果有伪类选择器、交集选择器、伪元素选择器，我们在内层选择器前面加上&
.header{ a{ &:hover{XXX；} &:：before{YYY；} } } -
Less运算—符号左右要空格
任何数字、颜色或者变量都可以参与运算，加减乘除算术运算
@font14：14px + 5； —如果只有一个有单位，则为这个单位；如果有两个单位，则以第一个单位为准
img{width：82/50rem；} ----用于rem布局方便使用
7、移动端布局总结
-
移动端主流方案：①单独制作移动端页面；
②响应式页面兼容移动端(更麻烦些)
-
移动端技术选型： ①流式布局（百分比布局）；
②flex弹性布局(推荐为主)；
③rem适配布局(推荐为主)；
④响应式布局
可以参考w3 school的学习网站：https://www.w3school.com.cn/h.asp
技术共进，成长同行——讯飞AI开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)