随笔分类 -  css

vue过渡&动画
摘要：动画 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </di 阅读全文
posted @ 2021-08-18 10:53 至安 阅读(99) 评论(0) 推荐(0)
元素的显示与隐藏
摘要：元素的显示与隐藏 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 display 显示 visibility 可见性 overflow 溢出显示隐藏 display display 属性用于设置一个元素应如何显示。 display 阅读全文
posted @ 2021-06-25 14:14 至安 阅读(765) 评论(0) 推荐(0)
css定位
摘要：为什么需要定位 提问： 以下情况使用标准流或者浮动能实现吗？ 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 阅读全文
posted @ 2021-06-24 17:11 至安 阅读(117) 评论(0) 推荐(0)
css书写规范 & 页面布局规范 &常用案例经验总结
摘要：CSS 属性书写顺序(重点) 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / pad 阅读全文
posted @ 2021-06-23 17:11 至安 阅读(646) 评论(0) 推荐(0)
css浮动
摘要：浮动 前言 CSS 提供了三种传统布局方式，简单说就是盒子如何进行排列： 普通流（标准流） 浮动 定位 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行 阅读全文
posted @ 2021-06-22 17:08 至安 阅读(131) 评论(0) 推荐(0)
css盒子模型
摘要：前言 页面布局要学习三大核心， 盒子模型， 浮动 和 定位。 学习好盒子模型能非常好的帮助我们布局页面。 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 网页布局的核心本质： 就是利用 阅读全文
posted @ 2021-06-20 22:03 至安 阅读(334) 评论(0) 推荐(0)
css三大特性 & 选择器的权重
摘要：层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突，一个属性会覆盖另外一个属性。 覆盖性原则： 层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式 这里要注意只覆盖同样的不可重复的样式属性，不会覆盖允许重复的属性 示例： <!DOCT 阅读全文
posted @ 2021-06-19 20:57 至安 阅读(627) 评论(0) 推荐(0)
css背景
摘要：前言 通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置 背景颜色：background-color 背景图片：background-image 背景平铺：background-repeat 背景图片位置：background-position 背景图像固定：background- 阅读全文
posted @ 2021-06-17 23:45 至安 阅读(146) 评论(0) 推荐(0)
文字、图片、表单垂直居中
摘要：单行文字垂直居中 CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现 解决方案: 让文字的行高line-height等于盒子的高度，就可以让文字在当前盒子内垂直居中 原理 行高 = 上空隙 + 文字本身高度 + 下空隙 当文字的行高等于盒子高度时，行高的上空隙和下空隙把文字 阅读全文
posted @ 2021-06-17 22:19 至安 阅读(259) 评论(0) 推荐(0)
元素显示模式：块元素 & 行内元素 & 行内块元素
摘要：元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面。了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。 HTML 元 阅读全文
posted @ 2021-06-16 23:36 至安 阅读(786) 评论(0) 推荐(0)
css引入方式
摘要：css引入方式 按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类： 行内样式表（行内式） 内部样式表（嵌入式） 外部样式表（链接式） ##行内样式表（行内式） 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式 <div 阅读全文
posted @ 2021-06-15 21:31 至安 阅读(119) 评论(0) 推荐(0)
css语法规范、选择器、字体、文本
摘要：css语法规范 使用 HTML 时需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。 CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式 属性和属性 阅读全文
posted @ 2021-06-14 22:30 至安 阅读(322) 评论(0) 推荐(0)
自定义列表标签使用
摘要：<dt>Name: </dt> <dd>Squall Li</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>26th May 1986</dd> 加入css样式 <d 阅读全文
posted @ 2021-05-24 17:11 至安 阅读(279) 评论(0) 推荐(0)