![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
思无邪。
python,前端小白,记录自己的学习过程~
展开
-
bootstrap-布局容器-栅格系统-响应式工具
1.1 bootstrap简介中文官网: https://www.bootcss.com/官网: http://bootstrap.html.cn/2.3 布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstarp预先定义好了这个类,叫.container他提供了两个作此用处的类1.container类响应式布局的容器 固定宽度大屏(>=1200px)宽度为1170px中屏(>=992px)宽度为970px小屏(>=768px)原创 2020-06-10 10:41:17 · 313 阅读 · 0 评论 -
rem-媒体查询-less基础
rem单位rem(root em)是一个相对单位,类似于em,em是父元素字体大小rem的是相对于html元素的字体大小比如,根元素html设置font-size=12px,非根元素设置width:2rem;则width表示24px2. 媒体查询2.1 什么是媒体查询Media Query 是css3新语法使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对原创 2020-06-09 11:24:25 · 243 阅读 · 0 评论 -
flex布局-常见父项属性-背景线性渐变
flex布局2.1 布局原理flex是flexible Box的缩写,意为弹性布局,为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局后,子元素的float,clear和vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = flex布局3.1 常见父项属性3.2 flex-direction:设置主轴的方向1.主轴与侧轴默认主轴方向是x轴方向,水平向右默认侧轴方向是y轴方向,水平向下2.属性值flex-dir..原创 2020-06-08 10:03:30 · 270 阅读 · 0 评论 -
meta视口标签-多倍图-背景缩放background-size-CSS3盒子模型-特殊样式-流式布局-二倍精灵图做法
2.5 meta视口标签属性 解释说明width 宽度设置的是viewport宽度,可以设置device-width特殊值initial-scale 初始缩放比,大于0的数字maximum-scale 最大缩放比,大于0的数字minimum-scale 最小缩放比,大于0的数字user-scalable 用户是否可以缩放,yes或no(1或0)3.2 多倍图可以放入实际大小两倍的图,否则会造成图片模糊手机通常使用二倍图,还存在3倍/4倍图,看实际需求3.3 背景缩放backgr原创 2020-06-08 10:01:54 · 417 阅读 · 0 评论 -
CSS3的3D转换-透视-旋转-3D呈现
3D转换6.1 三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴:水平向右 注意:x右边是正值,左边是负值y轴:垂直向下 注意:y下面是正值,上面是负值z轴:垂直屏幕 注意:往外面是正值,往里面是负值6.3 透视perspective距离视觉点越近的在电脑平面成像越大,越远成像越小透视的单位是像素px***透视写在被观察元素的父盒子上面的d:就是视剧,视距就是一个距离人的眼睛到屏幕的距离z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大6.原创 2020-06-05 12:42:17 · 171 阅读 · 0 评论 -
CSS3动画的定义-调用-属性-简写属性-速度曲线细节
5.1 动画的基本使用1.定义动画 /* 1. 定义动画 */ @keyframes move { /* 开始状态 */ 0% { transform: translateX(0px); } /* 结束状态 */ 100% { transform: translateX(1000px); } }2.调用动画/* 动画名称 /anima原创 2020-06-05 12:41:05 · 1501 阅读 · 0 评论 -
2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位1.语法transform: translate(x,y);transform: translateX(n);transform: translateY(n);2.重点定义2D转换中的移动,沿着X和Y轴移动元素translate最大的优点:不会影响其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%);对行内标签没有效果...原创 2020-05-26 10:25:54 · 332 阅读 · 0 评论 -
CSS3新特效:属性选择器,结构伪类选择器,伪元素选择器,CSS3盒子模型,CSS3滤镜filter,calc函数,CSS3过渡
2.CSS3新特效2.2属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助类或者id选择器选择符 简介E[att] 选择具有att属性的E元素E[att=“val”] 选择具有att属性且属性值等于val的E元素E[att^=“val”] 匹配具有att属性且值以val开头的E元素E[att$=“val”] 匹配具有att属性且值以val结尾的E元素E[att*=“val”] 匹配具有att属性且值中含有val的E元素类选择器,属性选择器,伪类选择器,权重为102.3结原创 2020-05-16 22:41:35 · 204 阅读 · 0 评论 -
HTML5新特性:语义化标签,多媒体标签,音频-audio,input属性,表单属性
1.HTML5新特性1.1HTML新增语义化标签header:头部标签nav:导航标签article:内容标签section:定义文档某个区域aside:侧边栏标签footer:尾部标签1.2 HTML5新增的多媒体标签1.视频 video 常见属性属性 值 描述autoplay autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)controls controls 向用户显示播放控件width pixels(像素) 设置播放器原创 2020-05-16 22:30:48 · 416 阅读 · 0 评论 -
元素的显示与隐藏:display,visibility,overflow-精灵图-字体图标-css三角的做法-css用户界面样式-vertical-align-溢出的文字省略号显示
4.元素的显示与隐藏 本质:让一个元素在页面中隐藏或者显示出来4.1 display属性display:none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置应用及其广泛,搭配JS可以做很多网页特效4.2 visibility 可见性visibility属性用于指定一个元素应可见还是隐藏visibility:visible;元素可视visibility:hidden;元素隐藏visibility隐藏元素后,原创 2020-05-16 22:26:52 · 507 阅读 · 0 评论 -
定位:静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位-定位叠放次序-扩展
1.定位1.1静态定位static不脱标 不能使用边偏移 很少使用1.2相对定位relative是元素在移动位置的时候,相对于它原来的位置来说的(自恋型)选择器{position:relative;}position: relative;top: 50px;left: 100px;特点:1.他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)*****2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他(不脱标,继续保留原来的位置)1.3绝对定位ab原创 2020-05-16 22:07:12 · 519 阅读 · 0 评论 -
盒子阴影和文字阴影,圆角边框,浮动,清除浮动
盒子边角的操作盒子阴影和文字阴影box-shadow 水平,垂直,阴影的模糊度,阴影颜色,insettext-shadow 水平,垂直方向,模糊度,颜色圆角边框 border-radius为什么用浮动多个有高宽的盒子在一排显示没有间隙,不受到多行文本对齐的问题左右好控制浮动的特点浮:浮起来,脱标漏:不占位置特:与行内块特点类似,能设置高宽,一行显示,没有间隙float:l...原创 2020-05-06 22:18:18 · 148 阅读 · 0 评论 -
padding,margin,清除li前面的小圆点,布局技巧,content
padding内边距盒子边框到内容之间的距离1个值 四边2个值 10px 20px 上下 左右3个值 上 左右 下4个值 上 右 下 左属于盒子的一部分 影响盒子真实大小块元素有高度的情况下,设置内边距,要把高宽减去内边距margin盒子与盒子之间的距离使用步骤margin:10px 上右下左margin:10px,20px 上下 左右margin:10px...原创 2020-05-06 22:15:06 · 428 阅读 · 0 评论 -
css-背景-盒子模型-背景大小
背景background-color 背景颜色十六进制rgbrgba a的取值0-1background-image 背景图片url 位置 加""会有提示,不加没有提示background-repeat 背景图片是否平铺满no-repeat 不平铺满repeat-x 在x轴平铺满repeat-y 在y轴平铺满repeat 平铺满background-position 背景...原创 2020-04-30 10:18:55 · 941 阅读 · 0 评论 -
css-选择器优先级权重-元素显示模式
选择器优先级-权重继承 或者 * 0,0,0,0元素选择器 0,0,0,1类选择器,伪类选择器 0,0,1,0ID选择器 0,1,0,0行内样式style="" 1,0,0,0!important 重要的 无穷大1, 看继承 有继承 pass2, 谁的级别高听谁的3, 都有高级别, 比个数4, 所有级别个数相同的情况下, 就近原则元素显示模式行内i...原创 2020-04-30 10:01:07 · 141 阅读 · 0 评论 -
css-引入方式-复合选择器
引入方式行内样式style=“属性:属性值”缺点:只能用于当前标签,不便维护,结构繁杂内部样式head里面添加style选择器{属性:属性值;属性:属性值}当前页面没有实现样式与结构的完全分离外部样式通过link引入外部css文件 <link rel="stylesheet" href="外部css文件" />外部的css用的多 : 1.实现结构与样...原创 2020-04-30 09:58:46 · 124 阅读 · 0 评论 -
css基础-基础选择器,字体属性,文本外观
基础选择器 p{属性名:属性值;}1.1 标签选择器 标签{属性:属性值}页面上全部相同标签1.2 class(类选择器) .名字{属性:属性值} div class=“名字”1.3多类名选择器减少代码量方便代码的后期维护多类名与css的先后顺序有关系,与html结构里面的class类名顺序没有关系多类名的添加,以空格的形式1.4 id选择器html: css: #名...原创 2020-04-24 23:33:43 · 93 阅读 · 0 评论