Css
fongdaBoy
励志做一个全栈攻城狮
展开
-
css实现单行和多行文本溢出显示省略号点点点...
一、单行文本溢出显示省略号点点点...overflow: hidden;text-overflow:ellipsis;white-space: nowrap;二、多行文本溢出显示省略号点点点...display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overf原创 2017-09-29 14:33:41 · 14839 阅读 · 0 评论 -
css(1) css清除浮动float的常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义:浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, clear:left | right | both | none ...转载 2018-06-14 17:27:33 · 182 阅读 · 0 评论 -
html5用css3实现线性渐变background-image:linear-gradient使用方法
代码使用:background-image:linear-gradientstyle> div { width: 400px; height: 150px; border: 1px solid #666; line-height: 150px;原创 2017-10-17 10:08:31 · 4046 阅读 · 0 评论 -
使用css中的white-space:pre-wrap;让html浏览器显示空白空格符
案例:p style="white-space:nowrap"> aa bb ccccp>p style="white-space:pre-wrap"> aa bb ccccp>效果如图:white-space的值:normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方原创 2017-10-16 19:30:26 · 17791 阅读 · 0 评论 -
html、css清除浮动float的三种方法
CSS3中三种清除浮动(float)的方法方法一:添加新的元素 、应用 clear:both.clear{ clear:both; height: 0; width: 0; overflow:hidden;} 方法二:父级div定义 overflow: auto.over-flow{ overflow: auto;转载 2017-10-16 15:44:08 · 2193 阅读 · 0 评论 -
css3选择器
1、属性选择器/* [属性名称=值]{ 设置样式 } */a[href='a.txt']{ color:yellow;}/* 拿到以什么开头的值*/a[href^='a']{ color:greenyellow;}/* 以什么结尾 */a[href$='3']{ color:pink;}/* 属性的值中带带有原创 2017-10-16 14:01:40 · 189 阅读 · 0 评论 -
html中的css和js控制input,textarea文本框自动获取焦点
方法:1:js控制自动获取焦点html>head> script type="text/javascript"> function setFocus() { document.getElementById('password1').focus() } function loseFocus()原创 2017-10-16 10:44:06 · 28068 阅读 · 1 评论 -
5、css中vh和vw的属性
vh和vw响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh和vw单位所提供的。vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.原创 2017-10-20 11:22:32 · 3609 阅读 · 0 评论 -
CSS、HTMl使用position: fixed;实现div的高度填满剩余空间
CSS、HTMl实现div的高度填满剩余空间html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> *{ margin: 0; padding:0; } .conten原创 2017-10-11 14:20:21 · 12024 阅读 · 1 评论 -
javaScript中getBoundingClientRect获取div盒子到页面浏览器顶部的距离
getBoundingClientRect的用法getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法:这个方法没有参数。rectObject = object.getBoundingClientRect();2.返回值类型:TextRectangle对象,每个矩形具有转载 2017-10-11 11:37:15 · 5000 阅读 · 0 评论 -
2、移动端input弹出带有搜索按钮的键盘与获取点击搜索按钮触发的事件
首先说说如何在用户点击input时弹出带有搜索按钮的键盘,其实很简单,加上 type="search"即可。示例:[html] view plain copyinput id="keyword" placeholder="输入关键字搜索" type="search" /> 效果图:转载 2017-10-19 11:00:32 · 1989 阅读 · 0 评论 -
css实现移动端1px边框怎么解决
Retina屏幕,设备像素比,移动端的边框在这些屏幕上1px 会表现处2px,3px像素的宽度,所以出现各种解决方案,今天只总结一种,以后慢慢补充。。通过伪类 ::after。,原理就是通过transfrom:scaleX scale scaleY这几个函数进行缩放,废话不多说,直接撸代码,分别是:底边,上边,左边,右边,还有四个边框都有,在文章末尾有相关知识的介绍链接,本文就不会浪费文字在转载 2017-10-01 10:33:33 · 2763 阅读 · 0 评论 -
css实现html页面输入框input的美化
css实现html页面输入框input的美化html>html>head> meta charset="UTF-8"> meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> meta name="viewport" content="width=device-width,initi原创 2017-09-30 16:34:47 · 17524 阅读 · 0 评论 -
display:flex;Flex布局常用的属性
display:flex;Flex布局常用的属性html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0原创 2017-09-30 16:12:09 · 1060 阅读 · 0 评论 -
div模拟textarea以css控制最大高度和最小高度实现高度自适应实例页面
html>html lang="en">head> meta charset="UTF-8"> title>div模拟textarea以实现高度自适应实例页面title>head>style> .textarea_div { width: 100px; min-height: 20px; _height: 20px;原创 2017-09-30 10:09:22 · 778 阅读 · 0 评论 -
css实现滚动条隐藏
css实现滚动条隐藏::-webkit-scrollbar { width: 0; /* 滚动条宽度为0 */ height: 0; /* 滚动条高度为0 */ display: none; /* 滚动条隐藏 */}原创 2017-09-30 09:31:05 · 2225 阅读 · 0 评论 -
css(2) html中css实现文字文本垂直居中
.welcome_month_li { width: 200px; height: 100px; display: table;}.welcome_month_noData { width: 100%; height: 100%; text-align: center; display: table-cell; background: re...原创 2019-02-26 18:37:05 · 333 阅读 · 0 评论