复习css
样式
内联样式,行内样式,外部样式优先级
离HTML元素越近,优先级越高
内联样式离元素近:行内样式>内联样式>外部样式
外部样式离元素近:行内样式>外部样式>内敛样式
本质:浏览器从上到下解析过程中,后出现的样式会覆盖较早出现的样式
选择器
基本选择器
id > 类 > 标签
本质:定位越精准,优先级越高
层次选择器
子孙选择器:body p{} 选择body下所有p元素,即所有p后代。也叫后代选择器。
子选择器:body > p{} 选择body下第一层p元素,即所有p儿子。
相邻弟弟选择器:.classname + p{} 选择与某个类相邻且靠后的第一个p元素,即第一个p弟弟。想象成i++,就是每次加一个。如果第一个弟弟不是p,那么无反应。
弟弟选择器:.classname ~ p{} 选择与某个类同一层且靠后的所有p元素,即所有p弟弟。想象成表示范围的~。不关心相不相邻,只要在后面即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试层次选择器</title>
<style>
.active + p{
background: red;
}
.active ~ p{
background: red;
}
</style>
</head>
<body>
<p class="active">0</p>
<a href="">我是a标签</a>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
结构伪类选择器
ul li:first-child{}
ul li:last-child{}
p:nth-child(1){} 通过p找到父元素,然后选择父元素的第一个儿子,这个儿子必须是p,否则无反应
p:nth-of-type(2){} 通过p找到父元素,然后选择父元素的第二p个元素,这个p元素不一定位于第二的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试结构伪类选择器</title>
<style>
p:nth-child(1) {
background-color: blue;
}
p:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<p>p1</p>
<a href="">aaa</a>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div>
<p>ddd</p>
</div>
</body>
</html>
属性选择器
a[id]{} 选择有id的a
a[id="idName"]{} 选择有id为idName的a
a[class*="classname"]{} 选择有class包含classname的a,为啥是包含?因为一个元素可以有多个类名。
a[href^="http"]{} 选择href以http开头的a
a[href$="com"]{} 选择href以com结尾的a
行高
一行内容所占的高度。
包括元素上方的高度,元素自身的高度,元素下方的高度。
设置单行文字上下居中:line-height = height
盒子模型
margin的妙用
margin:0 auto;/*使盒子水平居中*/
盒子的宽高
盒子的宽度
margin-left + border-left + padding-left + 内容宽度 + padding-right + border-right + margin-right
盒子的高度
margin-top + border-top + padding-top + 内容高度 + padding-bottom + border-bottom + margin-bottom
display
常见的行内元素:span,img,a
行内元素不可以设置宽,高,除非用display:block
或display:inline-block
。
span设为inline-block后,可以调整宽高,但是在同一行显示。
任何元素设为block后一定是独占一行。
div设为inline后,设置的宽高也不起作用了
inline-block的妙用:导航条的列表
浮动float
把屏幕比喻成地面,浮动的元素就是气球,是先从地面浮起来,再向左向右浮动。
原本的div是只能上下布局,引入float就使得div可以左右布局。
清除浮动clear
是在浮动的基础上修改(调整浮动的位置)的,不是说取消浮动。
clear:left; /*左侧不允许有浮动元素*/
clear:right; /*右侧不允许有浮动元素*/
clear:both; /*两侧不允许有浮动元素*/
clear:none; /*不清除浮动*/
clear可以让浮动的元素,在浮动的基础上,重新构成一个标准的文档流(从上往下显示)。
个人理解:清除浮动就是挤开我这一层的浮动元素,我独占某一层,从屏幕(平面)上看就是从上到下排列元素。
浮动的后遗症:父级元素塌陷
解决办法:
1.将父级div设置一个固定的高度,从而把浮动的元素也包进去。
2.父元素中新增一个div,设置clear:both
。
3.父元素属性overflow:hidden/scroll/auto
4.父元素添加伪类:
#father:after{
content:'';
display:block;
clear:both;
}
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试父级塌陷</title>
<style>
.father {
border: 1px solid red;
}
.layer1,.layer2,.layer3 {
width: 500px;
height: 100px;
background-color: gold;
border: 1px blue dashed;
float: right;
display: inline-block;
}
.father:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="layer1">
我是layer1
</div>
<div class="layer2">
我是layer2
</div>
<div class="layer3">
我是layer3
</div>
</div>
</body>
</html>
我的理解是:挤开某一层的浮动元素,浮动元素在它自己那一层浮动着,我独占某一层,然后撑开了父元素。
display与float比较
display不能控制方向
float容易引起父级塌陷
定位
相对定位
position:relative
相对于元素自身原来的位置偏移,原来空间仍然保留。
绝对定位
positive:absolute
最近的父级设置了position:relative/absolute情况下,相对于父级元素定位。
最近的父级没有设置position:relative/absolute情况下,相对html定位,元素会移动。
不保留偏移之前的空间。
固定定位
position:fixed
相对于浏览器窗口定位,不论如何滑动,永远固定在某个角落。常用来设计导航条和回到顶部按钮。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。