【web前端学习记录】超强总结，用心分享| 前端入门知识小结 问题避坑小结

关键词

1 元素显示模式 2选择器 3字体 4背景 5CSS优先级

  文章目录

• 一、元素显示模式
• 二、选择器
• 三   字体
• 四 背景
• 五CSS优先级

---

一、元素显示模式

1 块元素是一个容器或者盒子 里面可以放行内或者块级元素

其中文字类的元素不能放块级元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素 内联元素 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置是无效的。(margin padding可以显示宽度)

• 默认宽度就是它本身内容的宽度。(被内容撑开)

• 行内元素只能容纳文本或其他行内元素。

2 行内块元素 <img />、<input />、<td>

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。

• 一行可以显示多个（行内元素特点）。

• 默认宽度就是它本身内容的宽度（行内元素特点）。

• 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

3 元素显示模式的转换(转换后才能有其他显示元素的功能)

• 转换为块元素：display:block;

• 转换为行内元素：display:inline;

• 转换为行内块：display: inline-block

二 选择器

1 后代选择器

• 元素1 和 元素2 中间用空格隔开

• 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

• 元素1 和 元素2 可以是任意基础选择器

2 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

（简单理解就是选亲儿子元素）

• 元素1 和 元素2 中间用 大于号 隔开

• 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

3并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

• 元素1 和 元素2 中间用逗号隔开

• 逗号可以理解为和的意思 

• 并集选择器通常用于集体声明

4伪类选择器

a:link 没有点击过的(访问过的)链接 a:visited 点击过的(访问过的)链接 a:hover 鼠标经过的那个链接 a:active 鼠标正在按下还没有弹起鼠标的那个链接

focus伪类选择器

选择焦点 input标签 input:focus

复合选择器总结

后代选择器 用来选择后代 子孙所有 空格   例如 .put a class

子代选择器 最近的一级元素   例如 .put>p

并集选择器 多选元素   例如  put,p,

链接伪类选择器  例如 a:hover{}

:focus 选择器 获得光标的表单  例如 input:focus 写法

 三 背景图片

​​​​​​  1  设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

background-color 定义元素的背景颜色 元素背景颜色默认值是 transparent

background-image 定义元素的背景图片

background-repeat 设置元素背景图像的平铺 沿着 X　Y轴平铺

background-position 属性可以改变图片在背景中的位置

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标， 9那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

　　半透明度　ｒｇｂａ　（0，0，0，．３）最后一个表示透明度

四 选择器 优先级

css层叠性 样式冲突 就近原则,样式不冲突 不会重叠, 子元素继承父元素的样式(text-,font,line- color)

优先级 行内>id>类选择器,伪类选择器>元素选择器>继承 *

边框简写 1px ,soild,red

五 案例总结 个人问题 代码技巧  小知识点

1 段落首行文本缩进 text-indent em字体的大小 

2 文本水平对齐的方式 text-align center

3 内容对齐元素水平居中 给父元素元素

4 外边距合并问题　垂直布局的块级元素 上下的margin会 合并 两者距离为margin的最大值 解决方法 只给一个盒子设置margin

　外边距塌陷：父子高度塌陷　

　解决方法：１父元素设置 boder-top 或者padding-top　

2 父元素设置 overflow:hidden

3 转换成行内块元素

4 设置浮动

5 行内元素 margin padding 垂直方向不生效

六 问题与解决

1 span 选择器不精确通用 导致奇怪位置错误 

(注意上下选择器的泛用,如果选择器不精确 可能导致细节上的错误 )

2 外边距 margain auto导致页面左右对不齐

(自动宽度可能会根据页面大小产生偏差,也可能被上一个元素影响,说所以注意父元素 与大盒子的宽高)

3 没有设置weight 导致父子盒子重叠 样式不显示.

(两个盒子没有宽度 会重叠 注意盒子的选择器)

4 父盒子 随子盒子外边距 合并重叠 padding不会