css常用清浮动写法

/*清除浮动*/|
.clears:after{
display: block;
content: '';
clear: both;
height: ;
visibility: hidden;
overflow: hidden;
}
.fl{
float: left;
}
.fr{
float: right;
}

css实现超出内容部分溢出出现省略号,css写法

/*超出内容部分隐藏*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 css动态计算元素宽度 

/*动态计算宽度*/
width:calc( 100% - 65%);
/*除了某元素外,其他元素的样式*/
.creat-part span:not(.line-color):hover{
color: #3aa1ff;
}

  

css清浮动与动态计算元素宽度的更多相关文章

  1. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  2. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  3. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  4. CSS清浮动办法

    骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决 ...

  5. CSS清浮动

    × 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...

  6. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  7. css3动态计算元素的高度及宽度

    1.px     像素,我们在网页布局中一般都是用px. 2.百分比     百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度 ...

  8. CSS清浮动方法总结

    浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...

  9. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

随机推荐

  1. vbox安装增强功能,实现宿主机文件夹共享并浏览器访问

    虚拟机版本:6.0.4 r128413 (Qt5.6.2) linux:centos7/6 点击菜单栏中的设备->安装增强功能,再reboot 获取内核版本号 uname -r 查看yum的内核 ...

  2. Battery Historian 使用常用命令

    一.重置电池数据收集数据 打开电池数据获取:adb shell dumpsys batterystats --enable full-wake-history 重置电池数据: adb shell du ...

  3. java poi 操作ppt

    java poi 操作ppt 可以参考: https://www.w3cschool.cn/apache_poi_ppt/apache_poi_ppt_installation.html http:/ ...

  4. JN_0001:在微信朋友圈分享时长大于10s的视频

    1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...

  5. 第二节:深入剖析Thread的五大方法、数据槽、内存栅栏。

    一. Thread及其五大方法 Thread是.Net最早的多线程处理方式,它出现在.Net1.0时代,虽然现在已逐渐被微软所抛弃,微软强烈推荐使用Task(后面章节介绍),但从多线程完整性的角度上来 ...

  6. 【转】Reflector、reflexil、De4Dot、IL相关操作指令合集

    PS:CTRL+F 输入你需要的内容,可以快速查找页面上的内容. 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. ...

  7. 子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度

    方法一:对父级设置固定高度 假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法 ...

  8. hibernate之Configuration对象

    任务:读取主配置信息 1.  Configuration config = new Configuration();      使用hibernate,但并没有读取 2.  config.config ...

  9. sort与uniq命令详解

    1.sort的作用 (排序) sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出. 如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行 ...

  10. 记事本 HTML

    又学了一遍HTML,感觉轻松了好多,个人感觉HTML和画画差不多,只要有了想法,画出来其实并不难. 头部信息<head> 头部信息并不是给我们看的,而是给浏览器看的,当浏览器看到之后,才好 ...