web第七天，标签分类

Posted 2021-03-08 lykpy

一，标签分类

　　1，按类型分

　　　　1，block（块）：

　　　　　　div，ul，ol，li，dl，dd，dt，p，h1......h6，

　　　　　　特点 ：

　　　　　　①，块是上下排列的，块是独占一行的

　　　　　　②，块支持所有CSS样式

　　　　　　③，当块不写宽度的时候，默认的宽是父容器的宽

　　　　　　④，块永远是一个矩形区域

 

　　　　2，inline（内联） ：

　　　　　　span，img，a，strong，em

　　　　　　特点 ：

　　　　　　①，内联是左右排列的，内联必须在一起

　　　　　　②，内联有些样式是不支持的，width，height，padding-top，margin-top

　　　　　　③，内联元素的宽度是由内容决定的

　　　　　　④，不一定是矩形区域

　　　　　　⑤，两个内联元素之间有一个间隙（折行带来的间隙）

　　　　　　　　一般情况下是不需要解决这个问题的，因为我们一般用块做布局，用内联元素做文本修饰

　　　　　　　　解决 ： 1，然内联元素写到一行上

　　　　　　　　　　　　2，给父容器设置font-size=0，再给当前元素设置正常的文字大小

 

　　　　3，inline-block（内联的块）

　　　　　　input，select

　　　　　　同时具有内联样式与块样式的特性

 

　　2，按显示分

 

　　　　1，替换元素 ： 浏览器根据元素的标签和属性，决定元素的具体显示内容。

　　　　　　img，input

 

　　　　2，非替换元素 ： 将内容直接告诉浏览器，将其显示出来

　　　　　　<div>aaaaaaa</div>

　　　　注 ： 图片<img>是一个内联标签，但是它可以调节宽高（因为它还是一个替换元素）

 

　　3，display

 

　　　　查看每一个标签的类型（显示框类型）

　　　　值 ：

　　　　block ， inline ， inline-block ， none

　　　　none ： 不显示标签（不占位），类似于border-right：none    text-decoration：none

　　　　

　　　　display ： none 与 visibility：hidden（不显示标签，原标签位置留白）的区别 ： 后者是占位的

 

　　4，标签嵌套规范

 

　　　　可以通过右键，对选中代码进行格式化（整理杂乱无章的代码）

 

　　　　标签本身就有许多嵌套规范

　　　　　　table(tr(td,th))

　　　　　　ul，li

　　　　　　dl，dd，dt

 

　　　　块标签可以嵌套内联标签

　　　　<div>   √

　　　　　　<span></span>

　　　　</div>

 

　　　　块标签不一定能嵌套块标签

　　　　<div>   √

　　　　　　<div></div>

　　　　</div>

　　　　特殊

　　　　<p>   ×

　　　　　　<div></div>

　　　　</p>

　　

　　　　内联标签不可以嵌套块标签

　　　　<span>   ×

　　　　　　<div></div>

　　　　</span>

　　　　特殊

　　　　<a href="">  √

　　　　　　<div></div>

　　　　</a>

 

　　　　不能自己嵌套自己的操作：

　　　　　<a href="">   错

　　　　　　　　<a href=""></a>

　　　　　</a>

　　　　<h2>   错

　　　　　　<h2></h2>

　　　　</h2>

 

　　5，透明度

 

　　　　opacity ： 0（完全透明） ~ 1（不透明），跟display：none 也是有区别的。

　　　　

　　　　rgb（），rgba（）a的取值也是0-1，

　　　　使用rgba（）设置透明度会使背景透明，容器的内容不会透明，而使用opacity可以使容器完全透明。

 

　　6，手势

 

　　　　cursor ： default  pointer

　　　　总结手型：https://www.w3school.com.cn/cssref/pr_class_cursor.asp

　　　　自定义鼠标样式 ：要求图片是有格式的  .cur   .ico

 

　　7,最大最小宽高

 

　　　　height=100px；   ==100

　　　　min-height=100px；  >=100

　　　　max-height=100px;   <=100

 

　　　　对100%单位做一个扩展学习

　　　　100%单位永远只与父容器有关

　　

　　8，CSS默认样式

 

　　 有默认样式的：
        body : margin 8px
        p : 上下margin 1em;-> 16px;
        h1 h2 h3 : font-size不一样，有上下margin
        ul : 默认的小点（disc） 左padding  上下margin
        a : color: -webkit-link; cursor: pointer; text-decoration: underline;

 

　　无默认样式的：

　　　　div    span...........

 

　　在开发一个网页之前：

　　　　1，先写一个结构html

　　　　2，去掉标签的默认样式

　　　　3，在PS工具中进行CSS样式的测量

 

　　　　去掉默认样式，css  reset方案

　　　　body,p,h1,h2,h3,ul,ol{margin:0; padding:0 }

　　　　*{margin:0;  padding:0}

 

　　　　ul,ol{list-style:none}

　　

　　　　a{text-decoration:none}

 

　　　　img{display:block}　　img{vertical-align:bottom;}

　　

　　　　vertical-align属性 可以对inline进行一个对齐方式的改变

　　　　默认：baseline（基线）bottom　　top　　middle

 

　　　　常见的CSS  reset：https://blog.csdn.net/brain_bo/article/details/815604444