css基础知识总结

Posted 2020-12-31 feiyang-dabao

一.权重的比较：

1.元素被选中： ID选择器>类选择器>标签选择器

2.元素未选中：谁离目标近选谁

二.元素的居中

   1.居中：

文本居中	水平居中	单行/多行 属性：text-align:center
	垂直居中	单行文本：line-height=height(设置行高等于个高) 多行文本：不设置高度，同时设置上下相等的padding
盒子居中	水平居中	属性：margin：0 auto;
	垂直居中	不设置父盒子高度，同时设置上下相等的padding

 

三、容器标签、文本标签、块级元素、行内元素

1.容器标签：简单理解为可以嵌套其他所有标签的容器

  例如：div table ul ol li h dt dd 等

2.文本级标签：只能嵌套文本/图片/超链接的标签

   例如： span p img a 等

3.块级元素：所有的容器级标签都是块级元素（p也是块级元素）

  例如：p,h1-h6,div,dl,ul,ol,li 等

4.行内元素：所有的文本级标签都是行内元素（p除外）

 例如：span p img a  input b u i 等

5.块级元素特点：

l 独占一行

l 可以设置宽高

l 如果不设置宽度，子盒子自动盛满父盒子的内容区域。（width是盒子属性不能继承）

 

行内元素特点：

l 行内元素并排显示

l 行内元素不能设置宽高

l 行内元素大小是内容撑开的。

6.块级元素和行内元素的转换 

display:显示模式

block(行内元素转为块级元素，块级有什么特性，那么这个元素就有什么特性)

inline(块级元素转为行内元素)

inline-block(行内块，既可以并排显示又可以设置宽高)