- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
1、处理溢出 overflow
overflow-x 水平溢出
overflow-y 垂直溢出overflow: auto 浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条。
overflow: hidden 如果有溢出的内容,直接剪掉。
overflow: scroll 不管是否溢出,都会出现滚动条。
overflow: visible 默认值,不管是否溢出,都显示内容。
2、元素可见性 visibility
visibility: visible 默认值,元素在页面上可见。
visibility: hidden 元素不可见,但会占据空间。
visibility: collapse 元素不可见,隐藏表格的行与列,如果不是表格,则和 hidden 一样。
3、元素盒类型
块级元素:就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。
行内元素:不能设置元素尺寸,只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。如:<span>、<b>、<a>等文本元素。
行内-块元素:可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>。
注:可以互换,行内元素添加 display:block; 就可以变成块级元素。
4、display
display: block 盒子为块级元素
display: inline 盒子为行内元素
display: inline-block 盒子为行内-块元素
display: none 盒子不可见,不占位
5、颜色和透明度
opacity 设置元素的透明度,值是 0到1的数,如:
opacity:0.8;
6、盒子阴影和轮廓 box-shadow
box-shadow: 5px 4px 10px 2px gray inset;
水平偏移量,垂直偏移,模糊值,阴影延伸半径,颜色,设成内阴影
前2个参数是必须的,后4个是可选的。
7、以在边框的外围再加一层 outline
outline: 10px double red; 在边框的外围再增加一圈轮廓。
8、光标样式 :
cursor:pointer; 手形;
cursor:move 十字;
cursor:help 问号
总结的比较到位,辛苦了。