一、优先级
1.代码是从上往下,所以同一个样式下面的会生效。
2.选择器优先级排序(从低到高):
通配符(*)、标签选择器(div、span、p、li等)、类选择器(class)、id选择器、行内样式、!important6(例 color: red !important; 注:尽量不要在公共代码用)。
二、继承
默认继承的属性:文字属性,文本缩进(text-indent)、对齐(text-align)、行高(line-height)。
三、练习
要求:
1.一个div标签有4个子元素div,子元素的内容分别为“苹果”、“橘子”、“橙子”、“香蕉”,子元素的宽高为100px,边框为2px,实线,红色。
2.每个子元素的上下边距为100px,子元素的宽高为设置的宽高。
3.第二个子元素鼠标悬浮时,字体为红色,背景颜色为绿色,即使子元素的个数发生改变都满足。
答案:
<!DOCTYPE html>
<html>
<head>
<style>
.box div {
box-sizing: border-box;
margin: 50px 0;
width: 100px;
height: 100px;
border: solid 2px red;
}
.box div:nth-child(2):hover {
color: red;
background-color: green;
}
</style>
</head>
<div class="box">
<div>苹果</div>
<div>橘子</div>
<div>橙子</div>
<div>香蕉</div>
</div>
<body>
</body>
</html>
四、布局前置知识
1.块级元素的内容宽度是其父元素的100%,高度为内容高度。
2.行内元素的宽高和内容一致无法设置,可设置display属性。
五、浮动 float 布局
1.元素设置 float 属性后就会变为行内块元素(默认没有 margin ,可设置宽高)。
2.浮动元素会脱离文档流不占据文档流空间。
3.浮动元素彼此之间是从左往右排列,宽度超过一行自动换行。
4.在浮动元素前面的元素不浮动时,浮动元素无法上移。
5.浮动元素不会盖住文字,可以设置文字环绕效果。
六、 flex 布局
七、BFC
1. 定义:
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
即:形成了一块封闭的区域,能检测到区域内脱离文档流的元素。
2.特点:
CSS中隐含的属性,开启后不会被浮动的元素所覆盖
BFC元素可以包含浮动的元素
BFC元素的子元素和父元素外边距不会重叠
3.开启(都有副作用)
设置元素浮动 float: left
设置行内块元素 display: inline-block
overflow: hidden(推荐)
4.作用
清除浮动带来的影响
解决外边距塌陷问题(外边距折叠也只会发生在属于同一BFC的块级元素之间)