复习css

  • 复习css已关闭评论
  • 110 次浏览
  • A+
所属分类:Web前端
摘要

复习css内联样式,行内样式,外部样式优先级离HTML元素越近,优先级越高内联样式离元素近:行内样式>内联样式>外部样式

复习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:blockdisplay:inline-block

span设为inline-block后,可以调整宽高,但是在同一行显示。

任何元素设为block后一定是独占一行。

div设为inline后,设置的宽高也不起作用了

inline-block的妙用:导航条的列表

浮动float

把屏幕比喻成地面,浮动的元素就是气球,是先从地面浮起来,再向左向右浮动。

清除浮动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> 

我的理解是:挤开某一层的浮动元素,浮动元素在它自己那一层浮动着,我独占某一层,然后撑开了父元素。

定位

相对定位

position:relative

相对于元素自身原来的位置偏移,原来空间仍然保留。

实践: https://www.bilibili.com/video/BV1YJ411a7dy/?p=20&share_source=copy_web&vd_source=da1006171a54936e673f791c1d09d070

绝对定位

positive:absolute

最近的父级设置了position:relative/absolute情况下,相对于父级元素定位。

最近的父级没有设置position:relative/absolute情况下,相对html定位,元素会移动。

不保留偏移之前的空间。

固定定位

position:fixed

相对于浏览器窗口定位,不论如何滑动,永远固定在某个角落。常用来设计导航条和回到顶部按钮。