CSS总结

CSS知识点总结

1.link标签的rel属性 指明当前文档和链接文档之间的关系 stylesheet表示是一个样式表
2.link设置网页图标
3.id选择器 可以有多个HTML结构是相同的id html和css都可以正常操作和修饰 但是JS只能获取到第一个具有该id的html结构
4.权重关系
!important infinity 正无穷 background-color: red !important;
行间样式 1000
id选择器 100
class选择器 属性选择器 伪类选择器 10
标签选择器 伪元素选择器 1
通配符选择器 0
5.层级选择的筛选 浏览器遍历的时候是从右向左找的 从最后一层元素 找到最外层的元素
6.id选择器 class选择器 标签选择器 通配符选择器 属性选择器
父子选择器(派生选择器) 并列选择器(与) 并集(分组)选择器(或) 伪类选择器 伪元素选择器
7.在并列选择器中,标签选择器和id选择器和class选择器在一起,标签选择器必须放前面
8.border-width: thin medium thick
border-style: solid(直线) dotted(点状虚线) dashed(条状虚线)
9.text-indent 首行缩进 单位是em 1em = 1 * font-size
10. position定位 absolute relative fixed
absolute:脱离原来位置定位。是相对于最近的有定位的父级进行定位,如果没有有定位的父级元素，就相对于文档进行定位
relative:保留原来的位置进行定位,相对于自己原来(出生的)的位置进行定位
一般来说给父元素设置relative属性 不设置left和top属性 然后absolute用来进行定位
fixed广告定位 指定left 和 top 相对于页面进行定位
11. 块元素居中的方法
left:50%;top:50%;
margin-left: -1/2 * width;margin-top: -1/2 * height;
position:absolute/fixed;
两者的区别 absolute是相对于文档进行定位的 fixed是相对于页面进行定位的
12:display:none block inline-block
行级元素 内容决定大小 不可改变宽高 span em strong a del
行级元素水平方向的margin和padding,margin-left/right和padding-left/right,border只有border-top有用
块级元素 独占一行 可改变css宽高 div p ol li ul form address
行级块元素 内容决定大小 可改变css宽高 img
13. margin:0 auto 不起作用的情况 水平反向的居中
块级元素：给定要居中的块级元素的宽度。
行内元素：设置display:block 给定要居中的行内元素的宽度。
（行内元素设置成块级元素后可以对其宽高进行设置）
行内块元素：设置display:block 如input、button、img等元素，自带宽度可以不用设置其宽度）
14. margin auto实现水平垂直居中 需要配合position定位来实现
position:absolute
left:0px;right:0px;top:0px;bottom:0px;
margin:auto;
15. 两栏布局的几种方式
(1) position 配合 margin
先对被操作的元素进行定位操作 然后另外一个元素(宽度一般不设置)使用margin让出位置
一定要先定位,再让出位置 否则的话 定位的元素会另起一行 无法在一行中进行分栏
(2) float 配合margin
对要操作的元素设置float 使用margin操作另外一个元素 让出距离
16. position:absolute父子元素的margin/padding影响
子元素设置的absolute 未设置left等属性 会受到父元素的padding和自身margin的影响
子元素设置的absolute 并且设置left等属性 不会受到父元素的padding 但会受到自身margin的影响
17. 经典的两个BUG margin塌陷 和 margin合并
(1)margin塌陷 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值
正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 但是margin塌陷是在父级相对于浏览器进行定位时,子级没有相对于父级定位
解决方法:bfc(块级格式化上下文)
position:absolute
display:inline-block
float:left/right
overflw:hidden
(2)margin合并 兄弟元素垂直方向的空间是合用的 解决方法 bfc
假如我们需要两个div之间的距离是300px，那就设置上面的 margin-bottom:300px;来解决距离的问题
18. float 浮动元素 实现文字环绕图片的效果
浮动元素产生了浮动流(浮动流产生的效果) 所有产生了浮动流的元素,块级元素看不到他们。就会产生分层的效果
产生了 bfc 的元素和文本类属性（带有 inline 属性就是文本类属性）的元素以及文本都能看到浮动元素。
文本能看到浮动元素。浮动元素不意味着分层，只能说明他产生了浮动流。

解决方法:都要在父元素上进行操作
清除浮动流 clear:利用伪元素来清除浮动流 before 和 after
特点:与正常的元素无异 不在html结构中显示 可以通过css来操作
伪元素 中必须要有 content = “”
clear元素在块元素中才能生效
触发bfc元素 float position 的本质就是系统将其转换为display:inline-block;
19. 单行文本的打点技术 唯一技术
white-space:nowrap;不换行
overflow:hidden; 溢出隐藏
text-overflow:ellipsis;打点显示
多行文本 人工计算截取
20. 网络好的时候只显示图片,网络不好的时候 不加载CSS 显示文字能正常工作
方法一:利用首行缩进,将文字推至容器的外面,不让其换行,最后对其进行隐藏
淘宝网
方法一:
a{
width:100px;
height:100px;
background-image:url();
text-indent:110px; //首行缩进使文字超出容器
white-space:nowrap; //不换行
overflow:hidden; //溢出隐藏
}
方法二:利用padding 图片可以在padding中显示,但是文字不可以,设置height为0,padding-top为固定值,让图片在padding中显示,溢出部分隐藏
a{
width:100px;
height:0px;
padding-top:90px;
overflow:hidden;
background-image:url();
background-size:100px 90px;
}
21. 元素的嵌套规则
行级元素只能嵌套行级元素 块级元素可以嵌套任何元素
特例1:p标签不能嵌套div元素
特例2:a标签不能嵌套a标签
22. 文本居中的两种方式
(1):line-height = height 可以配合vertical-align使用
(2): height = font-size 设置上下的padding值撑开距离
特殊情况: 利用before和after伪元素的时候 如果给伪元素设置float属性
第一种情况下 伪元素会和主体元素的上边界对齐 第二种不会 因为伪元素无法到padding中去
23. 元素高度自适应屏幕
(1) html{
height:100%;
}
body{
height:100%;
margin:0;
}
(2) height:100vh;
100vh == height:100%