html基础

最新推荐文章于 2024-05-15 21:37:17 发布

原创最新推荐文章于 2024-05-15 21:37:17 发布 · 314 阅读

CC 4.0 BY-SA版权

sublime快速生成html骨架

在页面中输入   !

然后按下tab键盘即可生成HTML骨架

注释

1.html 中   <!-- 注释语句 -->   ctrl + /
2.css中    /** 回车

段落首行缩进两个字符

    text-indent:2em;

删除线

1.text-decoration:line-through;
2.<s>要删除的内容</s>

样式标签

1.加粗 对应 加粗
取消加粗font-weight:normal或400;
添加加粗font-weight:bold或700;
2.倾斜对应倾斜
取消倾斜font-style:normal;
添加倾斜font-style:italic
3.<ins>下划线</ins>对应下划线
取消下划线：
text-decoration:none;
添加下划线：
text-decoration:underline;
4.<del>删除线</del>对应<s>删除线</s>
取消删除线：
text-decoration:none;
添加删除线：
text-decoration:line-through;

伪类的顺序

:link :visited :hover :active

清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题

清除浮动的方法

a. 额外标签法
在最后一个浮动标签（div）后增加一个新的空div <div class="clear"></div> 并为新的div增加css .clear{clear:both;}
b. 父级添加overflow属性方法.father{overflow:hidden;}
c. 使用after伪元素清除浮动

/正常浏览器清除浮动/
.clearfix:after{
content:”” ;
display:block;
height:0;
clear:both;
}
/IE6 IE7清除浮动/
.clearfix{
*zoom:1;
}

d. 使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after{
content:”” ;
diaplay:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

定位

元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

静态定位唯一的用处：就是取消定位。 position: static;

相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

绝对定位absolute (拼爹型)

　[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位
若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

记忆法：就类似于孙猴子，无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

我们可以得出如下结论：

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin改为auto即可
绝对定位的盒子需要：1.left设为50% 父盒子的一半大小 2.margin-left设为自己width的一半切为负值

字体图标

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

css @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }

第二步：给盒子使用字体

css span { font-family: "icomoon"; }

第三步：盒子里面添加结构

css span::before { content: "\e900"; } 或者 

追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。