随笔分类 - html-css
摘要：无js辅助： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <style> .tb { border-spacing: 0; border-collapse: collapse
阅读全文
摘要：我们加了如下标签，使pc页面变为响应式布局 <meta name="viewport" content="width=device-width, initial-scale=1"> 在编写pc页面，如果不适用flex布局（伸缩布局），为了让版心居中我们通常添加如下css： .content { bo
阅读全文
摘要：justify-content：主轴 属性值 说明 flex-start 若按x轴排列，从左往右；y轴从上往下 flex-end 同上相反方向 center 居中对齐 space-around 平分剩余空间 space-between 先将两边元素分别摆放在左右，其余元素平分 flex-wrap：
阅读全文
摘要：box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; img, a { -webkit-touch-all
阅读全文
摘要：现在流行的单页引用框架是没这个作用的，head里面的内容倒是可以安排，但是页面里面的元素应该是没用，只能服务端渲染的页面可以，等后面再研究研究吧。 <title>品优购商城-综合网购首选-正品低价、品质保障、配送即时、轻松购物！</title> <meta name="description" co
阅读全文
摘要：-moz-：火狐浏览器 -ms-：ie浏览器 -webkit-：safari和chrome浏览器 -0-：opera浏览器
阅读全文
摘要：<header><!-- 头部 --> <nav> <article> <section> <aside> <footer><video width="320" height="240" autoplay="autoplay" muted="muted" controls> <source src=
阅读全文
摘要：* { margin: 0; padding: 0; } /** 斜体文字不倾斜 */ em, i { font-style: normal; } /** 无序列表去掉· */ li { list-style: none; } /** 图片和文字垂直居中，并且边框为0 */ img { border
阅读全文
摘要：<head> <meta charset="UTF-8"> <title>11分页插件样式</title> <style> .page a, .prev-page, .next-page { display: inline-block; width: 36px; height: 36px; back
阅读全文
摘要：.box { margin: 20px auto; width: 800px; height: 800px; } ul li { position: relative; float: left list-style: none; width: 150px; height: 300px; border
阅读全文
摘要：white-space: 1、normal默认换行 2、nowrap强制一行，会溢出 单行溢出显示省略号 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // 溢出显示省略号 } 多行溢出显示省略号：（有兼容性问题，
阅读全文
摘要：原因是：图片和文字是基线对齐，就是有些文字的比如q这个字母实际上是超过最底下一点点 解决： 1、将图片转成display:block 2、用vertical-align: middle/top/bottom调整垂直对齐方式
阅读全文
摘要：{ vertical-align: middle; }
阅读全文
摘要：.without-outline { outline: none; } .forbid-resize { outline: none; resize: none; }
阅读全文
摘要：.small-triangle { width: 0; height: 0; border: 10px solid transparent; border-bottom-color: pink; } 斜三角梯形： .oblique-angle { width: 0; height: 0; borde
阅读全文
摘要：原理：利用移动背景图片的位置，只展示图片的可视部分 作用：减少图片资源的请求次数，节约网络开销。一般针对那些不会变化的小的背景图。
阅读全文
摘要：1、将高度或者宽度设置成0，好处是能不通过js操作dom，让别的元素占掉这个元素的宽度或者高度 2、display:none，好处同上 3、visibility:hidden，即使看不见，还是会占有位置 4、overflow: a)hidden，溢出隐藏 b)visible，默认显示 c)scrol
阅读全文
摘要：静态定位static：是默认的定位方式，无定位，按照标准流摆放位置 相对行为relative：相对于盒子本来的位置产生移动，并且不脱标，不会因为移动占用别的元素位置，但是本身没有移动前的位置会被占用 绝对定位absolute：有父元素，则相对父元素移动，没有则相对浏览器移动。如果父级或者祖宗级有定位
阅读全文
摘要：1、要是想要竖着的： li { list-style: none; } 2、要是想要横着的，让里面的a标签以块的方式展现就可以： .nav ul li a { display: block; height: 42px; padding: 0 10px; text-decoration: none;
阅读全文
摘要：特性： 1、脱标 a)浮动元素会遮盖没有浮动的元素，只会遮盖它后面的标准流元素 b)所有元素都浮动，一行放不下就会换行 2、只要添加浮动，都会变成行内块 通常操作： 浮动元素套在一个标准流的元素中操作， 这个父元素通常可能没有高度，没有高度就不会被浮动的子元素撑开，于是就需要清除浮动 清除浮动: 1
阅读全文
