CSS
和世界不一样,那就不一样!
星辰大海,砥砺前行!
展开
-
样式布局flex----一行五个元素,随着屏幕变化宽度发生改变
CSS flex布局原创 2022-07-29 09:40:43 · 5401 阅读 · 0 评论 -
图片不再自适应,按照指定规格截取,设置属性object-fit: cover
css图片image相关属性原创 2022-06-10 11:41:02 · 350 阅读 · 0 评论 -
伸缩布局中,flex: 0 0 auto
介绍在页面开发当中,经常使用到 flex 伸缩布局;很多人经常使用到 flex 的这一属性,flex: 0 0 auto 或者 flex: 0 1 auto 或者 flex: 1 0 auto 或者 flex: 0 0 10% ………… 但是大多数人都不太清楚这一属性的含义,下面主要介绍一下,这一属性的使用方式,以及含义:定义如上面的 flex: 1 0 auto , 这一属性,flex后面跟了三个值,这三个值实际上是flex-grow ,flex-shrink,flex-basis原创 2022-03-13 16:24:49 · 388 阅读 · 0 评论 -
CSS实现文本超过部分,超出两行,超出部分省略号显示...
文字超过部分显示为省略号<style>.p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}</style><body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一原创 2022-03-03 17:16:31 · 825 阅读 · 0 评论 -
vue 单选列表, 并且改变样式
N个模板,单选,选中的改变样式(青色的边框)HTML代码: <ul class="templates-style"> <li class="filter-nav" v-for="(item, index) in touristList" :key="index" :class="{active:(clickIndex == index )}" @原创 2022-02-18 13:52:39 · 924 阅读 · 0 评论 -
px em rem 这三中长度单位的区别
px em rem 这三中长度单位的区别1.px 是一个绝对单位;em 和 rem 是一个相对单位, em 参考的是当前元素的字体(font-size)大小, 参考的是页面根元素 html 的字体,也就是(font-size)大小2.rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小时,仍然是相对大小,但相对的只是 HTML 根元素原文链接:https://blog.csdn.net/yzkdcsdn/article/details/121054原创 2022-02-18 09:29:51 · 306 阅读 · 0 评论 -
sass/scss 和 less的区别
一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只原创 2022-02-18 09:21:37 · 521 阅读 · 0 评论 -
工作中个人常用知识点汇总
一、CSS1、flex布局给父盒子设置display: flex,里面的元素就是弹性元素;父亲常见属性;1) 父元素属性-flex-direction: 设置主轴的方向;就是x轴,y轴;默认值:flex-direction: row,里面的元素从左到右;flex-direction: row-reverse:里面的元素从右到左;flex-direction: column: 改变主轴变成轴,元素从上到下;flex-direction: column-reverse: y轴是主轴,元素从下到原创 2021-12-23 14:49:46 · 647 阅读 · 0 评论 -
Flex 布局教程:语法篇
Flex 布局教程:语法篇网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,以下内容主要参考原创 2021-01-29 15:08:04 · 126 阅读 · 0 评论 -
行内元素与块级元素的水平垂直居中
行内元素与块级元素的水平垂直居中,有很多种方式,以下是我喜欢用的方式;一、 水平居中行内元素.parent { text-align: center; }块级元素margin方式:.son { margin: 0 auto; }flex布局.parent { display: flex; justify-content: center; }绝对定位 .son { po原创 2021-11-09 10:02:45 · 326 阅读 · 0 评论 -
css小技巧——鼠标悬浮时切换图片
<template> <div style="padding: 20px"> <img src="../static/icon/down.png"> </div></template><style scoped> img:hover { content: url(../static/icon/up.png); }</style>原创 2021-11-05 15:18:31 · 390 阅读 · 0 评论 -
position: sticky; 基于用户的滚动位置来定位
position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。在目标区域以内,它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top,原创 2021-11-02 17:01:55 · 329 阅读 · 0 评论