资讯专栏INFORMATION COLUMN

css总结

bbbbbb / 427人阅读

摘要:平时比较常用的样式和技巧商品价格文本中的一条线,例文本超出溢出显示省略号,例单行本文不定行文本注意兼容性元素在块级元素中垂直居中个人比较长用的是,以后要改过来才行,例固宽利用定位都为来设置不固宽利用表格中元素垂

平时比较常用的css样式和技巧 1. 商品价格文本中的一条线,例:
div {
  text-decoration: line-through;
}
2. 文本超出溢出显示省略号,例:

单行本文

div {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

不定行文本 --- 注意兼容性

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
3. div元素在块级元素中垂直居中,个人比较长用的是5/6,以后要改过来才行,例:

固宽1:利用定位top/bottom,left/right都为0来设置

不固宽2:利用表格中元素垂直居中

不固宽3:利用flex布局 --- 注意兼容性

不固宽4:利用box布局 --- 注意兼容性

固宽5:利用定位top:50%,margin-top: -width/2设置

不固宽6:利用transform --- 注意兼容性

sdfsdfsdf
4. input placeholder样式修改:
input::-webkit-input-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:-moz-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:-ms-input-placeholder {
  -webkit-text-fill-color: #999;
  color: #999;
}

input:disabled {
  -webkit-text-fill-color: rgba(0, 0, 0, 1);
  -webkit-opacity: 1;
  color: inherit;
  opacity: inherit;
}
5. box布局:

父元素设置: display: box;

box-orient: horizontal/vertical

子代按水平排列或竖直排列,注:所有主流浏览器不支持该属性,必须加上前缀;

horizontal:水平排列,子代总width = 父级width,若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度;

vertical:垂直排列,子代总height = 父级height,若父级固定高度,则子代设置的height无效,子代会撑满父级宽度;

box-direction: normal/reverse

确认子代的排列顺序;

normal 默认值,子代按html顺序排列;

reverse 反序;

box-align: start/end/center/stretch

子代的垂直对齐方式;

start 垂直顶部对齐;

end 垂直底部对齐;

center 垂直居中对齐;

stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效;

box-pack: start/end/center

子代的水平对齐方式;

start 水平左对齐;

end 水平右对齐;

center 水平居中对齐;

子元素设置:

box-flex: number;

占父级元素宽度的number份;

若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数);

若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51555.html

相关文章

  • css面试总结

    摘要:两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。两个外边距一正一负时,折叠结果是两者的相加的和。 CSS知识点整理浏览器兼容性问题解决方案 · 总结 行内样式、内嵌式、链接式以及导入式 在引用 CSS 上,分为四种形式:行内样式、内嵌式、链接式以及导入式,下面介绍这四种模式。 1.行内样式 直接对 HTML 的标记使用 style 属性,然后将 CSS 代码直接写进去: 2....

    SKYZACK 评论0 收藏0
  • 《DOM编程艺术》中CSS—DOM的总结(三)

    摘要:前言这是系列最后一篇,本文主要总结了的用法,以及最后对函数进行抽象。一个多说无益,还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言:这是CSS-DOM系列最后一篇,本文主要总结了className的用法,以及最后对函数进行抽象。 ------------------我是分割线----------------...

    王岩威 评论0 收藏0
  • 《DOM编程艺术》中CSS—DOM的总结(三)

    摘要:前言这是系列最后一篇,本文主要总结了的用法,以及最后对函数进行抽象。一个多说无益,还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言:这是CSS-DOM系列最后一篇,本文主要总结了className的用法,以及最后对函数进行抽象。 ------------------我是分割线----------------...

    liukai90 评论0 收藏0
  • 前端-CSS3&H5

    摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...

    xiaolinbang 评论0 收藏0
  • CSS居中方法总结

    摘要:此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的,其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时,主轴的方向会改变。垂直居中实现方案用的属性,以及定位,与上面的水平居中类似,只是改为即可。 水平居中实现方案 确定宽度的元素水平居中 1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。HTML: ...

    ralap 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<