HTML + CSS 扩展

1 min-width

给div设置 min-width: 1200px, (最小宽度1200像素,同主宽度)
可以解决在网页缩放时背景或者图片两边留白的问题.特别是上面导航和下面介绍.

2 做三角形

// html


// css
div{
     width: 0;
     height: 0;
     /*设置四周边框颜色透明 rgba(0,0,0,0) */ transparent 也是透明
     border: 20px solid rgba(0,0,0,0);
      /*改变上部边框颜色为red*/
     border-top: 20px solid red;
     }

3 clip-path 裁剪

  /* 多边形 */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* 圆 */
  clip-path: circle(30px at 35px 35px); // at 后面是圆心的值 x y

  /* 椭圆 */
  clip-path: ellipse(65px 30px at 125px 40px); // at 后面是椭圆圆心的值 x y

// css
    

// html

4 垂直对齐图像的方法

1. align="center"

// html
![](images/logo.gif)我是a标签

2. vertical-align 属性

// ccs


// html

![](images/logo.gif)我是a标签

image.png

5 文本换行

两种方式 : 
1. word-wrap : break-word; // 写在文本父级
2. word-break : break-all; // 写在文本父级

6 超出文本省略号

// html
 
      
....long.....


// ccs