前端CSS
学习css
婧大
一切都会有的,未来可期
展开
-
【CSS】-动画属性
css动画CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。只能转换由盒模型定位的元素。根据经验,如果元素具有display: block,则由盒模型定位元素。none 没有定义转换matrix 定义矩阵转换translatetranslate(x,y)translate3d(x,y,z)translateX(x)translateY(y)translateZ(z)scale 缩放转换scale(x,y)原创 2020-11-15 10:43:13 · 146 阅读 · 0 评论 -
【CSS】选择器优先级
1、选择器(优先级)选择器种类:严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了。选择器优先级:CSS选择器效率从高到低的排序如下:1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p原创 2020-09-16 14:51:07 · 3277 阅读 · 0 评论 -
【学习】link和@import的区别
link和@import的区别分为以下四点????加载顺序????从属关系????兼容性????DOM可控性一、link????1、link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS,rel连接属性等2、加载页面时,link引入的CSS被同时加载,3、link标签作为HTML元素,不存在兼容性问题,4、可以通过JS操作DOM,来插入link标签改变样式;二、@import????1、@import是CSS提供的语法规则,只有导入样式表的作用2、@import原创 2020-08-27 10:16:12 · 231 阅读 · 0 评论 -
【css】css实现div两列布局(固定和自适应)(两种方法)
css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)1.实现目标左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应2、思路1、让两个div并排到一行div属于块级元素,在文档标准流中单独占据一行。要想多个div在一行,就可以想办法让div脱离标准流,比如使用float或者absolute;2、一个div宽度固定,另一个div自适应剩下的宽度对自适应宽度的div处理方法是不去设置它的width属性,浏览器会自动计算后让它占一行,接下来给他设置margin-left属原创 2020-08-19 15:32:05 · 9406 阅读 · 0 评论 -
【学习】css画三角形原来这么简单
css画三角形我们有一个div元素,并给它设置了如下的样式,之所以把边框宽度设置成50px,计算机处理时,在边框交接处,一边占用一半的面积。<div class="div"></div>.div{ width: 0; height: 0; border-top: 50px solid rgb(174, 196, 96); border-right: 50px solid red; border-bottom: 50px原创 2020-08-19 14:58:46 · 235 阅读 · 0 评论 -
【学习】CSS实现水平垂直居中的方式
CSS实现水平垂直居中的方式居中元素定宽高一、absolute+负margin1、父元素相对定位,子元素绝对定位2、因为绝对定位的百分百是相对于父元素的宽高,但绝对定位是基于元素的左上角3、借助外边距的负值,设置子元素的外边距为子元素宽度一般的负值优点:好理解,兼容性也比较好缺点:需要知道子元素的宽高后面的代码示例均已这个例子进行改动 <style> .wp{ border:1px solid red; width: 300px;原创 2020-08-17 10:48:50 · 298 阅读 · 0 评论