CSS
...
Loving&Living
这个作者很懒,什么都没留下…
展开
-
CSS3 appearance 属性
1.appearance属性 为none去除该标签的默认样式,保留其原有功能例如: div{ appearance:none; -moz-appearance:none; -webkit-appearance:none; }让div看上去像一个buttondiv{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari and原创 2021-02-01 08:56:53 · 509 阅读 · 0 评论 -
CSS3之transform
CSS变形功能包括:移动(translate)、缩放(scale)、旋转(rotate)、倾斜(skew)变形坐标轴x轴的正值在右侧,负值在左侧。y轴的正值沿纵轴向下,负值沿纵轴向上z轴从显示器上跃出,指向你的眼前。z轴上的正值离你较近,负值离你较远每个元素都有自己的参照物,各轴都相对自身而动。如果旋转了元素,轴也随之旋转。旋转之后再变形,是相对旋转后的轴计算的。translate平移函数沿一个轴或多个轴移动。如果值是百分数,移动距离相对元素自身的尺寸计算translateX()沿元素原创 2020-12-30 19:03:33 · 141 阅读 · 0 评论 -
css的scoped作用域和深度选择器
CSS 的 scoped 作用域和深度选择器scoped:当添加 scoped 属性给当前组件所有结构添加一个唯一的属性 data-v-xxx所有元素选择器都会加上选择这个属性编译之前:#shortcut { width: 100%; height: 30px; line-height: 30px; background-color: #e3e4e5;}编译之后:#shortcut[data-v-2f029f00] { width: 100%; heigh原创 2020-12-07 21:10:55 · 366 阅读 · 0 评论 -
CSS3总结
CSS3CSS3高级选择器动态伪类选择器锚点伪类:link、visited用户行为伪类:hover、active、focus目标伪类target(IE9及以上)属性选择器选择器描述E[attr]有属性att的所有E元素E[attr=‘val’]属性att的值是val的元素E[attr^=‘val’]属性att的值以val开头的元素E[attr$=‘val’]属性att的值以val结尾的元素E[attr*=‘val’]属性att的值包含v原创 2020-12-03 16:35:07 · 103 阅读 · 0 评论 -
浮动和定位
浮动float属性:左浮动(left):让元素沿着容器左侧放置,允许文本和内联元素环绕它,它从正常的页面中移除,虽然还保持一点流动性右浮动(right):让元素沿着容器右侧放置,允许文本和内联元素环绕它,它从正常的页面中移除,虽然还保持一点流动性none:不浮动浮动对元素的影响浮动对元素的影响:块标签:不再独占一行仍然可以设置宽和高构成了BFC,不再进行父级塌陷完美支持margin和padding行标签:可以设置宽高完美支持padding和margin脱原创 2020-12-03 16:34:30 · 122 阅读 · 0 评论 -
css的盒子模型及其它
盒子模型盒子模型的概念在html中,把每一个元素都当做成一个盒子,拥有盒子的平面外形和空间盒模型由内容(content)+内边距(padding)+边框(border)+外边距(margin)4部分构成内容区域:你书写的内容或者子元素能够显示的区域内边距:撑开内容与边框的距离边框:元素的边框外边距:撑开元素和其他元素之间的距离margin 0 auto居中在正常的布局中,块级元素具有满屏的属性,也就是在水平方向上占满父级的宽度满屏以后,内部元素的内容+内边距+边框+外边距 刚原创 2020-12-03 14:47:01 · 368 阅读 · 3 评论 -
css基础样式总结
CSS基础样式颜色(可以继承)1.color2.rgb() / rgba()3.十六进制 #1234564.HSL5.透明颜色:transparent字体font-famliy:设置字体(可以继承)目前常用的字体可以分为5大类serif:衬线字体族 衬线指的是字母结构笔画之外的装饰性笔画 (serif 典型的字体有:Times New Roman、MS Georgia、宋体……)sans-serif:无衬线字体族 (sans-serif 典型的字体有:MS Trebuchet、MS原创 2020-12-03 10:25:25 · 220 阅读 · 0 评论 -
CSS基础和选择器
CSS基础浏览器渲染流程浏览器开始解析目标HTML文件,执行流的顺序为自上而下。HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。CSSOM和DOM开始合并构成渲染树(render Tree),每个节点开始包含具体的样式信息。浏览器就是根据render tree来绘制页面的计算渲染树中个各个节点的位置信息,即布局阶段。将布局后的渲染原创 2020-12-02 23:35:19 · 100 阅读 · 0 评论