![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
angus.dai
一只前端萌新!
展开
-
table布局
使用场景 <table> 最常用的也是最正确的使用方法是制作表格,由于其对占据的空间有着划分的作用,便可以使用<table> 来布局。 使用 <table border="1" cellspacing="0" cellpadding="0" style="width: 100%;"> <tr> <td>1</...原创 2020-05-05 17:05:49 · 373 阅读 · 0 评论 -
flex布局
什么是flex 使用flex的元素就叫做容器,容器默认存在2条轴线,主轴线(main axis)和垂直的交叉轴线(cross axis)。轴线开始的位置被叫做main/cross start,结束的位置被叫做main/cross end。项目是沿着主轴线开始、结束方向排列的。 知识点 1、flex-direction 设置容器的主轴方向和主轴的起点 flex-direction: row; ...原创 2020-05-05 16:57:09 · 119 阅读 · 0 评论 -
浮动定位及清除浮动
浮动定位 我们在写页面的时候会经常使用浮动定位 <div class="container"> <div class="item"></div> <div>Pea horseradish azuki bean lettuce avocado asparagus okra.</div> </div> .co...原创 2020-05-05 16:52:59 · 844 阅读 · 0 评论 -
transition和animation的区别
1、transition 需要去触发比如:点击事件、鼠标移入事件;而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画 2、transition 触发一次播放一次;而 animation 则是可以设置很多的属性,比如循环次数,动画结束的状态等等; 3、transition关注的是样式属性的变化,属性值和时间的关系是一个三次贝塞尔曲线;而animation作用于元素本...原创 2020-05-05 16:38:39 · 236 阅读 · 0 评论 -
css动画之animation
语法: animation-name 指定要绑定到选择器的关键帧的名称 animation-duration 动画指定需要多少秒或毫秒完成 animation-timing-function 设置动画将如何完成一个周期 linear(从开始到结束速度一致)| ease(默认。动画以低速开始,然后加快,在结束前变慢。)| ea...原创 2020-05-05 16:30:12 · 160 阅读 · 0 评论 -
css动画之transform
1、translate(平移) <div class="box"></div> .box { width: 200px; height: 200px; background-color: #9198e5; margin: 30px auto; transform: translate(300px); ...原创 2020-05-05 16:25:47 · 236 阅读 · 0 评论 -
position定位详解
css中有三种定位:static、fixed、relative、absolute static是正常定位 fixed 为固定定位 相对于浏览器窗口进行定位 relative为 相对定位,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留 absolute为绝对定位,相对于static定位以外的第一个有定位的祖先元素进行定位 <div class="header">haha&l...原创 2020-05-05 16:20:05 · 681 阅读 · 0 评论 -
vue css深度选择器
使用scoped后,父组件的样式将不会渗透到子组件 如果想在使用了scoped不污染全局样式的情况下,依然可以修改子组件的样式,可以使用深度选择器。对第三方组件也起作用哦! 在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep .nav-theme-dark >>> .logo { color: #fff; backg...原创 2020-05-05 16:13:57 · 1682 阅读 · 0 评论