全球贸易中心网,公司网站自己可以学习优化吗,网站开发询价方案,响应式网站设计规则CSS有一种基础设计模式叫盒模型#xff0c;定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面#xff0c;下面就来介绍盒模型#xff0c;主要有一下几种盒模型#xff1a;inline、inline-block、block、table、absolute position、float。浏览器把…CSS有一种基础设计模式叫盒模型定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面下面就来介绍盒模型主要有一下几种盒模型inline、inline-block、block、table、absolute position、float。浏览器把每个元素看做一个盒模型每个盒模型是由以下几个属性组合所决定的display、position、float、width、height、margin、paddinghe border等不同类型的盒模型会产生不同的布局
什么是盒模型页面中的每一个元素都是一个盒模型包括HTML和body。如下图每一个盒模型都是由多种属性组成的 重置盒模型解析模式在W3C的传统CSS2.1盒模型中通过声明width和height值来控制内容区域的宽度和高度然后附加上内边距和边框等称为内容盒模型在CSS中盒模型被分为两种第一种是W3C的标准模型另一种是IE的传统模型它们相同之处都是对元素计算尺寸的模型具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系不同之处是两者的计算方法不一致1W3C的标准盒模型外盒尺寸计算元素空间尺寸element空间高度 内容高度 内距 边框 外距element空间宽度 内容宽度 内距 边框 外距内盒尺寸计算元素大小element高度 内容高度 内距 边框height为内容高度element宽度 内容宽度 内距 边框width为内容宽度2IE传统下盒模型IE6以下不包含IE6版本或QuirksMode下IE5.5 外盒尺寸计算元素空间尺寸element空间高度 内容高度 外距(height包含了元素内容宽度、边框、内距)element空间宽度 内容宽度 外距包含了元素内容宽度、边框、内距内盒尺寸计算元素大小element高度 内容高度height包含了元素内容宽度、边距、内距element宽度 内容宽度width包含了元素的内容宽度、边距、内距做个小总结我个人的理解就是IE下的盒模型直接设置了box-sizing:border-box;
1.CSS3盒模型属性语法及参数box-sizing:content-box | border-box | inherit三个属性值说明content-box默认值让元素维持W3C的标准盒模型。元素的宽度和高度width/height 元素边框宽度border 元素内距padding 元素内容宽度和高度content width/height也就是element width/heightborder padding content width/heightborder-box此值会重新定义CSS2.1中盒模型组成的模式让元素维持IE传统的盒模型IE6以下版本和6 ~ 7怪异模式。元素的宽度或高度 元素内容的宽度或高度。从盒模型介绍可知这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度此处的内容宽度或高度 盒子的宽度或高度-边框-内距inherit此值是元素继承父元素的盒模型模式
box-sizing属性主要用来控制元素的盒模型的解析模式其主要目的是控制元素的总宽度。box-sizing:border-box;这种设置使页面布局更加方便只要对元素就行width设置总宽度就固定不变注在Firefox浏览器中box-sizing还可以设置一个padding-box属性值用来指定元素的宽度或高度包括内容的宽度或高度和内距但不包括边框宽度
浏览器兼容性 2.CSS3内容溢出属性盒模型也就是一个容器容器就有空间有大小当某些内容在盒子中容不下时就会超出盒子此时就可以使用overflowCSS2.1属性来指定如何显示盒中容纳不下的内容。在CSS3中增加了overflow-x和overflow-y属性语法及参数overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content和overflow属性参数一样overflow-x和overflow-y属性值去不同的值所起的作用不一样visible默认值表示不剪切容器中的任何内容、不添加滚动条元素将被剪切为包含对象的窗口大小而且是clip属性设置将失效hidden内容溢出容器时所有内容都将隐藏而且不显示滚动条scroll不管内容有没有溢出容器overflow-x都会显示横向的滚动条而overflow-y会显示纵向的滚动条auto在需要时剪切内容并添加滚动条。也就是说当内容超过容器的宽度或者高度时溢出的内容将会隐藏在容器中并且会添加滚动条用户可以拖动滚动条查看隐藏在容器中的内容no-display当内容溢出容器时不显示元素此时类似于元素添加了display:none声明一样no-content当内容溢出容器时不显示内容此时类似于添加了visibility:hidden声明一样
浏览器兼容性 3.CSS3自由缩放属性为了增强用户体验CSS3增加了很多新的属性其中resize就是一个重要的属性也是一个非常实用的属性它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。语法及参数resize:none | both | horizontal | vertical | inherit属性值说明none用户不能拖动元素修改尺寸大小both用户可以拖动元素同时修改元素的宽度和高度horizontal用户可以拖动元素仅可以修改元素的宽度但不能修改元素的高度vertical用户可以拖动元素仅可以修改元素的高度但不能修改元素的宽度inherit继承父元素的resize属性值
浏览器兼容性 4.CSS3外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似但和元素边框border完全不同外轮廓线不占用网页布局空间不一定是矩形外轮廓是属于一种动态样式只有元素获取到焦点或者被激活时呈现语法及参数outline:[outline-color] | [outline-style] | [outline-width] | [outline-offset] | inherit属性值说明outline-color定义了轮廓线的颜色默认为黑色outline-style定义了轮廓线的样式默认为noneoutline-width定义轮廓线的宽度属性值可以为一个宽度值默认值为medium表示绘制中等宽度的轮廓线outline-offset定义轮廓边框的便宜位置的数值此值可以是负值。为正值时表示轮廓边框向外偏移多少个像素当为负值是表示轮廓边框向内偏移多少个像素inherit元素继承父元素的outline效果
浏览器兼容性 outline和border的对比1border是盒模型的一部分直接影响其大小outline不影响文档流也不破坏网页布局2)border可以单边设置outline始终闭合没有outline-top或outline-left之类3outline创建的外轮廓线可能是非矩形的我的理解是当元素在文档边上的时候轮廓被隐藏了而border不会被隐藏掉4border只能向外扩展而outline内外都可以 更多专业前端知识请上
【猿2048】www.mk2048.com
