第一阶段重点总结-CSDN博客

本文链接：https://blog.csdn.net/xuezhewuya/article/details/126921396

一、选择器：目的就是用来找到指定的标签，来给它添加样式。

1.语法用法：选择器{属性:值;}。

2.选择器类别：继承性（继承父级的文字属性）、通配符选择器（*{}）、标签选择器（标签名{}）、类选择器（.类名{}）、ID选择器（#id名{}）、！important（属性值后面分号之前）。

3.选择器的用法实例字体颜色为红色：p的父级div设置颜色为红色可以让子级的p也为红色、*{color:red;}、p{color:red;}、.color{color:red;}、#color{color:red;}、important作用到的属性级别最高（继承的属性例外）。如：id名为color的标签里面的div标签里面的p标签里面的span标签里的文字为红色：#color div p sapn{color:red;}；类名为color里面的div标签里面的类名为hong的p标签里面a标签里面的span标签里面的文字为红色：div.color p.hong span。#color div p sapn{color:red;}解析：实际上就是找到一栋楼（id名）里面的指定的那层楼（div）里指定的房间（p）里个子高（a）的穿红色衣服（span）的那个人。

4.伪类选择器的语法：标签名:hover/active/focus等，选择器选中的元素的状态。

二、元素的显示：指这个元素在页面中的显示方式。常见的几种显示模式如下：

1.块级：默认独占一行，默认高度为零，内容撑开高度，可以设置宽高。

2.行内块：默认一行可以显示多个，父级宽度不够自动换行，无宽高时内容撑开高度和宽度，可以设置宽高。

3.行内元素：默认一行可以显示多个，父级宽度不够自动换行，无宽高时内容撑开高度和宽度，不可以设置宽高。

4.其余的一些显示模式：display: block 、inline 、inline-block、 none（隐藏）、compact 、marker 、inline-table 、list-item、run-in 、table 、table-caption 、table-cell 、 table-column

三、元素的浮动和清除浮动

1.浮动的元素不再占有标准流的位置，可以覆盖标准流中的元素（内容不会覆盖），比标准流高半个级别（如：margin属性属于标准流属性，浮动后的元素margin属性不会生效），下一个浮动的元素会在上一个浮动元素的左右浮动，可以设置宽高。注意：如果上一个浮动元素有父级元素且父级元素有高度，那么后面这个浮动元素会单独浮动，如果上一个父级元素没有高度，那么后面这个会跟随前面那个浮动元素左右浮动。

2.清除浮动：由于浮动元素已经脱离标准流不再站位，标准流中的其他元素会被覆盖，所以要消除浮动带来的影响。额外标签法、单伪元素法和双伪元素法都是在浮动元素的父级元素内容最后增加一个块级元素，用以分割浮动元素和标准流的元素。最简单的方法是在父级元素里面加上属性：overflow:hidden;

四、位置控制

1.内容的位置：text-align:top/center/bottom;可以让元素里面的内容水平居中，一行内容可以用line-height进行垂直居中，注意：当这个属性加在img、a、span、input的父级上，img、a、span、input的位置也可以在父级里面水平和垂直居中。

2.标签的位置：如div、p、h这类大盒子标签水平居中，用margin:0 auto;实现，也可以用margin-left:50%;，margin-right:50%;和transform: translate(-50%，-50%); 外边距与位移属性组合进行水平和垂直居中。

3.背景图的位置：background-position:0 0;，以左上角为坐标原点进行移动，可以是像素值（正负都可以），也可以是位移属性：水平（right、left、center），垂直（top、bottom、center）。

五、元素的定位：元素层级关系，标准流<浮动<定位。定位的层级相同，单后定位的层叠先定位的，

1.相对定位（position:relative;）是相对元素自身原来的位置进行定位，不脱标；绝对定位(position:absolute;)是在父级已定位时相对父级定位或父级未定位时相对浏览器定位，脱标；固定定(position:fixed)位时相对浏览器定位，脱标。

2.子绝父相：绝对定位一般都是用在父级使用了相对定位的情况下。

六、拓展了解

1.透明：opacity，范围是0-1。

2.隐藏：overflow:hidden;隐藏后站位，display:none;隐藏后不占位。

3.圆角：border-radius;取值为像素或者百分比，50%时盒子变为圆形。