![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 56
程序媛-静儿
学无止境
展开
-
如何设置表格高度铺满整屏幕
我们在开发过程中,通常要设置页面表格高度铺满整个屏幕,效果如下下面介绍两种方法:一、写表格样式(要注意的是:所有父级元素都要设置高度)二、根据屏幕高度动态计算(要注意的是:要监听屏幕的变化并重新计算高度)...原创 2022-04-07 10:06:29 · 1709 阅读 · 1 评论 -
flex布局详解以及案例展示
flex用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局更加符合响应式设计的特点。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}<!-- 行内元素也可以使用 Flex 布局。-->.box{ display: inline-flex;}<!-- Webkit 内核的浏览器,必须加上-webkit前缀。-->.box{ display: -webkit-flex; /* Safari */ d原创 2020-10-23 17:30:17 · 489 阅读 · 0 评论 -
css中的媒体查询的三种用法
MediaQuery 媒体查询概念:为不同尺寸的屏幕设定不同的css样式,移动端使用频率高@#media常用参数属性名称作用width、height浏览器可视宽度、高度device-width设备屏幕的宽度device-height设备屏幕的高度<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>写.原创 2020-10-23 16:23:11 · 858 阅读 · 0 评论 -
css字体溢出省略号处理(3种)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:span{ overflow: hiddden; text-overflow: ellipsis; white-space: nowrap;}效果如图:但是这个属性只支持单...原创 2018-10-06 11:22:54 · 18127 阅读 · 6 评论 -
CSS实现导航下划线hover动画transform汇总
对于一个 hover transition 动画,它应该是从:正常状态 -> hover状态 -> 正常状态 (三个步骤,两种状态)所以,必须要有一种方法,能够使得 hover 动画的进入与离开产生两种不一样的效果,实现:状态1 -> hover状态 -> 状态2 (三个步骤,三种状态)html:<div>Hover Me</div>c...原创 2019-04-28 20:52:04 · 1768 阅读 · 0 评论 -
css实现双飞翼布局,三列布局,中间宽度自适应,两边定宽--五种方案对比延伸
标题css实现双飞翼布局,三列布局,中间宽度自适应,两边定宽;假设高度固定300px;html <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"...原创 2019-05-08 21:36:53 · 683 阅读 · 0 评论 -
盒子模型详细介绍---面试全面回答
1.基本概念:标准模型+IE模型 区别?在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。区别:设置元素宽度高度后,IE模型的宽...原创 2019-05-08 22:36:19 · 1012 阅读 · 0 评论 -
css改写滚动条样式
/*滚动条样式*/ body,html{ ::-webkit-scrollbar { width: 6px; /*height: 6px;*/ } ::-webkit-scrollbar-thumb { border-radius: 10px; ...原创 2019-07-02 13:43:53 · 455 阅读 · 0 评论