Day3 3-CSS其余操作
Day3 3-CSS其余操作
1.清除默认样式
两种方式，推荐方法一
/* 方法一：京东的通配符选择器*/
* {
margin: 0;
padding: 0;
}
/* 方法二：淘宝的并集选择器，其中包括一些已经淘汰的标签选择器 */
(一堆的并集选择器) {
margin: 0;
padding: 0;
}
注意：由于未来还要具体设置盒子的padding（和border），所以（在通配符选择器里）清除完内外边距后，紧接着设置內减模式box-sizing: border-box;
（弹幕区：为了更好适配设计稿，提升效率，先去掉所有标签样式；避免后期因为继承，优先级，层叠性三大特性的影响，频繁的来回修改代码）
2.内容溢出 - overflow
元素溢出属性 overflow
○ 控制溢出元素的内容的显示方式
○ 属性值：
● hidden 溢出隐藏
● scroll 溢出滚动（无论是否溢出，都显示滚动条位置）
● auto 溢出滚动（溢出才显示滚动条位置）
3.外边距margin的两个特殊现象 - 合并和塌陷
合并现象：
垂直排列的兄弟元素，上下margin会合并。并取两个margin中的较大值生效。
例如：
<style>
.one {
width: 100px;
height: 100px;
background-color: brown;
margin-bottom: 20px;
}
.two {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
效果："two"的上margin占满了两个盒子之间的空间，而非垂直上下的两个margin
塌陷现象
父子级的标签，子级的添加 上外边距 会产生塌陷问题，导致父级一起向下移动。
例如：
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin-top: 10px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
</style>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
○ 效果：son和father一起下沉
○ 解决办法：
△● 取消 子级margin，并添加 父级padding
● 父级设置 overflow: hidden 或者 border-top
○ 原理是让浏览器找到父级盒子的正确边缘
○ border也会撑大盒子。所以 后两个 里更推荐用 隐藏溢出
（弹幕区：
对于现象:
本质是css属性的优先级问题，son的优先级比father高。
父级div有文字，子级就不会拖父级下水。
对于解决办法：
○设置“溢出隐藏”的办法，简单理解就是隐藏溢出帮父级找到了原本在的位置
○我也觉得就是BUG,忽略了起始位置，后两种方法就是重新找到了正确的起始位置）
三个方法怎么用：
/* 外边距塌陷问题 */
.father {
width: 300px;
height: 300px;
background-color: pink;
margin-top: 10px;
/* 方法1：padding-top: 50px; */
/* 方法2：overflow: hidden; */
/* 方法3：border-top: 1px solid #000;
box-sizing: border-box;
*/
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* 1. 若用padding方法 要将子级的margin隐藏 */
margin-top: 50px;
}
4.行内元素垂直内外边距
前面的内容之所以都用 div 实验，是因为它稳定，添加的属性的效果基本上没问题。
而行内元素（如span）添加 margin 和 padding，无法改变元素垂直位置
解决办法：给行内元素添加 line-height 可以改变垂直位置
5.圆角与盒子阴影
1)盒子模型 - 圆角
border-radius
○ 设置元素的外边框为圆角
○ 属性值为 " 数字+px / 百分比 "
● 对应的样式是圆角的半径
● 几个值对应的角的记忆方法是“从左上角（通常的ui画布二维坐标原点）顺时针赋值，没有取值的角与对角取值相同”
● 其中圆角半径百分比，最大的取值只有50%，超过了50%没有进一步的效果
常见应用：正圆形状；胶囊形状
- 正圆形状：给正方形盒子设置圆角属性值为 宽高的一半(50%)
- 胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半
2)盒子模型 - 阴影（拓展）
box-shadow：给元素设置阴影效果
○ 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影（重点是X轴偏移量、Y轴偏移量）
○ 注意：
● X 轴偏移量 和 Y 轴偏移量 必须书写
● 默认是外阴影，内阴影需要添加 inset
6.补充
表格边框设置与合并
table {
/* 合并边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
弹幕区：这里老师是加边框线，但是在学HTML的时候，大邱儿老师是在table后面加border="1",而合并单元格也是写在td里面用rowspan＝"2"
浙公网安备 33010602011771号