CSS/CSS3
CSS
Python User
这个作者很懒,什么都没留下…
展开
-
css瀑布流 自动上顶
【代码】css瀑布流 自动上顶。原创 2023-07-04 14:11:47 · 76 阅读 · 0 评论 -
盒子塌陷 和 margin塌陷
1,盒子塌陷产生的原因:当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。解决办法: 使用清除浮动的办法;2,margin塌陷产生的原因:一句话总结:父子嵌套的元素垂直方向的margin取最大值。解决办法: 通过触发BFC来解决。 最好使用overflow: hidden...原创 2022-04-13 21:15:22 · 484 阅读 · 0 评论 -
html css盒模型
盒模型:标准盒模型(W3C盒模型) + IE盒模型(怪异盒模型)1,标准盒模型:content 不包含内边距 padding2,怪异盒模型:content包含内边距padding原创 2022-04-13 21:02:39 · 282 阅读 · 0 评论 -
css 样式穿透的三种方法
当修改某些组件的样式时无法修改,可以使用样式穿透的方法来做,比较常见的样式穿透有三种:使用>>>使用 /deep/使用 ::v-deep1、stylus的样式穿透 使用 >>>2、sass 和 less 的样式穿透...原创 2021-01-30 11:03:33 · 3645 阅读 · 0 评论 -
css object-fit 属性
object-fit是个css的属性指定的替换的内容元素如何放在建立的的高和宽的框里。fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。contain:释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白cover:中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。none: 中文释原创 2021-01-15 11:49:36 · 389 阅读 · 0 评论 -
css3 @keyframes 动画
使一个元素逐渐向下移动@keyframes mymove{from {top:0px;}to {top:200px;}}@keyframes mymove{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}做一个显示隐藏的动画@keyframes opc { 0%, 50%, 100%{opacity:1}, 25%{opacity:0}}/* 引入动原创 2021-01-07 13:27:40 · 189 阅读 · 1 评论 -
CSS中 常见的几种垂直居中的方式 (目前四种,未完待续。。。)
1,flex 布局的方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平-垂直居中</title> <style> .con { width: 400px; height: 400px; background-color: yellow; margin: 100px auto; /* f原创 2020-11-24 23:04:26 · 177 阅读 · 0 评论 -
理解 px,em,rem 的区别和用法
px:px是固定的像素,他的大小不会因为屏幕的大小而进行改变的;em:相对长度,相对父元素的 font-size 的大小而做出改变的;rem:相对长度,rem 中的 r 就是 root 的意思,根据 root 元素的 font-size 的大小而做出的改变;如此,便着重来了解一下 rem 的一些使用:假设UI稿为如图所示:UI 稿,屏幕 w 为 360px;其中 红色盒子w 为 180px 且刚好为一般,如果要将此UI适配于不同屏幕,那么就需要通过rem来进计算,具体计算结果如下:代码说明如下原创 2020-11-24 22:11:46 · 944 阅读 · 0 评论 -
什么是Less 语言,和CSS 有什么不一样
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、函数等特性;换言之,less 经过类似于语言的一种预处理的方式来生成css 文件,这样对于css 文件的维护也有了很大的帮助如图:左侧是 less 文件,右侧为经过编译后的css文件。...原创 2020-11-23 22:38:56 · 463 阅读 · 0 评论 -
CSS3 中 媒体查询 @media 的常见使用和案例说明
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,说白了就是对样式得重置;媒体类型:all适用于所有设备screen用于PC端,智能手机,平板中print应用于打印机或打印预览speech用于屏幕阅读器等发声设备媒体功能:min-width:适用于PC端和移动端min-device-width:只适用于移动端当使用min-的时候,从小到大排布: body { background: red }原创 2020-11-23 15:10:25 · 606 阅读 · 0 评论 -
CSS 移动端开发公共样式
html,body,ul,li,img,a,p { padding:0; margin:0; /*设置盒子模型*/ box-sizing: border-box; /*去除移动端特有的点击高亮效果,比如创建一个div元素,手放上去之后会有hover效果*/ -webkit-tap-highlight-color: transparent;}body{ font-size: 13px;}a,a:hover { /*去掉a链接的默认样式*/ color:#666; text-de原创 2020-11-19 16:42:11 · 310 阅读 · 0 评论 -
BFC 的 场景及其应用+举例说明通过overflow:hiddle触发BFC的好处
BFC:Block Formatting Contexts (格式化上下文) 一块独立的渲染区域,就是规定这个区域内的元素无论如何怎么浮动都不会影响外面的元素,这就是BFC。具有产生BFC条件:display属性为:block,list-item和table。父元素实现方式: 这些方式都是给容器父盒子添加的① 设置属性 display: inline-block,table-cell,flex 或 flow-root② float: 设置除none以外的值③ 是指绝对定位:postion为abs原创 2020-11-18 22:16:09 · 592 阅读 · 2 评论 -
flex 伸缩布局
Flex是Flexible Box的缩写,意为”弹性布局”,任何一个容器都可以指定为flex布局;为什么要有弹性布局???答:在将某三个盒子排布在一行不用flex,width设置为%值,盒子之间的用margin进行间隔时缩放浏览器会出现元素溢出的情况;如果这个时候设置display:flex;无论元素怎么margin都不会溢出都在父盒子里面等比例缩放;其中可以设置缩放的最小值 min-width,最大值max-width其主要包含六个属性:flex-directionflex-wrapflex原创 2020-11-18 21:10:13 · 278 阅读 · 0 评论 -
CSS 盒子水平排布的三种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子水平排布的三种方式</title> <style> .contain { width: 900px; height: 600px; margin: 100px auto; } .block { width: 100%; height:原创 2020-11-18 19:54:04 · 6359 阅读 · 0 评论 -
CSS3 2D 3D动画实例展示 transform
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 500px; height: 400px; margin: 200px auto; background: url('timg.jpg'); position: r原创 2020-11-17 23:24:57 · 164 阅读 · 0 评论 -
CSS3 transition 渐变特效
transition的使用需要和 hover 搭配使用transition:属性 持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s)transition:all 持续时间(s) // 简易写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> d原创 2020-11-17 21:52:05 · 827 阅读 · 0 评论 -
BOX盒子边框 把padding和border 都算到width里面去
box-sizing:border-box;原创 2020-11-16 21:13:35 · 410 阅读 · 0 评论 -
CSS 常见的隐藏 和 overflow属性的介绍 文字截取省略号
CSS常见的隐藏分为三种:display,visibility,overflowdisplsy:display: none; /*隐藏---隐藏后不占位置*/display:block; /*显示*/visibility:visibility: hiddle; /*隐藏---隐藏后仍占据位置*/visibility: visible; /*显示*/overflowoverflow: hiddle; /*隐藏掉多出来的*/overflow: auto; /*多出来的部分自动添加滚轮*/原创 2020-11-16 20:46:55 · 132 阅读 · 0 评论 -
CSS定位的分类,叠放次序(z-index),实现水平垂直居中
CSS 元素的定位主要由两部分组成:边偏移 和 定位,这两个必须搭配使用边偏移:left,top,bottom,right定位分为:static,absolute,relative,fixed静态定位(static):静态定位就是元素默认的定位;边偏移对他来说不起作用,一般用来清除定位的。绝对定位(absolute):绝对定位是完全脱离文档流的不占位置相对定位(relative):相对定位是相对于自己原来的位置(左上角)进行移动定位的,不脱离文档流固定定位(fixed):固定定位不占文档流,固原创 2020-11-16 20:26:59 · 663 阅读 · 0 评论 -
CSS 清除浮动的几种方式
CSS清楚浮动的几种方式:双伪元素 (推荐)伪元素(不推荐)给父级添加 overflow:hiddle (不推荐)给后面浮动的元素添加一个空的 div 并设置 clear:both (不推荐)如图:原创 2020-11-16 15:31:10 · 72 阅读 · 1 评论 -
CSS 边框合并
CSS 边框合并:table{ border-collapse:collapse /*相邻两个table>tr>td 边框的线的合并*/}原创 2020-11-16 14:30:35 · 310 阅读 · 0 评论 -
CSS 三大特性
CSS 三大特性:层叠性,继承性,优先级(权重叠加)层叠性:如果某个标签样式选择器一样,或者权重一样的时候,谁是最后执行的就是谁了。div{color:red}div{color:blue}<div>123</div> /*此时的颜色为blue*/继承性:继承性只能是字体的颜色,大小行间距等,其他边框大小等样式一律不能继承div { color:red } <div> <p>字体的颜色为red,继承了父级元素div的样式</p>原创 2020-11-15 21:00:50 · 65 阅读 · 0 评论 -
CSS 选择器 and 伪类/伪元素
CSS 选择器优先级:!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性伪类选择器,分为:链接伪类选择器,结构(位置)伪类选择器,目标伪类选择器链接伪类选择器: 一定要将顺序搞正! *** LVHA*** ===> LV 好!a:link{} /*点击超链接之前*/a:visited{} /*链接被点击之后*/a:hover{}a:active{} /*点击不松手的时候*/a:f原创 2020-11-14 23:29:00 · 591 阅读 · 0 评论