BFC/添加省略号/圆角

你离开我真会死。 提交于 2020-03-09 08:11:15

1. 触发BFC的样式

浮动元素:float 除 none 以外的值

绝对定位元素:position (absolute、fixed) 

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

2. BFC解决的问题

解决子元素带动父层级的问题

解决margin叠加问题

解决margin传递问题

解决浮动问题

解决覆盖问题

3. 添加省略号

width
    必须有一个固定的宽

white-space : nowrap
    不让内容折行
 
overflow : hidden
    隐藏溢出的内容

text-overflow : ellipsis
    添加省略号

多行(了解):
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

4. 圆角

当宽高不一样的情况下?
    border-radius : 100px | 50% 这是有区别的

    border-radius: 20px;  四个角
    border-radius: 20px 40px;  左上和右下   右上和左下
    border-radius: 20px 30px 40px 50px;  左上  右上  右下  左下 (顺时针)

在这里插入图片描述
在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!