随笔分类 - css
摘要：tmall 天猫商城 点击查看代码 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre, form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;}
阅读全文
posted @ 2023-01-04 13:51
~LemonWater
摘要：使用 CSS transforms CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。 tr
阅读全文
posted @ 2022-04-19 16:09
~LemonWater
摘要：兼容性 浏览器支持信息 https://caniuse.com/ 在css中构建回滚 如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略display: grid相关的属性，使用浮动布局。 Item One Item Two Item Three * { box-sizing: border-
阅读全文
posted @ 2022-04-19 15:14
~LemonWater
摘要：grid布局 grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>?
阅读全文
posted @ 2022-04-19 14:59
~LemonWater
摘要：媒体查询 语法 @media media-type and (media-feature-rule) {/* CSS rules */} media-type: 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）； media-feature-rule: 一个媒体表达式，
阅读全文
posted @ 2022-04-19 14:12
~LemonWater
摘要：响应式布局 响应式网页设计的概念（responsive web design，RWD）：RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。 媒体查询 通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。 媒体
阅读全文
posted @ 2022-04-19 11:25
~LemonWater
摘要：使用transition转换 如果没有过渡延迟或持续时间，如果都为0或都未声明，则不存在过渡，并且不会触发任何过渡事件。 transition-property 应用过渡属性的名称 /* <attr-name>: [a-z|0-9|-|_] ，-后面不能是数字*/ /* 所有可被动画的属性 */ t
阅读全文
posted @ 2022-04-19 11:20
~LemonWater
摘要：dataset 允许我们在标准内于HTML元素中存储额外的信息 <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> /* 在article前面
阅读全文
posted @ 2022-04-19 11:02
~LemonWater
摘要：@rule @charset 指定样式表中使用的字符编码。 /* @charset语法：一个空格，编码集用双引号括起来 */ @charset "utf-8"; @import 用于从其他样式表导入样式规则。 @import <url> | <media-query-list>; /* media-
阅读全文
posted @ 2022-04-14 17:58
~LemonWater
摘要：中断规则 break-inside 描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。 break-inside: auto | avoid-page | avoid-column; page-break-inside 调整当前元素内的分页符 page-break
阅读全文
posted @ 2022-04-14 17:23
~LemonWater
摘要：多列布局 Multi-column Layout body{ width: 100%; height: 100%; margin: 0; } header{ width: 100%; height: 30vh; background-color: powderblue; } #content{ wi
阅读全文
posted @ 2022-04-14 16:34
~LemonWater
摘要：多列布局 Multi-column Layout body{ width: 100%; height: 100%; margin: 0; } header{ width: 100%; height: 30vh; background-color: powderblue; } #content{ wi
阅读全文
posted @ 2022-04-01 09:46
~LemonWater
摘要：position 指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。 position: static | relative | absolute | fixed | sticky; static 静态定位，正常流布局。· 此时top，ri
阅读全文
posted @ 2022-04-01 09:25
~LemonWater
摘要：函数 calc() calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； calc()函数支持 "+", "-", "", "/" 运算 #div1{ position: relative; width: cal
阅读全文
posted @ 2022-04-01 09:20
~LemonWater
摘要：flex布局 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 display: flex; display: -webkit-flex; /* Safari */ display: inline-flex 扩展 flex & margin 实
阅读全文
posted @ 2022-04-01 09:08
~LemonWater
摘要：float 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除。 float: left | right | none | inline-start | inline-end; .left { float: left; background: p
阅读全文
posted @ 2022-03-31 18:38
~LemonWater
摘要：文本 字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family 在所有这些属性中，只有 f
阅读全文
posted @ 2022-03-31 17:16
~LemonWater
摘要：超链接 常用样式 color color: #000; cursor cursor: [...<url>] | [type]; type:[default | wait | pointer | text | zoom-in | zoom-out...] /* 后面备用，第一个值不显示就顺序以后面的值
阅读全文
posted @ 2022-03-31 16:34
~LemonWater
摘要：列表 预设值 <ul> 和 <ol>元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。 <li> 默认是没有设置间距的。 <dl> 元素设置 margin的顶部和底部: 16px(1e
阅读全文
posted @ 2022-03-31 15:43
~LemonWater
摘要：文本处理 写入模式 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 值 描述 horizontal-tb 文本横向，块流向从上至下 vertical-rl 文本纵向，块流向从右至左 vertical-lr 文本纵向，块流向从左至右 i
阅读全文
posted @ 2022-03-31 15:29
~LemonWater
浙公网安备 33010602011771号