day07笔记

day07笔记

一、盒模型

1、概念：css规定把所有HTML元素都可以看作成一个盒子，在CSS中，盒模型是用来设计和布局时使用的。盒模型本质上是一个盒子，它的作用是封装周围的HTML元素。

2、理解：咱们可以把所有的标记看成一个生活中的类似盒子的东西，盒子的作用就是用来归纳和装东西使用的

3、盒模型组成：margin（外边距）、border（边框）、padding（内边距）、content（内容区域 width和height）

4、浏览器为每一个html标记提供了元素内部的示意图，帮助咱们查看一些信息，把这个示意图也可以叫做盒模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8o7w2sUi-1629084108361)(C:\Users\Mac\Desktop\H5-2109\day07\笔记\images\1.png)]

5、盒模型计算

盒模型宽度 = 左右margin+左右border+左右padding+width

盒模型高度 = 上下margin+上下border+上下padding+height，

例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px

宽=margin2 + border2 + padding2 + content.width = 202 + 12 + 102 +200 = 262px

高=margin2 + border2 + padding2 + content.height = 202 + 12 +102 + 50 = 112px，

二、溢出属性（容器的）

1、语法

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

2、说明

• visible:默认值，内容不会被修剪，会成现在元素框之外
• hidden：内容会被修剪，并且其余内容是不可见的
• scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
• auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容
• inherit：规定应该从父元素继承overflow属性的值

三、空余空间(了解)

1、语法

white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白

2、说明

• normal：默认值，空白会被浏览器忽略，
• nowrap:文本不会换行，文本会在同一行上继续，直到遇到
  标签为止；
• pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
• pre-wrap：保留空白符序列，但是正常的进行换行；
• pre-line:合并空白符序列，但是保留换行符；
• inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)

四、省略号

1、省略号实现步骤

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

2、省略号属性

text-overflow:clip/ellipsis;

clip：不显示省略号（…），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

text-overflow属性仅是…，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义

五、margin-top问题

1、描述：当咱们给子元素设置了margin-top的时候，浏览器在解析的时候会误认为父元素设置的所以会出现整体往下掉的情况

2、解决方案：给容器设置overflow:hidden;

3、注意事项

a、并不是所有的情况下都会出现这种问题，在标准流中会出现，在浮动流中不会出现（当咱们给子元素或者父元素设置了浮动）

b、在标准流有些情况下也不会出现

• 容器和子元素都是背景的情况下，会出现问题
• 容器设置了背景，子元素是边框，会出现问题
• 容器设置了边框，子元素是背景，也不会出现问题
• 容器设置了边框，子元素是边框，也不会出现问题

六、透明度问题

语法 : opacity

• 取值范围 0-1 0.5 简写 .5

• 当透明度为0的时候，可以隐藏元素

• 亲爱的的IE浏览器不支持

• IE兼容写法：filter:alpha(opacity=value);

• 取值范围 1-100

新增透明属性：rgba()

• 在css3里面给咱们提供了一个方法，可以解决这种问题

• rgba(); 最后一个值表示透明

• 取值范围 1-100

新增透明属性：rgba()

• 在css3里面给咱们提供了一个方法，可以解决这种问题

• rgba(); 最后一个值表示透明