CSS篇

朱雀 2022-10-31 04:16 116阅读 0赞

# 名词定义 #

CSS：cascading style sheet 层叠样式表，用于装饰html。

# 引入方式 #

1.  行间引入。对应html标签加上属性style
2.  页面级。在head标签写style标签
3.  外部引入。<link rel="stylesheet" type="text/css" href="css文件路径">

# 权重 #

**!important（Infinity）>行间样式（1000）>id（100）>class/属性/伪类（10）>标** **签/伪元素（1）>通配符（0）**

**\*\*256进制\*\***

# 元素分类 #

1.  行级元素 inline (span,strong,em,a,等) 特点：内容决定元素所占位置，不独占一行，不可以通过 css 改宽高。宽=内部元素的宽，高＝内部元素的高   \*\*具有文字特性，回车换行会当成文字分隔符\*\*
2.  块级元素 block (div,p,ul,li,ol,form) 特点：独占一行；可以通过 css 改宽高。在没有设置宽高时，宽=100%，高＝内部元素的高。
3.  行级块元素 inline-block (img等) 特点：内容决定大小，不独占一行，可以改宽高。在没有设置宽高时，宽=内部元素的宽，高＝内部元素的高。\*\*具有文字特性，回车换行会当成文字分隔符\*\*

# 盒模型 #

margin+border+padding+content(width&&height)

\*\*body标签在默认情况下有8px的margin值\*\*

# 层模型（定位） #

1.  绝对定位  脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
2.  相对定位  会保留原来的位置进行定位（原来的位置还占着，但是没东西），它是相对于自己原来的位置进行定位。
3.  固定定位  不随着滚动条的拖曳而改变，配合着 top、left、right、bottom 一起用

# margin塌陷 #

垂直方向的 margin 父子元素是结合在一起的，取最大的一个值。 当子元素的值小于父元素的值时，子元素的 值不起作用，当子元素的值大于父元素的值时，子元素会和父元素一起动。

解决这个问题的办法就是给父级元素触发 BFC，方法：

**（1）position：absolute；**

**（2）display：inline-block；**

**（3）float：left/right；**

**（4）overflow：hidden；（溢出部分隐藏）**

# **margin合并** #

两个兄弟级别的元素垂直方向上的 margin 会合并。解决办法：通过计算，只添加一个元素的margin值

# 浮动 #

浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了 bfc 的元素和文本类属性的元素（inline）以及文本都能看到浮动元素。

清除浮动的方法：

1.把父级元素后边的伪元素调用出来 content=“”；，然后转为块级元素，再清除浮动。比如：

**div::after \{**

**content: "";**

**display: block;**

**clear: both;**

**\}**

2.给父级元素触发 bfc。凡是设置了 float：left/right 或者 position：absolute 的元素内部会自动把其转化为行级块元素（inline-block）。

# 文字溢出处理 #

（1）单行文本：三件套： **white-space：nowrap；（禁止换行），overflow：hidden；**  **（溢出部分隐藏），text-overflow：ellipsis；（文字打点）** (当文字的宽度小于容器 的宽度时，没有变化，当文字的宽度大于容器的宽度时就打点显示)

（2） 多行文本只做截断，不做打点（打点是手写上去的），先让行高和容器的高成比 显示（比如容器 40px，line-height 是 20px，你也就只能放两行，所以得把数字算好）， 然后溢出部分隐藏处理

# 图片代替文字 #

当网速不好的时候，图片加载不出来（系统会把 css 和 js 屏蔽掉），就得用文字代替， 当网速好的时候显示图片，隐藏文字，这就需要在 HTML 里边加上文字信息（只能用于背景图片）

方法一：text-indent：（填数字）px；（文字首行缩进，值要大于容器的宽），然后 white-space：nowrap；（禁止换行），再 overflow：hidden；（文字溢出部分隐藏）即可。

方法二：背景上是可以展示背景图片和背景颜色的，但是不能展示内容，那么就给容器 hight：0px；（先把容器的高清零），然后再用 padding-top：（填数字）px；padding 就会把图片撑开，这时图片就显示出来了，文字就顶出去了，再 overflow：hidden； （文字溢出部分隐藏）即可。

# 细节 #

margin:0 auto实现居中，要求该元素和父级元素都是块级元素

行级元素的padding-top,padding-bottom,margin-top,margin-bottom无效