css布局技巧
CSS用户界面样式
鼠标样式currsor
li{
cursor:pointer;
}
设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状
属性值 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
轮廓线 outline
- 给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的边框
防止拖拽文本resize
textarea{
resize:none;
}
vertical-align属性应用
CSS的vertical-align经常设置图片或者表单(行内块元素)和文字垂直对齐
vertical-align:baseline|top|middle|bottom
值 描述 baseline 默认,元素放在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部 bottom 把元素的顶端与行中最低的元素顶端对齐 解决图片底部默认空白缝隙问题
- bug:图片底部会有一个空白缝隙,原因时行内块元素回和文字的基线对齐
- 主要解决方法
- 给图片添加vertical-align:middle| top|bottom等
- 把图片转换为块级元素;display:block;
溢出文字省略号代替
单行文本溢出用省略号显示
- 先强制一行内文本显示 white-space:nowrap;
- 超出部分隐藏 overflow:hidden;
- 文字用省略号代替超出的部分 text-overflow:ellipsis;
多行文本溢出用省略号显示
多行文本显示省略,有较大的兼容先问题,适用于webKit浏览器或者移动端
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/* 限制在一个块元素显示文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;
常用布局技巧
margin负值的运用
- 让每一个盒子margin往左移动-1px正好压住相邻的盒子
- 鼠标经过某个盒子时提高当前盒子的层级(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
,文字围绕浮动元素
css三角强化
div{
width:0;
height:0;
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 0 0;
}
CSS初始化
- CSS初始化是指重设浏览器的样式
css布局技巧的更多相关文章
- div+css 布局技巧总计
一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...
- CSS布局技巧之——各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- HTML+CSS布局技巧及兼容问题【阅读季】
在IE6和IE7中,行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线. IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了 边框 ...
- Html和CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
- 史上最全Html与CSS布局技巧
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...
- Html与CSS布局技巧
一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...
- Html利用CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
- 史上最全Html和CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元 ...
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
随机推荐
- 并发容器之ConcurrentLinkedQueue
本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...
- Spring MVC的注解二
概述 Spring从2.5版本开始引入注解,虽然版本不断变化,但是注解的特性一直被延续下来并不断进行扩展,这里就来记录一下Spring MVC中常用的注解,本文承接前文继续记录@PathVariabl ...
- localStorage本地存储技术
localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...
- Python遍历字典
1.遍历key值 1 >>> d = {'Python':'astonishing', 'C++':'complicated', 'Java':'versatile'} 2 > ...
- 2019 DevOps 必备面试题——持续集成篇
原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...
- 反卷积(Transposed Convolution)
反卷积的具体计算步骤 令图像为 卷积核为 case 1 如果要使输出的尺寸是 5x5,步数 stride=2 ,tensorflow 中的命令为: transpose_conv = tf.nn.con ...
- Python函数名做参数,闭包,装饰器
简单讲解闭包的写法和应用,在这之前,先声明,你定义的任意一个函数都可以作为其他函数的参数.就像下面这段代码的参数func,接收的参数就是一个函数名,在函数体内部使用了func()调用执行函数. 请看下 ...
- ref的使用
参考地址https://www.cnblogs.com/goloving/p/9404099.html <img src="./01.jpg" ref="img&q ...
- 【西北师大-2108Java】第八次作业成绩汇总
[西北师大-2108Java]第八次作业成绩汇总 作业题目 面向对象程序设计(JAVA)--第10周学习指导及要求 实验目的与要求 (1)掌握java异常处理技术: (2)了解断言的用法: (3)了解 ...
- WINDOWS代理服务器搭建 - Apache httpd
1.检查电脑系统类型 检查电脑版本是为 32位操作系统 还是 64位操作系统 2.下载安装Apache Httpd 下载地址:https://www.apachehaus.com/cgi-bin/do ...