css
关注
分享
扫一扫
泊一
起风了
展开
-
absolute导致的父元素高度塌陷问题解决
解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决<body> <div class="container" id="container"> <div class="box" id="box" >转载 2021-12-05 14:17:15 · 1003 阅读 · 0 评论 -
Animate.css动画
Animate.css动画第一步： 将animate.css动画库拷贝到css文件夹，利用link引入<!-- 引入动画库animate.css --><link rel="stylesheet" href="css/animate.min.css">第二步：调用动画— 找到要调用动画的盒子直接在class里面调用animated 和 对应的动效类名（去动画库查看...原创 2019-09-03 14:25:27 · 345 阅读 · 0 评论 -
css3中的变形（transform）、过渡(transition)、动画(animation)
一.Transform（变形）1. 2D转换之translate位移2D转换：属性：transform,属性值：translate(X,Y),属性值也可以分开书写：transform:translate(X,Y)transform:translateX(n)transform:translateY(n)注意：1.1 2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内...原创 2019-09-03 11:40:38 · 2855 阅读 · 0 评论 -
伪元素和伪类
伪元素和伪类62018.10.14 18:53:03字数1226阅读1424一、伪类1.1 定义css伪类：css伪类用于向某些选择器添加特殊效果。伪类其实与普通的css类相类似，可以为已有的元素添加样式，但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式，所以将其称为伪类。(这种文档树无法描述的状态是什么呢？当一个元素在用户的不同行为下就变化成不同的状态这个行为的变化dom就...转载 2019-09-01 14:09:21 · 167 阅读 · 0 评论 -
url、src、href定义以及使用区别
url、src、href定义以及使用区别 url、href、src 详解现自己居然没把url、href、src关系及使用搞清楚，今天就理一下。主要包括：url、src、href定义以及使用区别。URL(Un...转载 2019-08-29 11:50:41 · 325 阅读 · 0 评论 -
外边距塌陷解决方法
并列垂直外边距合并两个盒子如果垂直排列，上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；解决方案：不要同时设置，只给一个盒子设置即可；嵌套垂直外边距合并如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；解决方案：01、给父级盒子设置一个border-top: 1...原创 2019-08-23 16:14:10 · 727 阅读 · 0 评论 -
CSS布局说——两栏布局、三栏布局（圣杯、双飞翼）
CSS布局文档流内联元素从左向右 块级元素从上向下 各占一行定位position属性，有6大类static 默认设置，就是相对于文档流位置-relative 相对定位，是相对于原来位置移动使用，还在文档流中-absolute 绝对布局，是相对于最近那个position不为static为参照点布局，脱离文档流-fixed 相对于窗口固定，脱离文档流-sticky ...原创 2019-07-28 19:44:20 · 315 阅读 · 0 评论 -
js中html，text，val 比较
js中html，text，val 比较 .html()用为读取和修改元素的HTML标签，对应js中的innerHTML .html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素.tex...转载 2019-07-27 17:04:59 · 348 阅读 · 0 评论 -
flex:1详解
转 flex:1;详解 ...转载 2019-07-23 14:38:15 · 229 阅读 · 0 评论 -
width=100%与width=auto
最近在学习前端的一些基本知识，今天碰到了一个问题，关于width的问题首先是width=100%:当width=100%...转载 2019-07-27 12:21:00 · 803 阅读 · 0 评论 -
Flex布局
Flex布局 一、什么是Flex布局？Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。?123.box{ display:flex;} 行内元素也可以使用Flex布局。?123.box{&nbs...转载 2019-07-24 23:49:25 · 2232 阅读 · 0 评论 -
css 浮动和清除浮动
css 浮动和清除浮动 在写页面布局的过程中，浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋，在这里我分享一下我对浮动这块知识的总结。一、浮动的定义 使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或...原创 2019-07-14 10:08:49 · 154 阅读 · 0 评论 -
css3 box-shadow属性解析
box-shadow属性至多有6个参数设置，他们分别取值：阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；Y-offset:是...原创 2019-06-23 18:45:47 · 857 阅读 · 0 评论