CSS学习笔记10——元素的显示与隐藏&&布局技巧之margin，三角形

元素的显示与隐藏

类似广告

1. display 显示隐藏
2. visibility显示隐藏
3. overflow溢出显示隐藏

---

display属性

• display:none; 隐藏对象
• display:block; 除了转换为块级元素外，还有显示元素的意思

display隐藏元素后，不再占有原来位置

visibility 可见性

• visibility:visible; 元素可视
• visibility:hidden; 元素隐藏

visibility隐藏元素后，继续占有原来位置

overflow 溢出

• overflow:visible; 默认，超出盒子部分显示
• overflow:hidden; 溢出部分隐藏
• overflow:scroll; 总是显示滚动条
• overflow:auto; 超出部分需要时再显示滚动条

有定位的盒子慎用overflow:hidden 会隐藏多余部分

---

---

CSS常见布局技巧

margin负值的应用

ul li {
	float:left;
    list-style:none;
    width:150px;
    height：200px;
    border:1px solid red;
    margin-left:-1px;
}

相当于把两个相连li之间的边框合并

鼠标移动到对应盒子上盒子显示变颜色的边框

1. 每个盒子margin：-1px; 正好压住相邻盒子边框
2. 盒子被压住直接改变边框颜色会显示不全

解决方法：提高当前盒子层级（如果无定位，则加相对定位（保留位置）；如果有定位，则加z-index）

---

文字围绕浮动元素

浮动元素不会压住文字的特性

• 给图片添加浮动，则文字会围绕图片布局

---

行内块的应用

行内块元素可在一行里并列，并且可以设置宽度和高度，并且一行的元素之间有缝隙

---

CSS三角强化

e.g.下直角三角形：

.box {
    width: 0;
    height: 0;
    border-top: 100px solid transparent; //transparent是透明色
    border-right:50px solid skyblue;
}

通用代码：

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;