KHL 002 11-计算机-本职-前台 盒模型
2018-06-24 01:47:48来源:未知 阅读 ()
CSS 盒模型
CSS中的盒模型
-
inline
-
inline-block
-
block
-
table
-
absolute position
-
float
盒子3D模型
可以看出:
其中 padding 、content 、background-image 、background-color 四者构成Z轴;border与margin、padding三者之间应该是平面上的并级关系,并不能构成Z国的层叠关系。
重置盒模型解析模型
- W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 内距 + 边框 + 外距
element 空间宽度 = 内容宽度 + 内距 + 边框 + 外距
内盒尺寸计算(元素大小)
element 空间高度 = 内容高度 + 内距 + 边框(height为内容高度)
element 空间宽度 = 内容宽度 + 内距 + 边框(width为内容高度)
- ID传统下盒模型(IE6以下,不包括IE6版本或QuirksMode下IE5.5+)
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 外距(height为内容高度)
element 空间高度 = 内容高度 + 外距(width为内容高度)
内盒尺寸计算(元素大小)
element 空间高度 = 内容高度 +(height包含了元素内容宽度、边框、内距)
element 空间宽度 = 内容宽度 +(width包含了元素内容宽度、边框、内距)
目前浏览器大部分元素都是基于W3C标准的盒模型,但是对于form中部分元素还基于传统的盒模型,如input中的submit、reset、button和select等元素,这样如果给其设置border和padding它们也只会往元素盒内延伸。
CSS3盒模型属性
box-sizing属性的语法及参数
-
centent-box : 默认值,让元素维持W3C的标准盒模型
-
border-box : 此值会重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型
-
inherit :此值使元素继承父元素的盒模型模式
box-sizing 使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KHL 作品 计算机 知识管理系统 小试 博客系统</title> <link rel="stylesheet" type="text/css" href="../assets/css/reset.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/base.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/index.css" /> </head> <body> <!-- header --> <div id="header" class="clearfix"> head </div> <!-- /header --> <!-- seacher --> <div id="seacher"> </div> <!-- /seacher --> <!-- body --> <div id="body-container"> <!-- body left --> <div id="left-container"> left </div> <!-- /body left --> <!-- body right --> <div id="right-container"> right </div> <!-- /body right --> </div> <!-- body --> <!-- footer --> <div id="footer" class="clearfix"> footer </div> <!-- /footer --> <script type="text/javascript" src="../assets/jquery/jquery.min.js"></script> <script type="text/javascript"> $(function () { console.log('jc four!'); }); </script> </body> </html>
1 #header{ 2 width: 100%; 3 height: 50px; 4 background-color: #48525E; 5 } 6 7 #seacher{ 8 width: 100%; 9 height: 70px; 10 background-image: url("../image/seacher-bg.jpg"); 11 } 12 13 #body-container{ 14 width: 1200px; 15 margin: 0 auto; 16 } 17 18 #left-container{ 19 box-sizing: border-box; 20 float: left; 21 width: 900px; 22 height: 400px; 23 background-color: #ffffff; 24 padding-left: 20px; 25 padding-right: 20px; 26 padding-top: 20px; 27 } 28 29 #right-container{ 30 float: right; 31 width: 280px; 32 height: 400px; 33 padding-top: 20px; 34 } 35 36 #footer{ 37 width: 100%; 38 height: 120px; 39 background-color: #48525E; 40 }
如果此时给left-container
添加20px的内边距,则显示如下:
对于这种情况,可以把#left-container
的box-sizing
设置为border-box
,这样就不必再修改宽度或者再内嵌div了
1 #left-container{ 2 box-sizing: border-box; 3 float: left; 4 width: 900px; 5 height: 400px; 6 background-color: #ffffff; 7 padding-left: 20px; 8 padding-right: 20px; 9 padding-top: 20px; 10 } 11 12 #right-container{ 13 float: right; 14 width: 280px; 15 height: 400px; 16 padding-top: 20px; 17 }
可以看到left区域已经有了20px的内边距,且布局并没有打乱。
overflow属性
此属性用于指定如何显示盒中容纳不下的内容
overflow-x/overflow-y
-
visible : 默认值,不剪切容器中的任何内容、不添加滚动条,元素被剪切为包含对象的窗口大小,且clip属性设置将失效
-
auto : 在需要时剪切内容并添加滚动条
-
hidden : 内容溢出容器时,所有内容被隐藏且不显示滚动条
-
scroll : 不论内容是否溢出容器,overflow-x都会显示滚动条,而overflow-y会显示纵向滚动条
-
no-display : 当内容溢出容器时不显示元素,此时类似于添加了display:none声明
-
no-content : 当内容溢出时不显示内容,此时类似于添加了visibility:hidden声明
resize 属性
-
none : 用户不能拖动元素修改尺寸大小
-
both : 可以拖动元素同时修改元素的宽度和高度
-
horizontal : 可修改宽度
-
vertical : 可修改高度
-
inherit : 继承父元素的resize属性值
outline
outline主要是用来在元素周围绘制一条轮廓线,可以直到突出元素的作用。CSS3中对outline作了一定的扩展
-
outline-color : 定义轮廓线的颜色,默认值为黑色
-
outline-style : 定义轮廓线的样式,默认为none
-
outline-width : 定义轮廓线的宽度,默认参数为:medium,表示绘制中等宽度的轮廓线
-
outline-offset : 定义轮廓线的偏移位置的数值,此值可取负数值。为正数时向外偏离,为负数时表示向内偏移
-
inherit : 元素继承父元素的outline效果
与boeder对比
-
boeder属性盒模型的一部分,直接影响盒子的大小,outline不影响
-
outline的各边都一样,不能单独设置
-
outline可能是非矩形的,如果元素是多行,外轮廓线就至少是能够包含该元素所有框的外轮廓。
-
border只能向外扩展,outline可以向内扩展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>KHL 作品 计算机 知识管理系统 小试 博客系统</title> 6 7 <style type="text/css"> 8 9 .bar{ 10 width: 100%; 11 height: 50px; 12 overflow: hidden; 13 } 14 15 #one{ 16 width: 200px; 17 height: 35px; 18 border: 1px solid red; 19 line-height: 35px; 20 text-align: center; 21 margin: 0 auto; 22 outline: 10px solid #ccc; 23 24 } 25 26 #two{ 27 width: 200px; 28 height: 35px; 29 border: 1px solid red; 30 line-height: 35px; 31 text-align: center; 32 margin: 0 auto; 33 outline: 10px solid #ccc; 34 outline-offset: 5px; 35 } 36 37 #three{ 38 width: 200px; 39 height: 35px; 40 border: 1px solid red; 41 line-height: 35px; 42 text-align: center; 43 margin: 0 auto; 44 outline: 10px solid #ccc; 45 outline-offset: -5px; 46 } 47 </style> 48 49 50 </head> 51 <body> 52 <div id="one"></div> 53 54 <div class="bar"></div> 55 56 <div id="two">outline效果</div> 57 58 <div class="bar"></div> 59 60 <div id="three">outline效果</div> 61 62 </body> 63 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 2017-11-29 HTML5样式、链接和表格 2018-06-24
- KHL 001 11-计算机-本职-前台 CSS选择器 2018-06-24
- CSS高级选择符 2018-06-24
- CSS级联和继承 2018-06-24
- win10与ubuntu下演示运行.net core rc2 1.0.0.3002702程序 2018-06-23
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash