CSS 小结笔记之文字溢出处理

有时文字会溢出盒子,这时一般要对文字进行溢出处理.一般有以下三种处理方法: 1.word-break:normal | break-all |keep-all normal 使用浏览器默认的换行 break-all 允许单词内换行即允许单词拆开显示 keep-all 不允许拆开单词显示,连字符除外这种方法只允许英文是使用,对中文无效. <!DOCTYPE html> <html lang="en"> <head> <meta charset…

CSS 小结笔记之浮动

在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia…

CSS 小结笔记之解决flex布局边框对不齐

在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi…

css+div如何解决文字溢出

看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大,这个一般容易解决,但是我今天就遇到了这样的问题:在 IE6下测试页面没反应,在IE8下测试页面却正常处理了溢出文字,我就郁闷了,这个溢出处理不是IE特有的吗?怎么IE6却不正常呢.后来网上查了才知道,原来IE6只支持div内写上溢出处理才有用,而IE…

CSS 小结笔记之图标字体（IconFont）

本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前网页上使用图标主要采用精灵图(背景位置+背景缩放)来实现,但是这样使用起来有许多不便之处,一方面缩放处理起来比较麻烦,一方面如果要改动一些图标就需要去找到设计人员重新设计,然后重新添加,这个过程非常不友好. 图标字体可以非常便捷的去解决以上问题,使用起来也非常简单.因为他是字体,所以可以当成字体来引…

CSS 小结笔记之em

1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=…

CSS 小结笔记之伸缩布局 (flex)

CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极大地灵活性,所谓弹性布局即可根据大小判定自动伸缩. flex相关的各个属性如下: 1.display:flex:在父盒子定义flex,子盒子才能使用flex属性 2.flex:none |flex-grow flex-shrink flex-basis 设置子盒子的缩放比例,可以一起指定也可以单…

CSS 小结笔记之清除浮动

浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-…

css如何简单设置文字溢出盒子显示省略号

1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow:hidden;(3)文字用省略号代替超出的部分text-overflow:ellipsis; 例如: 效果如下: 2.多行文本溢出显示省略号多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit浏览器或者移动端(移动端大多是webkit内核)语法:overflow:hidden;text-o…

CSS 小结笔记之BFC

BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC 不是所有的元素都能产生BFC的,只有display 属性为 block, list-item, table 的元素,才可以产生BFC. 这点其实根据BFC的主要作用应该可以很形象的理解.“必须表现为一块一块的,才能给出一个隔离的空间“. 2.触发BFC的具体条件光有BFC的潜质,不代表就直接会触…

CSS 小结笔记之滑动门技术

所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与span标签组成 <a href="#"> <span></span> </a> 2.a标签只指定高度,而不指定宽度. 3.a标签设置好背景图后,指定一个padding-left值,大小与左侧半圆大小相同,(这样保证左边背景不变,中间的背景进…

CSS 小结笔记之定位

CSS 小结笔记之选择器

Css选择器主要分为以下几类类选择器 ID选择器通配符选择器标签选择器伪类选择器复合选择器 1.类选择器:通过.classname 来选择例如 .color2 { color: rebeccapurple; } 同一个标签可以通过多个类名来指定多个样式,但是若其中有重叠部分,则按权重值重叠,若在同一权重级别中,如都是内部样式表中的,则按照上下关系,下面的覆盖上面的. 例如: .classtest1 { font-size: 25px; color: blue; } .classtes…

CSS 小结笔记之三种样式表

CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式内联样式 <div style="color:red;font-size:20px">内联样式表</div > 内联样式直接把样式卸载html代码行内,一般仅仅在此样式仅仅只在当前元素上应用时使用,其他情况下尽量不要使用. 内部样式表 <style> div { color: blue; font-size: 20px } </style>…

CSS 小结笔记之变形、过渡与动画

1.过渡 transition 过渡属性用法: transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定 transition-property: 是要过渡的属性(如width,height),all是所有都改变. transition-duration:花费的时间,单位为s或ms transition-timing-func…

CSS 小结笔记之元素的隐藏与显示

在网站上经常会有一些需要一定操作才会显示或隐藏的元素,这时会用到元素的隐藏与显示.主要通过以下三种属性实现. 1.display :none|block |inline |inline-block display常用以上四个属性值,none 是元素隐藏,且不占有位置.block 除了转换为块级元素之外,同时还有显示元素的意思.inline 和inline-block 分别是显示为行内元素和行内块元素. <!DOCTYPE html> <html lang="en"&…

CSS 小结笔记之盒子模型

网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签,在右侧的styles拉倒最后可以看到这个标签的盒子模型.具体如下图所示: 1.边框 border : border-width || border-style || border-color border-style 代表边框的样式,常用的样式有以下几种 none:无边框 hidden:与none…

CSS 小结笔记之背景

背景相关属性主要有: background-color 背景颜色 background-image 背景图片 background-repeat 是否平铺 repeat (默认平铺) | repeat-x(水平平铺) | repeat-y (垂直平铺)| no-repeat (不平铺) background-position 背景位置 length(百分数)|position(top center button left right) 一般两个一起用,如果至指定一个方向另一个方向默认为cen…

CSS 文本和表格中文字溢出显示省略号

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;…

CSS 文字溢出时的自动隐藏

http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪切内容也不添加滚动条.假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小.并且clip属性设置将失效. auto:此为body对象和textrea的默认值.在需要时剪切内容并添加滚动条 hidden:不显示超过对象尺寸的内容.scroll:总是显示滚动条. 实例代码如下…

CSS学习笔记：溢出文本省略（text-overflow）

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应…