响应式布局
摘要：
响应式网站 同一个网站 可以同时适配多个终端 两个网站 应该pc端 一个移动端 复杂的网站（电商 两个终端） 简单的网站（ 企业网站 后台管理系统） 实现核心 ：媒体查询 响应式实现的方式 1.设置meta 默认情况下 html的最小宽度是980px <meta name="viewport" co 阅读全文
posted @ 2023-07-22 16:42 pocsan 阅读(22) 评论(0) 推荐(0)
弹性布局
摘要：
弹性布局 有旧版和新版 弹性布局是针对父元素 和子元素 dispaly flex 弹性布局的使用 定义弹性盒 定义主轴对齐方式 主轴方向是会改变的 justify-content:center； 居中 justify-content: space-between; 两端对齐 中间平均分配布局 jus 阅读全文
posted @ 2023-07-22 16:40 pocsan 阅读(56) 评论(0) 推荐(0)
属性选择器
摘要：
指定属性和属性值 属性选择器 el[属性+"属性值"] 指定属性 不指定值 属性选择器的权重是10 但是不是单独的 基本上会配合 a 属性值是个词列表 ~= 包含 以xxx开头 attr（）可以获取该标签上的属性 和值 只能获取自生标签上的值 相当于一个函数 阅读全文
posted @ 2023-07-22 16:40 pocsan 阅读(20) 评论(0) 推荐(0)
选择器
摘要：
动态伪类选择器 link visited hover active focus 伪元素操作符 before after first-line first-letter ui元素状态伪类选择器 ：checked 被选中的 旨在radio/checkbox ：enabled 激活的 ：disabled 阅读全文
posted @ 2023-07-22 16:39 pocsan 阅读(27) 评论(0) 推荐(0)
h5的语义化标签
摘要：
h5目前处于推广期 没有形成最终同意版本 h5简洁为主 h5新增的语义化标签 都有利于seo一优化 对搜索引擎友好 <header></header> 网站公共的头部 <footer></footer> 网站公用的尾部 <nav></nav> 导航 <section></section> 区块 一个 阅读全文
posted @ 2023-07-22 16:39 pocsan 阅读(27) 评论(0) 推荐(0)
定位居中的问题 位移
摘要：
子元素 如果超出父元素的宽度 居中失效 百分比是相当于与父元素来说的 位移 相对定位的为一只 百分比是相对于父元素而言的 translate的百分比是相对于自生而言的 阅读全文
posted @ 2023-07-22 16:38 pocsan 阅读(18) 评论(0) 推荐(0)
最大最小宽高的问题
摘要：
. max-width max-height 最大宽高 同理 最小宽高min 阅读全文
posted @ 2023-07-22 16:38 pocsan 阅读(13) 评论(0) 推荐(0)
其他css3属性 圆角 三角形
摘要：
圆角实际上有8个值a . 百分比超过百分之50结果都是一个椭圆 实心三角形的实现 宽高为0 给边框高度 透明 对边设置颜色 空心三角形 或者带边框的三角形 透明叠加 . 上边框的粗细 阅读全文
posted @ 2023-07-22 16:37 pocsan 阅读(23) 评论(0) 推荐(0)
怪异盒模型
摘要：
怪异盒模型 box-sizing：boeder-box 兼容 默认值 box-sizing：content-box 标准盒模型 标准盒模型的实际宽高计算 怪异盒模型的的计算 width （padding+border）+margin 怪异模式：再低版本ie中 文档类型的缺失 会触发怪异模式（怪异模式 阅读全文
posted @ 2023-07-22 16:37 pocsan 阅读(32) 评论(0) 推荐(0)
css3
摘要：
属性 浏览器前缀 transition：.3s -ms-transitio:0.3s -webkit-transitio:0.3s -o-transitio:0.3s -moz-transitio:0.3s 阅读全文
posted @ 2023-07-22 16:35 pocsan 阅读(19) 评论(0) 推荐(0)
浏览器
摘要：
五大浏览器内核 Trident IE Gecko FF Webkit chrome/safari..... Presto opera blink 谷歌和欧鹏研发 最新的浏览器内核 阅读全文
posted @ 2023-07-22 16:34 pocsan 阅读(25) 评论(0) 推荐(0)
表格 的
摘要：
完整的表格 是由标题caption +表头thead+表身体tbody +表尾tfoot 除了表身体 其他都不是必须的（表身体是必须的） border-collapse: collapse;边框和合并 此属性只有表格才有. table-layout: fixed; 固定宽高 一定要用 两个重要属性 阅读全文
posted @ 2023-07-22 16:34 pocsan 阅读(43) 评论(0) 推荐(0)
三栏布局
摘要：
双飞翼布局 overflow hidden 可以换成定位和左右margin 阅读全文
posted @ 2023-07-22 16:33 pocsan 阅读(16) 评论(0) 推荐(0)
bfc
摘要：
BFC 是一种渲染规则 block元素会自上而下排列 同一个BFC的垂直方向上的margin会重叠 取较大值 margin于包含的块级元素 计算bfc高度时 浮动会参与计算 bfc的触发条件 浮动 定位 display inline-block overflow 不是visible 不会和浮动发生重 阅读全文
posted @ 2023-07-22 16:32 pocsan 阅读(35) 评论(0) 推荐(0)
行内标签的使用
摘要：
i标签一般用来写字体图标 em/去掉原本样式 当作span来用 阅读全文
posted @ 2023-07-22 16:31 pocsan 阅读(27) 评论(0) 推荐(0)
表单样式问题
摘要：
表单：属于行内块 标准盒子模型 内边距和边框会把各盒子撑大 怪异个桌子模型/ 内边距和边框不会把quchu 去除焦点为问题 关于输入框瀚航的问题 表单继承文本属性 下拉菜单 阅读全文
posted @ 2023-07-22 16:24 pocsan 阅读(11) 评论(0) 推荐(0)
伪元素操作符
摘要：
<!-- 伪元素操作符 before after fist-line 第一行 fist-latter 第一个字 伪元素 before/after 必须和content结合使用 --> 阅读全文
posted @ 2023-07-22 16:23 pocsan 阅读(10) 评论(0) 推荐(0)
清除浮动
摘要：
<style> .clearfix::after { content: ""; display: block; clear: both; } </style> <body> <!-- 高度自适应 高度是由内容撑开的 清除浮动的方法 1.直接给父元素写高度 缺点 高度写死 ，无法自适应 2.给父元素加 阅读全文
posted @ 2023-07-22 16:23 pocsan 阅读(12) 评论(0) 推荐(0)
精灵图
摘要：
<!-- 图片整合技术 css sprites 精灵图 雪碧图 优势 减少服务器请求次数 减小图片的体积 缺点 不利于维护 一半会把一些网页上不会改变的小图标整合上去 核心 利用背景位置的改变 阅读全文
posted @ 2023-07-22 16:22 pocsan 阅读(12) 评论(0) 推荐(0)
锚点点击
摘要：
<!-- 锚点 页面中的快速定位器 同一页面的不同位置的跳转 语法a的和href 的值 设为id的值 a href 值为空的时候刷新页面 值为# 或者#top的时候为返回顶部 --> 阅读全文
posted @ 2023-07-22 16:22 pocsan 阅读(9) 评论(0) 推荐(0)
点位小结
摘要：
定位有五种属性 re ab fi sty sta 固定定位 永远再浏览器上方fixed 完全脱离文档流 行内元素可以支持宽高 块级标签宽度将不会继承 绝对定位 阅读全文
posted @ 2023-07-22 16:21 pocsan 阅读(11) 评论(0) 推荐(0)
定位 总结
摘要：
<!-- 参照物不一定是父元素 也可以是祖先定位 参照物不一定是相对定位 只要是定位都可以 定位是不会越级的 --> 绝对定位 需要参照物 需要写位置 需要写z-index 特点 完全脱离文档流 改变元素的特征 相对定位： 保留原有的位置 实际上又可以使用z-index 一般是来给绝对定位提供目标的 阅读全文
posted @ 2023-07-22 16:21 pocsan 阅读(21) 评论(0) 推荐(0)
定位 介绍
摘要：
定位 一个盒子漂浮再前面 固定定位 漂浮于网页的前面 绝对定位 一个盒子漂浮于另一个盒子的前面 参照物 辅助属性上下左右 z-index 参照物 固定定位的参照物 浏览器 绝对定位的参照物 具有定位的祖先文件 定位居中的实现 左右居中 left0 right0 margin auto ////lef 阅读全文
posted @ 2023-07-22 16:20 pocsan 阅读(33) 评论(0) 推荐(0)
绝对定位
摘要：
绝对定位 ：当一个各自漂浮于另一个盒子上面 使用绝对定位absolute 绝对定位需要参照物 使用绝对定位 参照物需为祖先元素 辅助属性 特征 阅读全文
posted @ 2023-07-22 16:19 pocsan 阅读(31) 评论(0) 推荐(0)
定位
摘要：
定位：漂浮于网页上方向的内容 固定定位：永远固定在浏览器上上方 position：fixed； 辅助熟属性 上下左右 z-index 定位特点 完全脱离文档流 （完全不占位置） 定位会改变元素的特征 （行内元素也可以支持宽高）块级标签宽度不会再继承了 z-index只能写整数 堆叠 前后的问题 前后 阅读全文
posted @ 2023-07-22 16:18 pocsan 阅读(22) 评论(0) 推荐(0)
隐藏元素的方法
摘要：
display：none display：block 不占位置 不支持动画 visibility：hidden visibility：visible 占位置 不支持动画 opacity:0 opacity:1 占位置 支持动画 宽高显隐动画 文字不换 阅读全文
posted @ 2023-07-22 16:18 pocsan 阅读(11) 评论(0) 推荐(0)
定位 position
摘要：
定位 position一共有五个属性值静态定位/相对定位/固定定位/绝对定位/粘性定位position: static/relative/fixed/absolute/sticky；利用top left right bottom 对元素进行position:relative相对样式需要配合left、 阅读全文
posted @ 2023-07-22 16:16 pocsan 阅读(28) 评论(0) 推荐(0)
透明色
摘要：
透明色透明色透明色透明色透明色透明色透明色透明色 opacity:0-10; 透明度 rgba（0，0，0，0） ；透明色 两者的区别opacity是整个盒子都透明了 背景色是颜色的透明 跟内容无关 filter：alpha（opacity=10）；//在ie8等低版本浏览器上显示兼容 阴影阴影阴影 阅读全文
posted @ 2023-07-22 16:16 pocsan 阅读(177) 评论(0) 推荐(0)
重绘和回流的概念
摘要：
重绘 ：颜色的改变 回流 ：布局的改变 回流必定引发重绘，重绘不一定会引发回流 回流的代价远大于重绘 hover 的使用一定会引发页面的重绘或者回流 使用hover做动画的时候 尽量不影响其他盒子 阅读全文
posted @ 2023-07-22 16:15 pocsan 阅读(23) 评论(0) 推荐(0)
子代选择器 结构伪类选择器
摘要：
包含选择器 后代选择器 包含的是后代 子代选择器 包含儿子 div>p 则只有儿子收到效果 ul li:first-child { color: red; } ul li:nth-child(2) { color: aqua; } ul li:nth-child(3) { color: yellow 阅读全文
posted @ 2023-07-22 16:14 pocsan 阅读(23) 评论(0) 推荐(0)
元素之间的相互转换
摘要：
1.dispaly:inline-block; 不确定宽度 在父元素加上 text-align: center; 分页 但是中间有间距 解决方法 中间不换行 加上注释 字间距设置为0 然后在li里面加上（解决代码换行产生的间距） 2.图片中空隙 可以设置两张图片的文字大小取消换行间隙 font-si 阅读全文
posted @ 2023-07-22 16:13 pocsan 阅读(108) 评论(0) 推荐(0)
元素类型
摘要：
1.块级元素 独占一行 可以做容器 盒子 2.内联元素 左右排列 不是盒子 子哦为辅助标签来使用 有很多属性显示不完整 3.行内块级元素 img input 可以支持宽高 左右排列 也叫行内块级元素 都有相应的bug 行内块和行内元素 换行都会与有空隙 4.搜索框的实现 获取焦点的时候 出现一个小黑 阅读全文
posted @ 2023-07-22 16:12 pocsan 阅读(14) 评论(0) 推荐(0)
浮动的问题
摘要：
浮动是有方向性的 后面一个浮动跟着前面一个浮动 浮动是脱离文档流半层的 清除浮动：清除浮动带来的影响 （解决高度塌陷的问题） 父元素加宽度 父元素加上overflow:hidden; 在浮动元素后面加一个空的div style="clear: both;" clear有这些属性 left right 阅读全文
posted @ 2023-07-22 16:12 pocsan 阅读(12) 评论(0) 推荐(0)
常见bug
摘要：
1.块级标签支持所有的css属性 2.行内块有一些属性不支持 写了也没用 不支持宽高 margin padding等属性显示有问题 3.margin-top的传递问题 4.行内标签 什么时候用 文字左右排列的时候使用 3.浮动导致父元素高度塌陷 （直接给父元素高度，也可以写overflow: hid 阅读全文
posted @ 2023-07-22 16:12 pocsan 阅读(17) 评论(0) 推荐(0)
背景属性
摘要：
background-image ：url（）通常情况下会平铺 background-repeat ：no-reqeat 平铺分为x和y background-position：-20px -50px ； background-position：50% 50% ； background-positi 阅读全文
posted @ 2023-07-22 16:11 pocsan 阅读(11) 评论(0) 推荐(0)
文本省略号
摘要：
单行省略 .sl1{ overflow:hidden; text-overflow:hidden;文本溢出 省略号 white-space:nowrap;文本不换行 } 多行省略 sl2 { overflow: hidden; text-overflow: ellipsis; display:-we 阅读全文
posted @ 2023-07-22 16:11 pocsan 阅读(17) 评论(0) 推荐(0)
浮动高度塌陷问题
摘要：
浮动会脱离标准文档流 导致父元素高度塌陷 overflow：hidden；隐藏 可以解决高度塌陷问题 （清除浮动） overflow：visible；看得见 overflow：scroll；加滚动条 overflow：outo； 如果超出则加滚动条 不超出则不加 overflow-x：hidden； 阅读全文
posted @ 2023-07-22 16:11 pocsan 阅读(13) 评论(0) 推荐(0)
字体属性
摘要：
字体 font-family font-weight 100-300无反应 细的 常规 400-500 normal 600-900 加粗 bold font-style italic oblique 文字倾斜 text-decoration none 添加修饰 text-indent 首航缩进 l 阅读全文
posted @ 2023-07-22 16:10 pocsan 阅读(15) 评论(0) 推荐(0)
列表 文本属性
摘要：
list-style none 去除小圆点 网页默认的字体大小是16px font-size 字体大小 网页最小的字体大小是12px 文字居中 text-align center 图片居中 图片居中是在图片外层的盒子里面写 line-hight:100px 文字居中 行高等于高度的时候 文字居中 阅读全文
posted @ 2023-07-22 16:10 pocsan 阅读(9) 评论(0) 推荐(0)
盒模型
摘要：
bug ：子元素 的margin-top 有时候会错误的传递给父元素 在父元素加上overflow：hidden；就可以解决这个问题 区分内边距和外边距通过背景颜色和外边框 solid 实线 dashed虚线 dotted点线 盒模型的实际宽度计算 外边距+边框+内边距+内容 边框和内边距都会吧盒子 阅读全文
posted @ 2023-07-22 16:10 pocsan 阅读(8) 评论(0) 推荐(0)
常见的css属性
摘要：
rgb 6位0-9a-f 简写 443322=432 rgb rgb（68，41，41，0.4）最后一位是alpha颜色透明度 浮动 让元素左右排列 float ：left /right/none; 文档标准流 网页中的块级元素 都会自上而下的排列 浮动会破坏元素原本的特征（独占一行的特征） 浮动是 阅读全文
posted @ 2023-07-22 16:10 pocsan 阅读(14) 评论(0) 推荐(0)
权重
摘要：
标签选择器的权重 后代选择器的权重是求和的 标签选择器的权重 0001 class的选择器的权重 0010 id选择器的权重是 0100 ！impcrtant权重最高的 不建议大量使用 通配符选择器的权重是最小的.0000 权重越高 优先级越高 权重一样是 看先后顺序 后面的覆盖前面的 阅读全文
posted @ 2023-07-22 16:09 pocsan 阅读(47) 评论(0) 推荐(0)
常见的选择器
摘要：
标签选择器 类选择器 id选择器 通配符选择器 清除间距 群组选择器 列举法 吧所有的要写的一样的样式 列举出来 后代选择器（包含选择器） 从右向左的查找 ul li 先查找li在找到ol 阅读全文
posted @ 2023-07-22 16:09 pocsan 阅读(13) 评论(0) 推荐(0)
样式表的创建
摘要：
css 层叠样式表 css2.0 3.0 样式表 1 行内样式 直接在标签上写属性 style=“属性: 属性值；” 2 内部样式 在头部添加style标签 选择器{属性: 属性值；} 3 外部样式的引入 4 外部样式导入 css语法： 属性：属性值； 选择器 标签对象 ** 对谁进项样式的修改 标 阅读全文
posted @ 2023-07-22 16:09 pocsan 阅读(22) 评论(0) 推荐(0)
输入框
摘要：
<form action="提交数据的地址（后端写接口）" method="get/post"></form> action 提交数据的地址（后端写接口） method 数据提交的方式 input 输入框 text 单行输入 密码框 password 单选 radio 注意： 必须使用name属性 阅读全文
posted @ 2023-07-22 16:09 pocsan 阅读(73) 评论(0) 推荐(0)
列表类型
摘要：
有序列表 order list ol 组合标签 li type类型 1 A a I start 开始 从第几个开始 无序列表 unorder list ul li 组合标签在只用的时候必须配套使用 不建议单独使用 <li></li> 定义列表 dl degind list dd当标题用 dt当内容 阅读全文
posted @ 2023-07-22 16:08 pocsan 阅读(41) 评论(0) 推荐(0)
标签
摘要：
标签分为但标签和双标签 空标签和常规标签 在xhtml中 但标签加上斜杠是标准写法 但是在html5 中不加斜杠是标准写法 但是加上斜杠在前面是错误的</br> 正如这样就是错误的 一般来说不能大量使用<br> <hr>标签 阅读全文
posted @ 2023-07-22 16:08 pocsan 阅读(16) 评论(0) 推荐(0)
表格
摘要：
width 宽度 height 高度 border 边框 cellspacing 单元格之间的间距 外边距 cellpadding 单元格和内容之间的边框 bordercolor 边框颜色 bgcolor 背景颜色 align 样式 colspan 左右合并 行合并 rowspan 上下合并 列合并 阅读全文
posted @ 2023-07-22 16:08 pocsan 阅读(9) 评论(0) 推荐(0)
alt和title的区别
摘要：
alt 图片加载失败的时候显示的内容 tilte 鼠标悬停显示 对搜索引擎来说alt是最重要的 内容即使为空也可以 阅读全文
posted @ 2023-07-22 16:07 pocsan 阅读(13) 评论(0) 推荐(0)
浙公网安备 33010602011771号