![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 55
予你@。
真正属于我的命中注定,再找五百年又怕什么。
展开
-
Css属性 display:flow-root 的介绍
学习flow-root前,我们要先了解下BFC的概念。在W3C规范中BFC是这样定义的:浮动元素和绝对定位元素,非块级盒子的块级容器,以及overflow值不为visiable的块级盒子,都会为他们的内容创建新的BFC。在BFC中,盒子从顶端开始垂直的一个接一个地排列,两个盒子之间的垂直间隙是由他们的margin值决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)。对于从右到左的格..原创 2021-11-09 14:45:02 · 946 阅读 · 0 评论 -
九宫格布局自适应宽度
FlexBoxHTML 结构如下: 12345678910111213 <div class="square"> <ul class="square-inner flex"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li&..原创 2021-08-31 23:10:01 · 342 阅读 · 0 评论 -
CSS常见面试题
1 display: none;与visibility: hidden;的区别联系:它们都能让元素不可见区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置v原创 2021-08-18 11:07:05 · 84 阅读 · 0 评论 -
原生HTML,CSS,JS实现tab栏切换效果
原生HTML,CSS,JS实现tab栏切换效果原创 2022-09-12 17:00:46 · 1642 阅读 · 0 评论 -
Vue中利用v-if、v-show实现淡入淡出动画效果
Vue中利用v-if、v-show实现淡入淡出动画效果原创 2022-09-06 15:24:48 · 5842 阅读 · 0 评论 -
Flex 布局
1 什么是flex布局弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。2 支持浏览器(参见菜鸟教程)注意: 1 Internet Explorer 9 及更早版本不支持 flex 属性。 2Internet Exp...原创 2022-04-07 11:19:51 · 898 阅读 · 0 评论 -
Css 粘性布局
CSS中position属性(sticky)详细参见菜鸟教程:sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,也就是说在position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位原创 2022-04-01 18:00:29 · 1858 阅读 · 0 评论 -
利用纯css实现一个简单的三角箭头
通过border属性控制箭头的朝向直接将边框颜色改为透明色,通过控制边框的长度 来控制三角形的形状 <body> <div class="triangle"></div> </body> <style> .triangle{ width: 0; height: 0; border-radius: 1原创 2022-03-25 15:03:56 · 565 阅读 · 0 评论 -
使用Element ui 编写登录页面
1 完整引入element ui执行命令安装npm i element-ui -Smian.js中 完整引入import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);2 登录页 login.vue<template> .原创 2022-03-14 11:18:15 · 30919 阅读 · 20 评论 -
CSS 设置鼠标的样式
鼠标小手 :cursor:pointer鼠标加载 :cursor:wait鼠标文本选择:cursor:text鼠标调整 水平\垂直 cursor:w-resize \ s-resize鼠标移动: cursor:move原创 2022-03-14 10:57:46 · 1557 阅读 · 0 评论