EasyDemo*CSS尺寸与框模型(六七)

六、尺寸与框模型

尺寸与边框

1.1.1样式单位

*%：百分比

*in:英寸

*cm:厘米

*pt:镑(1pt等于1/72英寸)

*px:像素(计算机屏幕上的一个点)

*em:1em等于当前的字体尺寸

*rgb(x,x,x):RGB值，如rgb(255,0,0)

*rgb(x%,x%,x%):RGB百分比值，如rgb(100%,0%,0%)

*#rrggbb:十六进制，如#ff0000

*#rgb:简写的十六进制，如#f00

*表示颜色的英文单词，如red

1.1.2尺寸

*width&&height

*overflow:当内容溢出元素框时如何处理

-vsisible

-hidden

-scroll

-auto

*案例

<div>

默认为显示,即使超出尺寸，也显示全部内容

</div><br/><br/>

文本内容超出尺寸时，隐藏文本不显示

</div><br/>

总显示滚动条

</div><br/>

自动1：不超出不显示

</div><br/>

自动2：文本内容超出尺寸时，显示滚动条

</div><br/>

1.1.3边框

*简写方式

-border:width style color;

*单边定义

-border-left/right/top/bottom:width style color;

*border-width

-border-left/right/top/bottom-width

*border-style

-border-left/right/top/bottom-style

*border-color

-border-left/right/top/bottom-color

七、框模型

1.1框模型

1.1.1框模型

*框模型(Box Model)：定义了元素框处理元素内容、内边距、边框和外边距的方式

*width和height指内容区域的宽度和高度

*增加内边距、边框、和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

1.1.2内边距padding

*内边距:内容与框线间的距离

-padding:value

*单边设置

-padding-top/right/bottom/left:value;

*简写方式

-padding:value1 value2 value3 value4;

- top right bottom left

1.1.3外边距margin

*外边距：与下一个元素间的空间量

-margin:value

*单边设置

-margin-top/right/bottom/left:value;

*简写方式

-margin:value2 value2 value3 value4;

- top right bottom left

*margin可取值为auto,由浏览器计算外边距

EasyDemo*CSS尺寸与框模型(六七)相关推荐

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
1、CSS 框模型概述（盒模型）
CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. CSS 框模型概述不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的 ...
CSS 框模型( Box module )
框和布局在 KB005: CSS 层叠中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
CSS 框模型元素框处理元素内容、内边距、边框和外边距的方式
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的 ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
CSS知识点整理(2):框模型，定位
1. 框模型:Box Model 规定了元素处理元素框处理元素内容.外边距.边框.内边距的方式. 2. 当边距给定的值可以小于4个.CSS定义了一些规则.处理这中情况: 如果缺少左外边距的值,则使用 ...
CSS框模型，浮动，定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 element : 元素. padding : 内边距,也 ...
css框模型、定位、浮动
一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的 ...
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...

EasyDemo*CSS尺寸与框模型(六七)

EasyDemo*CSS尺寸与框模型(六七)相关推荐

最新文章

热门文章