三种引入方式
- 行间样式:style。里面直接写的就是css
- 页面级css <head>中的<style>
- 外部css文件<link rel = "stylesheet" type="text/css" href = "css文件名">
css选择器
- id : #id {}
- class : .class{}
- 标签选择器:直接写标签
- 通配符
CSS权重
- !important > 行间样式style > id > class | 属性选择器 | 伪类 > 标签 | 伪元素 > 通配符*
复杂的父子选择器
<div>
<em>
</em>
<span>
<em>
</em>
</span>
</div>
- 父子选择器
- div em{}
- 不一定限制是标签选择器
- 不一定是直接的父子关系, div em{}两个em都会命中
- 系统是自右向左找的
- 直接元素选择器
- div>em
- 只命中直接的子元素
- 并列选择器
- div.demo
- 没有空格
- 如果有标签选择器要写在最前面
- 下图如果只想要命中2就要用并列选择器
-
分组选择器
-
逗号隔开,共享一个css样式
Snipaste_2020-12-19_11-43-27.png
-
-
伪类选择器
- a:hover
-
实现鼠标移到元素时改变样式
Snipaste_2020-12-19_17-38-04.png
css属性
- 文本对齐方式: text-align
- 单行文本高度:line-height
- 单行文本垂直居中:、line-height = 容器高度 ,水平居中 text-align = center就行了
- 首行缩进:text-indent : 2em 缩进两个文本 1em = 1 font-size
盒子模型
1608631165(1).png- <body>经常自带8px的margin,所以初始化css的时候经常把它去掉
层模型
- 这个概念是由css的一个属性position引出来的,position是用来定位元素的,配合up,right,left,down。
- posiition: absolute
- 脱离原来的位置进行定位,(进入到另外一层了)。
- 以最近的有定位的父级进行定位,如果没有,那么相对于文档定位。
- posiition: relative
- 保留原来位置进行定位(即使自己移动了,原来的位置也不会让给别人)
- 相对自己原来的位置进行定位
- 依据他们的特性。所以经常在做定位时以relative的元素作为定位的依据。以absolute来定位。
- 还有一种posiition: fix。与absolute相似,但是可以固定(拉滚动条也会固定住的广告)
-
居中在页面
image.png
经典bug:
- margin塌陷:设置子元素垂直方向的margin,父元素也具有与子元素相同的margin值,称之为塌陷现象
- 解决方法,让父元素触发bfc
- position: absolute
- display: inline-block;
- float: left/right;
- overflow:hidden(溢出部分隐藏)
- 解决方法,让父元素触发bfc
- margin合并:两个兄弟关系的元素垂直方向margin会以margin较大的为准。解决方法为套父元素,把父元素触发bfc,但这种做法不妥,为了解决bug而添加元素。所以我们一般容许margin合并bug。
浮动模型
- 浮动模型是由css的float:left,right形成的。
- 浮动元素产生了浮动流。所有产生了浮动流的元素,块级元素看不到他们。产生了bfc的元素和文本类元素(inline)的元素以及文本都能看到浮动元素。
- 清除元素周围的浮动流:clear:both;
- 注意:clear只有在块级元素中才能生效
-
包裹浮动元素(让最后一个子元素clear就行了,这样父块元素就能发现浮动子元素)
image.png - 利用伪元素去除浮动流(上面的解决办法还是增加了标签去解决)
-
伪元素是每个标签都有的元素,div::after和div::before
image.png
-
- 改变父元素来包裹
- 父标签设置position:absolute; float:left/right
- 这种做法会打内部把元素转换成inline-block;inline-block由内部元素大小决定自身大小,所以只能实现紧紧包裹。(冷知识)
- 父标签设置position:absolute; float:left/right
- 用float实现报纸排版(文字包裹着图片,这是float最初的用法)
-
图片没有使用float,不能实现报纸那种效果
image.png -
使用float后
image.png
文字溢出处理
-
单行文字实现多出部分省略号
image.png - 多行不能这么处理,一般直接做截断
图片背景处理(加载不出css时候展示文字)
-
利用padding也会展示背景图片的特性
image.png -
margin: 0 auto可以让元素水平居中
网友评论