web第七天，标签分类
2021-06-05 01:04
标签：整理 布局 定义 dde middle 根据 最小 bsp 需要 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 同时具有内联样式与块样式的特性 1，替换元素 ： 浏览器根据元素的标签和属性，决定元素的具体显示内容。 img，input 2，非替换元素 ： 将内容直接告诉浏览器，将其显示出来 注 ： 图片 查看每一个标签的类型（显示框类型） 值 ： block ， inline ， inline-block ， none none ： 不显示标签（不占位），类似于border-right：none text-decoration：none display ： none 与 visibility：hidden（不显示标签，原标签位置留白）的区别 ： 后者是占位的 可以通过右键，对选中代码进行格式化（整理杂乱无章的代码） 标签本身就有许多嵌套规范 table(tr(td,th)) ul，li dl，dd，dt 块标签可以嵌套内联标签 块标签不一定能嵌套块标签 特殊 × 内联标签不可以嵌套块标签 × 一，标签分类
1，按类型分
2，按显示分
3，display
4，标签嵌套规范
特殊
√
不能自己嵌套自己的操作：
错
错
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%单位永远只与父容器有关
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
web第七天，标签分类
标签：整理 布局 定义 dde middle 根据 最小 bsp 需要
原文地址：https://www.cnblogs.com/lykpy/p/12332751.html