HTML+CSS学习Day07笔记

Day07笔记

一、浏览器兼容问题

1、浏览器是由不同的厂家开发的，所用的核心架构和代码不一样，出于自身利于的考虑设置技术壁垒

2、css标准只有一套，css要在不同的浏览器里面执行，所以代码问题在所难免的

浏览器兼容问题：margin-top

1、在标准流中，当咱们给子元素设置了margin-top时，浏览器在解析的时候会误认为给容器设置的所以会出现一起往下掉的情况

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

3、在哪些情况下会出现margin-top问题:

   a、子元素或者父元素设置了浮动属性不会出现

   标准流下测试的：

   b、父元素设置了边框，子元素是背景的不会出现

   c、父元素和子元素都是边框的时候也不会出现
      
   d、子元素或者父元素都是背景的情况下会出现这种问题

   e、父元素是背景在元素是边框的时候会出现这种问题

二、盒模型

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

盒模型组成：边框（border）、边界（margin）、填充（padding）、内容区（content）

理解：

1、盒子的作用：装东西

2、把所有的html标记看作一个盒子（box），标记的作用其实也是装东西（内容），内容分为文本和标记，标记可以嵌套标记，主要用于网页布局

3、盒模型组成就是规定了一个盒子有哪些东西，例如一个教室组成，门、窗户、桌椅、电脑、学生和老师

4、盒模型的组成使用的属性，会在浏览器里面有一个默认的示意图，这个图是浏览器自带的，主要作用是方便咱们查看一些盒模型相关的信息

5、学习盒模型最终其实学习的是它给咱们提供的几个属性，margin、padding、border、width、height，标记默认内容区域是以宽度和高度为界限的，宽度和高度以内就是内容区域

盒模型计算方式：

1、盒模型宽度计算 = 左右margin + 左右padding + 左右border + width 

2、盒模型高度计算 = 上下margin + 上下padding + 上下border + height 

3、一个元素在网页中所占的位置，实际上就是盒模型的位置

三、溢出属性

/*溢出的内容进行隐藏*/
.box1{overflow:hidden;}
/*当内容溢出时把内容隐藏会以滚动条的形式进行展示。滚动条只有内容溢出时才会展示，内容没有溢出时没有滚动条*/
.box2{overflow:auto;}
/*当内容溢出时把内容隐藏会以滚动条的形式进行展示。无论内容有没有溢出滚动条都会展示*/
.box3{overflow:scroll;}

.box4{overflow:scroll;}
.box4 p{
	width:160px;
	height:260px;
	background-color:orange;
/*继承，父元素它的值属性和属性值什么，子元素这里的效果就是什么*/
	overflow:inherit;

四、空余空间

/*文本默认会进行换行，让文本强制不换行*/
.box1{white-space:nowrap;}
/*把div标记转成具有pre标记的功能*/
.box2{white-space:pre;}
/*默认进行换行，空白会进行保留*/
.box3{white-space:pre-wrap;}
/*默认进行换行，空白会进行合并*/
.box4{white-space:pre-line;}

五、省略号

/*元素必须设置宽度*/
width:200px;
height:200px;
border:1px solid;
/*让内容强制不换行*/
white-space:nowrap;
/*让内容溢出隐藏*/
overflow:hidden;
/*出现省略号*/
text-overflow:ellipsis;