![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
cssStudy
文章平均质量分 59
匀升ovo
这个作者很懒,什么都没留下…
展开
-
CSS-线性渐变|径向渐变|圆锥渐变
12.css3渐变1.线性渐变为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction:起点或方向默认情况下,线性渐变的方向时从上到下的background-image: background:linear-gradient(red,oran原创 2021-11-24 17:09:30 · 494 阅读 · 0 评论 -
css学习笔记-px,rem,em的区别
概述属性em元素相对于父级的font-size值的大小例如父级的font-size=100px则元素的1em=100px 0.1em=10pxrem页面内元素相对于html标签的font-size值例如html标签的font-size=100px则元素的1em=100px 0.1em=10px设置全局font-size变量(移动端使用可以非常方便)创建js文件,并加入以下代码,可以让页面的fontsize根据设计稿的宽度cilentwidth的变化二等比例变化页面需要将原创 2021-08-13 11:18:09 · 210 阅读 · 0 评论 -
css学习笔记-响应式布局
概述响应式页面就是使用同一套代码,在不同的设备中展现出不同的效果属性媒体查询通过@media定义样式,浏览器窗口满足指定条件,才会应用此样式举例<div class="box"></div>.box{ width: 300px; height: 300px; background-color: red; } @media screen and (max-width:600px) { .b原创 2021-08-13 11:15:09 · 126 阅读 · 0 评论 -
css学习笔记-grid布局
概述1.flex布局是一维布局,grid布局是二维布局.2.flex考虑的是项目按行或列布局,grid布局需要同时考虑行和列.flex布局:grid布局:基本概念grid-template-columns可以设置容器的列数以及相应列的宽度grid-template-rows可以设置容器的行数以及相应行的高度可以按照像素设置行列的宽高,也可以按照比例来设置(fr)容器属性与flex属性相似1.justify-items单元格内元素在单元格中的横向排列方式(包括start原创 2021-08-11 11:23:11 · 833 阅读 · 0 评论 -
css学习笔记-flex布局
概述基本概念举例设置display: flex之前容器内的元素会默认垂直排列(沿着主轴排列)设置display: flex之后;flex容器内的flex-item将会默认水平排列<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item">原创 2021-08-10 11:54:32 · 666 阅读 · 0 评论 -
css学习笔记-动画效果animation
动画属性(animation)可以简写成:transform:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count举例1.实现一个div旋转的动画效果<div class="box"></div> @keyframes anim{ 0%{ } 1原创 2021-08-10 11:40:44 · 113 阅读 · 0 评论 -
CSS学习笔记-过渡效果transition
transition举例1.实现下拉菜单效果<ul class="menu"> <li> 书籍 <ul class="sub-menu"> <li>js书籍</li> <li>js书籍</li> <li>js书籍</li>原创 2021-08-09 10:36:53 · 209 阅读 · 0 评论 -
css学习笔记-css3新增样式
4.CSS3新增样式圆角border-radius:左上 右上 右下 左下如果设置两个值,第一个值表示左上和右下,第二个值表示右上和左下<div class="radius"></div>.radius{ height: 300px; width: 300px; background-color: red; border: 1px solid black; margin: 0 auto;}在样式中添加 border-ra原创 2021-08-07 15:52:13 · 401 阅读 · 0 评论 -
CSS学习笔记-css定位
3.CSS定位绝对定位(absolute)特性脱离文档流默认参照物为浏览器视窗的左上角 <div class="containner"> <div class="box"> 1 </div> <div class="box position"> 2 </div> <div class="box fixed">原创 2021-08-07 15:45:27 · 253 阅读 · 0 评论 -
css学习笔记-float浮动布局
浮动布局HTML元素的分类display属性display:block可以将不能设置宽度和高度的行内元素变得可以设置高度和宽度,例如a、spandisplay:none可以将元素隐藏float浮动布局float:left将元素设置为浮动元素(float),块元素可以在同一行显示.container{ width: 300px; height: 300px; border: 1px solid red; float: left;}.side{原创 2021-08-06 14:50:57 · 296 阅读 · 0 评论 -
css学习笔记-box模型
css学习1.box模型css学习1.box模型定义一个class为box的div<div class="box"></div>使用通配符‘*’可以使得元素边距初始化 /* 通配符 '*' 使得元素边距初始化 */*{ padding: 0; margin: 0;}.box{ width: 100px; height: 100px; border: 1px solid red;}margin(外边距)表示两原创 2021-08-06 14:46:40 · 629 阅读 · 0 评论