CSS
xcmercy
这个作者很懒,什么都没留下…
展开
-
设置当内容超出div(文字长度超出div宽度)出现滚动条
当内容超出div时,自动出现滚动条的条件内容必须在div中div要设置宽高overflow设置为auto备注overflow:auto;当内容宽度超出div宽度,或者内容高度超出div宽度,或者同时超出,会自动出现水平、或者垂直、或者水平和垂直滚动条。overflow-x:auto;当内容宽度超出div宽度,自动出现水平滚动条overflow-y:auto;当内容宽度...原创 2018-01-15 12:44:56 · 52635 阅读 · 0 评论 -
块元素水平垂直居中
通过定位的方式可使块元素在其父元素内垂直水平居中,前提条件是,父元素的position不是static。 备注:块元素脱离文档流后,可见区域宽度和高度由内容区内容、内边距、边框撑开<!DOCTYPE html><html> <head> <meta charset="utf-8" /&am原创 2018-07-21 14:18:02 · 157 阅读 · 0 评论 -
box-sizing
box-sizing作用:用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型属性值: content-box: 默认值。使用此属性值时,盒子模型的宽度和高度计算公式为 宽度 = 左边框宽度 + 左内边距 + 内容区宽度 + 右内边距 + 右边框宽度 高度 = 上边框宽度 + 上内边距 + 内容区高度 + 下内边距 + 下边框宽度border-box:设为此属性值时,盒子模型的...原创 2018-07-25 18:33:06 · 196 阅读 · 0 评论 -
解决png格式图片在IE6中无法透明
解决方案为了解决png格式图片在IE6中无法透明(其实是图片中的透明背景在IE6中会显示成灰色)问题,这里提供一种方案,该方案需要借助一个外部js文件来解决,该js文件下载地址:解决png格式图片在IE6无法透明的js文件 1. 在出现png图片无法透明的页面引入上述js文件 2. 在body标签的最后加入下面的代码,fix方法的参数是需要解决透明问题的png图片的选择器,可以是多个选择器...原创 2018-06-17 12:14:19 · 257 阅读 · 0 评论 -
CSS常用简写属性的属性值顺序
border边框样式常用属性是:边框宽度、样式、颜色,在简写属性中。属性一般按照上述顺序,多个属性值之间用空格隔开。例:border:1px solid #ff0000font字体样式常用属性的有:字体大小、行高、字体系列、字体粗细。在简写属性中,属性一般按照如下顺序:字体粗细、字体大小、字体系列,多个属性值之间用空格隔开,行高一般与字体大小连在一起,中间以/ 分隔。例:font: b...原创 2018-06-13 20:03:31 · 1925 阅读 · 0 评论 -
文本溢出显示省略号
直接给容器元素设置如下样式即可.table-info{ // 其他样式省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}效果原创 2018-05-24 19:24:55 · 844 阅读 · 0 评论 -
元素框的显示方式display
displaydisplay属性设置的是元素生成的框的类型,常用可选值有 1. none 元素不显示,即隐藏 2. inline 元素作为内联元素显示,默认值 3. block 元素作为块状元素显示 4. inline-block 元素作为行内块元素显示,既可以设置宽高,又不会独占一行display:none; 与 visibility:hidden;display:none;...原创 2018-04-07 11:54:15 · 587 阅读 · 1 评论 -
CSS盒模型
盒模型包含的部分内容区内边距边框外边距盒子的可见区域盒子可见框的宽度 = 左边框宽度 + 左内边距 + 内容区宽度 + 右内边距 + 右边框宽度盒子可见框的高度 = 上边框高度 + 上内边距 + 内容区高度 + 下内边距 + 下边框宽度盒子的背景颜色一旦我们设置了背景颜色,这个背景颜色会应用到内容区、内边距、边框。可以通过设置边框的类型为dotted或doubl...原创 2018-04-07 11:49:21 · 196 阅读 · 0 评论 -
解决float导致父元素高度塌陷(也可解决父子元素相邻垂直外边距重叠)
解决高度塌陷原理核心思想就是利用CSS的clear样式对浮动元素的兄弟元素清除浮动,消除浮动对其造成的影响。 具体做法: 0. 利用:after伪类选中高度塌陷元素的内容后面 1. 使用content:"";在高度塌陷元素的内容后面插入空白内容 2. 使用display: block;让其变成块元素。(这里最终版解决方法使用的是display: table;,原因见后续) 3...原创 2018-04-12 21:13:11 · 511 阅读 · 0 评论 -
CSS之堆叠顺序z-index
z-index只对开启了定位(position属性值不为static)的元素有效z-index值越大,元素的位置越靠近用户显示,反之越远离用户,容易被它上面的元素(z轴方向)遮住如果父、子元素都开启了定位,父元素的z-index不管有多大,子元素永远在它上面不会被遮住...原创 2018-04-17 20:59:13 · 319 阅读 · 0 评论 -
CSS之浮动float
浮动的特点浮动的元素会脱离文档流浮动元素会尽量的往左上float:left;或右上float:right“漂”,直到遇到父元素内容区边界(可能是父元素的padding,也可能是border)或者另一个浮动的元素若浮动元素的上边是一个没有浮动的块元素,则该浮动元素可以“漂”到的区域只能在上边那个没有浮动块元素的下边浮动的元素不会“漂”到他结构上是兄弟的、浮动的元素的上边浮动的元素不会盖...原创 2018-04-10 21:45:42 · 241 阅读 · 0 评论 -
CSS之position定位
static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。不设置position属性时,默认也是这种情况。relative(相对定位)相对定位的元素是相对于其在文档流中原来的位置进行定位相对定位的元素不会脱离文档流,它原本所占的空间仍保留。相对定位会比static定位的元素高一个层级(可以理解相对定位的z-inde...原创 2018-03-25 15:30:05 · 195 阅读 · 0 评论 -
Less变量、混合
Less特性注释// 注释内容 此注释不会编译输出到CSS文件中 /* 注释内容 */ 此注释会编译输出到CSS文件中变量Less中使用@变量名定义变量。需要注意的是,作为属性及选择器的时候,变量名需要放在{}中。 1.作为属性@bg: background-color;.box{ width: 600px; height: 400px; ...原创 2018-09-05 19:35:04 · 4201 阅读 · 0 评论