css
2020-12-18 本文已影响0人
jiahzhon
三种引入方式
- 行间样式：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就要用并列选择器
Snipaste_2020-12-19_11-36-11.png
-
分组选择器
-
逗号隔开，共享一个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可以让元素水平居中
