前端学习之CSS第五天

                                               css基础  

一、复习昨天知识

    1.1、文档流(标准流)

    1.2、浮动

Float:left  |  right

特点:

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

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

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

    1.3、清除浮动

Clear:both;

1.3.1、额外标签法

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

 

1.3.2、 Overflow:hidden;

在父元素上使用overflow:hidden;

1.3.3、伪元素清除浮动

 

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:负值。)

 

1.6、标签包含规范

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

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

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

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

1.7、规避脱标流

◆尽量使用标准流。

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

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

 

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

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

 

 

1.9、Css可见性

overflow:hidden;   溢出隐藏   

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

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

Display:block;     元素可见

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

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

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

 

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

 

1.11、Css精灵图

1.12、属性选择器

 

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

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