标签:整理 布局 定义 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,非替换元素 : 将内容直接告诉浏览器,将其显示出来
<div>aaaaaaa</div>
注 : 图片<img>是一个内联标签,但是它可以调节宽高(因为它还是一个替换元素)
查看每一个标签的类型(显示框类型)
值 :
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
块标签可以嵌套内联标签
<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>
opacity : 0(完全透明) ~ 1(不透明),跟display:none 也是有区别的。
rgb(),rgba()a的取值也是0-1,
使用rgba()设置透明度会使背景透明,容器的内容不会透明,而使用opacity可以使容器完全透明。
cursor : default pointer
总结手型:https://www.w3school.com.cn/cssref/pr_class_cursor.asp
自定义鼠标样式 :要求图片是有格式的 .cur .ico
height=100px; ==100
min-height=100px; >=100
max-height=100px; <=100
对100%单位做一个扩展学习
100%单位永远只与父容器有关
有默认样式的:
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
标签:整理 布局 定义 dde middle 根据 最小 bsp 需要
原文地址:https://www.cnblogs.com/lykpy/p/12332751.html