前端学习之CSS第五天

偏执的太偏执、 2022-05-09 00:28 462阅读 0赞

#                                                css基础**  **  #

**一、复习昨天知识**

1.1、文档流(标准流)

1.2、浮动

Float:left  |  right

特点:

不占据原来的位置，会脱标。

可以让块元素在一行上显示。

可以将行内元素转成行内块。（不推荐使用）

1.3、清除浮动

Clear:both;

1.3.1、额外标签法

在最后一个浮动元素后边添加新标签。

![70][]

1.3.2、 Overflow:hidden;

在父元素上使用overflow:hidden;

![70 1][]

1.3.3、伪元素清除浮动

![70 2][]

**1.4、定位**

Position:  left   |  right  |   top   |   bottom

1.4.1、静态定位

Position:static;    标准流。

1.4.2、绝对定位(看脸型)

Position:absolute;

特点：

◆自身从浏览器出发。

◆绝对定位之后，元素不占位置，会脱标。

◆嵌套的盒子，父元素没有给自身绝对定位，子元素绝对定位，子元素从浏览器出发设置自身位置。

◆嵌套的盒子，父元素绝对定位，子元素绝对定位，子元素从父元素出发设置自身位置。

◆行内元素转成行内块。（不推荐使用）

1.4.3、相对定位（自恋型）

Position:relative;

◆位置从自身出发。

◆设置相对定位之后，还占据原来的位置。

◆子绝父相，子元素绝对定位，父元素相对定位。

◆嵌套的盒子，父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。

◆不能将行内元素转成行内块。

1.4.4、固定定位

Position:fixed;

特点:

◆位置从浏览器出发。

◆不占据原来的位置，会脱标

◆可以将行内元素转换为行内块。（不推荐使用）

**1.5、定位的盒子居中显示**

★:margin:0 auto;  只能让标准流的盒子居中对齐。

★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)

![70 3][]

**1.6、标签包含规范**

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p，div等标签。

◆行内元素尽量包含行内元素，行内元素不要包含块元素。

![70 4][]

**1.7、规避脱标流**

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

![70 5][]

**1.8、图片和文字垂直居中对齐**

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

![70 6][]

![70 7][]

**1.9、Css可见性**

overflow:hidden;   溢出隐藏

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

Display:block;     元素可见

Display:none  和display:block  常配合js使用。

**1.10、css之内容移除（网页优化）**

◆使用text-indent:-5000em;.

![70 8][]

◆将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。

![70 9][]

**1.11、Css精灵图**

**1.12、属性选择器**

![70 10][]

**1.13、emmet快捷键：**

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

1.13.1、html:

1.13.1.1、生成结构的快捷键：

！+ tab,可以生成html5的结构代码。

1.13.1.2、生成id名和类名

标签名.类名\#id名+tab

没有标签名.类名+tab ==>div

1.13.1.3、生成同级元素：

标签名+标签名+标签名 “+”tab

1.13.1.4、生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

1.13.1.5、带固定数量的标签:

ul>li\*5+tab

1.13.1.6、带有序号名称

ul>li.abc$\*3 + tab

1.13.1.7、生成带有内容的标签：

ul>li>a\{item\}\*5

1.13.1.8、css

**   **   width:30px==>w30+tab

Height:30px==>h30+tab

Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab

如果有疑问联系博主：y19970821ywty

![70 11][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 12][]

[70]: /images/20220509/655bb8b4a9a84e8ba4b8e34fa56fce62.png
[70 1]: /images/20220509/a2ec6acb690244fbab56c429053c7e17.png
[70 2]: /images/20220509/656d88272ef7458d9ba39bf4bb23d980.png
[70 3]: /images/20220509/299773603ecd48b098ac42ff39bfb489.png
[70 4]: /images/20220509/4d94c8e3d3e24b8e923bb8c69e9dd00d.png
[70 5]: /images/20220509/b34103d85980439db072151465c1379c.png
[70 6]: /images/20220509/2d1a2d047fae45e5b1a027bf1ac2bdb5.png
[70 7]: /images/20220509/3f0a4b4d7f234e2f985ff3cbe0b8592e.png
[70 8]: /images/20220509/37fdc2c9d03d434f88b2962807c5b44e.png
[70 9]: /images/20220509/7f245928969f48d6b273ea8c21fa68bc.png
[70 10]: /images/20220509/e586a9364b474f62b67c064a2a7ec375.png
[70 11]: /images/20220509/2b0b8f8024824f7a9d07d885128a6b9f.png
[70 12]: /images/20220509/2731dc3818f149ceab52ed02da64ab81.png