直到刚刚我才发现我小瞧了background定位 因为项目里需要显示隐藏的按钮上有两个图标 开始想了几种方法都不行,然后突然就想到了background定位 果断试了一下 <input type="button" class="layui-display-1" value="显示"> /* 显示隐藏 */ .layui-display-1{ background: url(../images/xianshi.png) #49afcd…

1.background定位的局限 只能相对于左上角数值定位,不能相对于右下 即background-position默认相对于左上方定位的 2.怎样让图片相对于右下角? background-position:100% 40px; 图片默认定位是不把border计算在内的 总结:border以及background配合使用,可以定位背景图片至右侧.(backgroud-positon默认相对左上角)…

I back-ground 一.颜色的表示: 1.单词 2.rgb表示法 rgb:红色 绿色 蓝色 三原色 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的. 用逗号隔开,r.g.b的值,每个值的取值范围0~255,一共256个值. (1).255 说明是纯色. (2)黑色: background-color: rgb(0,0,0); 光学显示器,每个元件都不发光,黑色的 (3)白色: background-color: rgb(255,255,255); (4)颜色…

昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块标签, 并且设置clear:both 3. 伪元素清除法 给父元素设置 .clearfix:after{ content:'.', display:block; clear:both; height:0; visibiable:hidden; } 4.给父元素overflow:hidden 块元素与…

03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 margin的用法 九 文本属性和字体属性 十 超链接导航栏案例 十一 background(背景) 十二 定位 十三 z-index 一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

1.border-width:不支持百分比值 支持下面属性值: thin:1px medium:3px thick:5px 2.border-style类型 solid:实线 dashed:虚线(方形) 兼容性问题 dotted:点线(圆点) double:双线(双线宽度一定相同,中间区域+-1 inset:内凹(淘汰) 3.border-color和color(border-color的默认颜色是color) 案例:hover与图形变色 .add{ color:#ccc; transition…

标题取自<css禅意花园>一书,还记得当年读此书时的情景,真的是内容和书名一样的优秀,就以此标题作为自己在该文的一种追求吧,尽管我的水平和见解都和Dave Shea相去甚远.该文算是对前两年写页面工作的总结吧,现在比较少关注css了,可能观点有狭隘的地方,同时文中也有一定的思考和理解,也许并不一定特别适合初学者阅读,本人时间有限,也没办法针对具体的知识点做深入的讲解或提供代码示例,所以在阅读过程中如果有不理解的地方,欢迎提问并互相学习交流. 当UI设计师给了你一张psd图,在对它进行切图,实现…

<!--  <CSS世界>张鑫旭著 --> 功勋卓越的 border 属性 border-width 不支持百分比值 border-style 类型 border-style 默认值是none:多出现在重置边框样式的时候,渲染性能最高的写法是: div { border: 1px solid; border-bottom: 0 none; } border-style: dashed 虚线边框.虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的.例如,在 Chr…

1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-width:还支持关键字(thin=1px  medium=3px  thick=5px) 但是border中最常用的却是thin 为什么他的默认属性为3px? border-style:double的默认属性为三像素. 3.border-style:double 1)border-style: solid…

控制文本显示字数,超过规定的文本长度  x显示... white-space:nowrap;        //规定不能换行 overflow:hidden; text-overflow:ellipsis;       //超出长度,“...”显示 width:320px; 设置  div内div居中显示(此方法中的display:flex 为较高版本的所以ie9 不兼容) 父层div加上css属性 display:flex; justify-content:center; align-item…