KHL 002 11-计算机-本职-前台盒模型

来源：互联网发布：网路优化编辑：程序博客网时间：2024/06/05 14:12

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>

#header{    width: 100%;    height: 50px;    background-color: #48525E;}#seacher{    width: 100%;    height: 70px;    background-image: url("../image/seacher-bg.jpg");}#body-container{    width: 1200px;    margin: 0 auto;}#left-container{    box-sizing: border-box;    float: left;    width: 900px;    height: 400px;    background-color: #ffffff;    padding-left: 20px;    padding-right: 20px;    padding-top: 20px;}#right-container{    float: right;    width: 280px;    height: 400px;    padding-top: 20px;}#footer{    width: 100%;    height: 120px;    background-color: #48525E;}

这里写图片描述

如果此时给left-container添加20px的内边距，则显示如下：

这里写图片描述

对于这种情况，可以把#left-container的box-sizing设置为border-box，这样就不必再修改宽度或者再内嵌div了

#left-container{    box-sizing: border-box;    float: left;    width: 900px;    height: 400px;    background-color: #ffffff;    padding-left: 20px;    padding-right: 20px;    padding-top: 20px;}#right-container{    float: right;    width: 280px;    height: 400px;    padding-top: 20px;}

这里写图片描述

可以看到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可以向内扩展

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>KHL 作品 计算机 知识管理系统 小试 博客系统</title>    <style type="text/css">        .bar{            width: 100%;            height: 50px;            overflow: hidden;        }        #one{            width: 200px;            height: 35px;            border: 1px solid red;            line-height: 35px;            text-align: center;            margin: 0 auto;            outline: 10px solid #ccc;        }        #two{            width: 200px;            height: 35px;            border: 1px solid red;            line-height: 35px;            text-align: center;            margin: 0 auto;            outline: 10px solid #ccc;            outline-offset: 5px;        }        #three{            width: 200px;            height: 35px;            border: 1px solid red;            line-height: 35px;            text-align: center;            margin: 0 auto;            outline: 10px solid #ccc;            outline-offset: -5px;        }    </style></head><body>    <div id="one"></div>    <div class="bar"></div>    <div id="two">outline效果</div>    <div class="bar"></div>    <div id="three">outline效果</div></body></html>

这里写图片描述

阅读全文

0 0

KHL 002 11-计算机-本职-前台 盒模型

CSS 盒模型

盒子3D模型

重置盒模型解析模型

CSS3盒模型属性

box-sizing属性的语法及参数

box-sizing 使用

overflow属性

resize 属性

outline

KHL 002 11-计算机-本职-前台盒模型