web前端学习日志7

css盒子模型

margin叠加：当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题，这个问题，只在上下有，左右是没有这个叠加问题的，会取上下中值较大的作为叠加的值

解决方案：1、BFC规范2、想办法只给一个元素添加间距

margin传递：margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的

解决方案：1、BFC规范2、给父容器加边框3、margin换成padding

扩展：

1、margin自适应居中（左右自适应居中是可以的，上下不行）

代码如下：

margin-left: auto; margin-right:auto;  等价于   margin: 0 auto;

2、width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，填满整个缝隙，节省代码

标签分类

1、按类型

block : 块      div,p,ul,li,h1.....

1、独占一行

2、支持所有样式

3、不写宽的时候与父元素的宽相同

4、所占区域是一个矩形

inline : 内联       span,a,em,strong,img.....

1、挨在一起的

2、有些样式不支持，例如：width,height,margin,padding...

3、不写宽的时候由内容决定宽

4、所占的区域不一定是矩形

5、内联标签之间会有空隙，由换行产生的

inline-block : 内联块      input,select.....

1、挨在一起，但支持宽高

注意：布局一般用块标签，修饰本文一般用内联标签

2、按内容

Flow:流内容

Metadata:元数据

Sectioning:分区

Heading:标题 

Phraasing:措辞

Embedded:嵌入式

Interactive:互动的

网址：https://www.w3.org/TR/html5/dom.html

3、按显示

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

img,input....

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

div,h1,p.....

显示框类型

display:none       不占空间的隐藏

visibility: hidden     占空间的隐藏

标签嵌套规范

ul  ,  li

dl  ,   dt  ,    dd

table  ,   tr   ,    td

块能够嵌套内联

<div>

       <span></span>

       <a  href="#"></a>

</div>

块嵌套块

<div>

       <div></div>

</div>

特殊：

错误的写法：

<p>

      <div></div>

</p>

内联是不能嵌套块的

错误的写法：

<span>

          <div></div>

</span>

正确的写法：

<a href="#">

        <div></div>

</a>

运行完以后只剩下   <div></div>

a标签不能嵌套a标签，可以嵌套span标签

溢出隐藏

overflow:

visible : 默认

hidden : 

scroll : 

auto : 

x轴、y轴：overflow-x、overflow-y针对两个轴分别设置

透明度与手势

opacity : 0(透明）~1（不透明）   0.5（半透明）

注意：占空间，所有子内容也会透明

raga() : 0~1

注意：可以让指定的样式透明，而不影响其他样式

cursor : 手势

default : 默认箭头

要实现自定义手势：

准备图片：  .cur   、   .ico

代码如下：

cursor : url(./img/cursor.ico),auto;