css
关注
分享
扫一扫
文章平均质量分 78
yoghurt&girl
一个不太聪明的野生程序猿....
展开
-
CSS——过渡、形变、动画
鼠标移动到一个元素上面，元素发生变化，鼠标移走，变化消失；这是一个动态的过程，这就是过渡。在CSS过渡中允许你在给定的时间内平滑地改变属性值。通过过渡可以指定一个属性发生变化的切换方式；通过过渡可以创建一些非常好的效果，提升用户体验感；使用过渡就是使用我们transition这个属性；这些属性值部分顺序，但第一个时间必定是过渡花费时间。持续时间第二个时间才是过渡延迟时间。案列展示： CSS可实现HTML元素的动画效果动画使元素逐渐从一种样式转变为另一种样式，可以随意更改任意数量的CSS属性，相对原创 2022-06-23 11:42:11 · 1025 阅读 · 0 评论 -
弹性盒模型
弹性盒子是CSS3的一种新的布局格式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。1、弹性容器2、弹性元素把父元素设置为弹性容器之后，那么他的直接子元素（注意只有子元素）就会自动变成弹性元素。弹性元素可以同时是弹性容器也是弹性元素。3、弹性盒子属性值inline-flex会让后面的内容与之在一行显示，但flex是独占一行1、flex-grow指定弹性元素的伸展的系数（写在子元素里面的）当父元素有多余的空间时，子元素如何伸展父元素和按照比例进行分配（默认原创 2022-06-16 09:00:00 · 672 阅读 · 0 评论 -
css中display设置显示隐藏、定位功能
前言一、displayopacity效果图：二、定位1.为什么要定位2.定位模式静态定位相对定位绝对定位知识点的延伸显示隐藏，display在我们之前学习的知识点里面我们的display属性是给我们来设置元素转换模式的。但是除了元素转换之外，display还可以显示隐藏元素。取值范围0-1,【0完全消失，1完全显示】这个属性和display：none隐藏元素有一个很相似的地方都是能够让元素隐藏的，但是display能够让元素的位置在页面中消失，但是opacity这个属性只是让元素看不见，但实际上位置还在原来原创 2022-06-07 09:00:00 · 10299 阅读 · 0 评论 -
CSS中盒子样式设置及浮动特性
在CSS3中我们新增了圆角边框样式，这样我们可以使盒子变为圆角。注意：默认的是外阴影，但是不可以写outset这个单词，否则会造成外阴影无效。盒子阴影不占用空间，不会影响盒子的排列。效果图： 在CSS3中我们可以通过box-sizing来指定盒子模型，它有两个属性值，content-box、border-box。盒子计算分为了两种情况：box-sizing：content-box（盒子大小）：width+padding+border 以前盒子默认大小组成border-sizing：border原创 2022-06-06 09:00:00 · 2478 阅读 · 0 评论 -
css——元素的显示模式及外边距重合问题解决
外单线你发的原创 2022-06-04 09:00:00 · 364 阅读 · 0 评论 -
关于边框和内边距的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-06-02 09:30:00 · 122 阅读 · 0 评论 -
css中的伪元素、基线对齐、盒子模型
目录一、伪元素二、基线对齐三、盒子模型1、外边距margin2、边框（border）一、伪元素说明：伪类元素使用两个冒号（：：）而不是一个冒号，目的是为区分伪类和伪元素，大多数浏览器都支持这两种方式。：：before——在当前元素前面插入一些元素，激活使用content：“”；：：after——在当前元素后面插入一些元素，激活使用content：“”；：：first-line——在元素的第一行文字使用CSS样式：：first-letter——在元素的首.原创 2022-06-02 09:00:00 · 1981 阅读 · 0 评论 -
css复合选择器
一、伪类选择器1、focus伪类选择器定义：用于选取获得焦点的表单元素；焦点就是光标，一般情况下<input>类表单元素才能获取，所以这个选择器主要针对表单元素。语法：input：focus{样式1；样式2....}2、链接伪类选择器（1）a:link——选择所有未被访问的链接（2）a:visited——选择所有已访问的链接（3）a:hover——当鼠标移动在链接上产生的样式（最常用）（4）a:active——选择活动链接注意：为确保有效，我们在使用过程中最好原创 2022-06-01 09:00:00 · 142 阅读 · 0 评论 -
css背景——背景颜色、背景图、平铺、位置和固定
1、背景图片background-image属性描述元素的背景图像。在实际开发中常用于logo或一些装饰性的小图片和背景图片，优点是便于控制位置（精灵图也是其中一种）语法格式：2、背景颜色background-color：属性值可以是颜色名、十六进制、RGB3、背景平铺4、背景图片位置5、背景图片固定scroll 背景图像随内容滚动 fixed 固定 ...原创 2022-05-31 09:00:00 · 406 阅读 · 0 评论