文本布局
单行文本垂直居中
使用 line-height = height
{
height: 50px;
line-height: 50px;
}
补充：芳芳说：固定像素的width和height是给不会css的人准备的
{
line-height:50px;
padding-top:4px;
padding-bottom:4px;
}
使用定位来垂直居中demo
如果元素width、height设定，使用具体值；
使用负magin
如果元素width、height未设定，使用transform
transform+postion
Paste_Image.png
多行文本垂直居中
使用dispay:table-cell
使用display:flex
省略文字
- 单行省略
Paste_Image.png
.ellipsis {
width: 100px;// 兼容部分浏览器
overflow: hidden;
white-space: nowrap;//文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
text-overflow: ellipsis;//规定当文本溢出包含元素时发生的事情
}
-
多行文本省略
Paste_Image.png
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
该方法方法合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器
参考
背景样式
默认情况下，背景区域覆盖的范围是元素内容 + 内边距 + 边框。(不包括margin)
验证...
可以看出背景颜色并没有挨着外盒边，而是留出margin为5px的边距。所以默认的背景区的覆盖覆盖范围不包括margin。
此处margin-top为啥没作用？
- background-image 用于给元素设置一张或多张背景图
- background-image: url(../images/bg.png);
- background-image: linear-gradient(#ddd, #fff); /* 渐变背景 */
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR......GRiIvPjwvZz48L3N2Zz4=);
关于第三种可用此工具转成base64
各个参数说明：
-
background-position
CSS Sprites（CSS 精灵 | 雪碧图）（已用过，不必赘述）
CSS Sprites 是指将多张图片（一般是小图标）合成一张大图，不同元素共用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效果的同时，减少 HTTP 请求数的一种前端优化手法。 -
background-size 用于设定背景图片的大小。IE9 以下不支持
作为背景图，是作为容器的一个属性存在的，并不是作为容器的内容，宽高padding这类以外的属性，其他的一般并不能撑开容器。所以要设置该容器的width、height 。如果为了能让图片占据整个容器，也需要设置图片的width、height ;但是最简单的方法是设置contain值。 -
cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
-
contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
-
100% 等数值
//某乎上的logo正确示范
.logo {
margin: 0 auto;
width: 160px;
height: 74px;
background: url(/logo.png) no-repeat;
background-size: contain;
- **background-clip ** 属性用于设置元素背景区域覆盖的范围。
- border-box
覆盖至边框的最外围 - padding-box
覆盖至内边距的最外围 - content-box
仅覆盖元素内容区域
目前还未用到，待补充...
边框样式
-
过时的css三角形 ( 现在都用css三角形生成器 )
step1:宽高为0
step2:borde-bottom去掉
step3:左右两边变透明
- border-radius 属性用于给元素添加圆角。(但是低版本的IE不支持)
网友评论