盒模型

最新推荐文章于 2024-04-02 00:16:05 发布

丫呀nice

最新推荐文章于 2024-04-02 00:16:05 发布

阅读量127

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46100406/article/details/103843285

版权

CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

#1.盒模型的组成：
由里到外分别是content（内容），padding（内边距），border（边框），margin（外边距）

**#2.盒模型的两种标准：**标准模型和 IE模型

#3.标准盒模型（默认）与IE盒模型的区别：
标准盒模型的width/height指的是content（内容）的宽高，而IE盒模型的width/height指的是content（内容）+padding（内边距）+border（边框）的宽高
IE盒模型的宽高不直观，容易出错，造成其他元素的错位
注意：图片中的boder应该是border
在这里插入图片描述

#4.css如何设置两种盒模型：（这里用到了CSS3 的属性 box-sizing）

	/* 标准模型 */
	box-sizing:content-box;

 	/*IE模型*/
	box-sizing:border-box;

#5.浏览器的兼容性：
##(1)盒模型的浏览器兼容性问题：
IE6、7、8在没有声明情况下（怪异模式）使用IE盒模型；

==IE6、7、8在声明 ==<!DOCTYPE html>的情况下，==IE9及以上和chrome ==使用W3C盒模型；

==解决IE8及更早版本不兼容问题==：在HTML页面声明 <!DOCTYPE html>即可。

##(2)box-sizing属性的浏览器兼容性问题：
IE8及以上版本支持该属性（box-sizing），Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-

　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　 box-sizing: border-box;
	/*每个前缀都写一遍确保可以在这些浏览器中都能使用*/
}

#6.JS获取宽高
（dom：代表获取的HTML节点）
##(1). dom.offsetWidth/offsetHeight: 最常用，兼容性最好的（下面的几种了解一下）
##(2). dom.style.width/height: 只有dom的样式为内联样式才可以获取宽高，dom的样式为嵌入式或外部式是无法获取宽高的
##(3) dom.currentStyle.width/height ：这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到，但这种方式只有IE浏览器支持。
##(4) window.getComputedStyle(dom).width/height：这种方式的原理和（3）是一样的，这个可以兼容更多的浏览器，通用性好一些。
##(5) dom.getBoundingClientRect().width/height：这种方式是根据元素在视窗中的绝对位置来获取宽高的

##CSS的三种样式：
内联样式：把css代码直接写在现有的HTML标签中
嵌入式：把css样式代码写在style标签之间
外部式：把css代码写一个单独的外部文件（.css为扩展名）中，在head标签中通过link标签链入文件在，如下面代码：
三种样式优先级：内联式 > 嵌入式 > 外部式（一般情况下），满足就近原则：谁离被设置的元素越近谁就优先级越高，这里离得近是看在嵌套的第几层而不是代码离得近

丫呀nice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒模型

#1.盒模型的组成：由里到外分别是content（内容），padding（内边距），border（边框），margin（外边距）**#2.盒模型的两种标准：**标准模型和 IE模型#3.标准盒模型与IE盒模型的区别：标准盒模型的width/height指的是content（内容）的宽高，而IE盒模型的width/height指的是content（内容）+padding（内边距）+bo...
复制链接

扫一扫