css-HTML日常小记

1允许长单词换行到下一行：

p.test {word-wrap:break-word;}

2CSS中opacity=0,visibility=hidden,display=none的时候，三者有什么区别呢？？

小结如下：
1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
4 letter-spacing: *px; //设置文字，字母间距，很实用也可以是负数
5 <video src="test.mp4" webkit-playsinline="true"></video> 手机video 都可以在页面中播放，而不是全屏播放了
6  css实现不换行、自动换行、强制换行

//不换行white-space:nowrap;

//自动换行word-wrap: break-word; word-break: normal; 

//强制换行word-break:break-all;
7  calc() function, 计算属性值   width: calc(100% - 100px);
8
img {

    filter: grayscale(100%); //灰度
    filter: blur(5px); //模糊
    filter:brightness(200%); //高亮
    filter:saturate(8); //饱和
    filter:sepia(100%); //怀旧
    ...
}
9  clip属性，截取你想要显示的图片
img {

    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
10  使用css创建三角形

div {
    border-bottom: 10px solid blue;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    height: 0px; 
    width: 0px; 
}
11  position: absolute， 让Margin有效

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
12 文本溢出显示省略号
width:*px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;（缺一不可）
13 formaction属性只能作用于具有提交性质的按钮（type='submit'/'image'）上，作用和名称一样，如果通过当前按钮提交表单，在表单提交地址会使用formaction属性值而不是form元素的action属性值
14 formtarget属性只能作用于具有提交性质的按钮（type='submit'/'image'）上，可以覆盖目标<form>元素的target属性值（默认为_self）
15 formmethod属性只能作用于具有提交性质的按钮（type='submit'/'image'）上，可以覆盖目标<form>元素的method属性值（默认为get）
16 <a href="large.jpg" download>下载</a>  我们希望点击“下载”链接下载图片而不是浏览，直接增加一个download属性就可以：