尺寸与框模型

1、样式单位

  %:百分比

  in:英寸

  cm:厘米

  mm:毫米

  pt:磅(1pt等于1/72英寸)

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

  em:1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍

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

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

  #rrggbb:十六进制数,如#ff0000

  #rgb:简写的十六进制数,如#f00

  表示颜色的英语单词,如red

2、尺寸

  width和height

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

    visible

    hidden

    scroll

    auto

      div{

        width:130px;

        height:50px;

        border:1px solid blcak;

      }

      div.hidden{overflow:hidden;}

      div.scroll{overflow:scroll;}

      div.auto{overflow:auto;}

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

4、

时间: 2024-08-30 10:55:55

尺寸与框模型的相关文章

CSS框模型以及maigin、border、padding属性

一.框模型(Box Model) 在CSS中所有元素都是框,都有高度(height).宽度(width).内边距(padding).边框(border).外边距(margin)等属性.框模型规定了元素框处理元素内容.内边距.边框和外边距的方式. 元素框的最内部分是实际内容,向外依次是内边距.边框和外边距.外边距默认是透明的,因此不会遮挡其后的任何元素.内边距.边框和外边距都是可选的,默认值是0. 注意:背景应用于内容和内边距.边框组成的区域. 在CSS中,width和height指的是内容区域的

CSS 框模型

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.外边距和边框的方式. 如左下图表示元素内容.内边距.外边距和边框四者关系 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个

CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖

CSS 框模型( Box module )

框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的调度.人物之间的关系.人物和景物的关系等的安排.大同小异,CSS 的布局也是一样. CSS 的布局,包含两个大部分: 元素:元素及其组成,类似电影布局中人物的高矮胖瘦.衣着配饰等,以及场景中的桌椅板凳,物品等等. 定位:元素的位置, 类似电影场景的中对环境的设置,人物作为元素,他们之间的关系会影响其

《精通CSS》框模型

目前正在阅读<精通CSS>的电子书,记下读书过程中的理解和不解,以便以后查阅. 第二章 要掌握的三个最重要的CSS概念是浮动.定位和框模型.     框模型是CSS的基石之一,它制定元素如何显示以及如何相互交互.页面上的每个元素被看做一个矩形框,这个框由元素的内容.填充.边框和空白边组成. 在CSS中,width和height指的是内容区域的宽度和高度.增加填充.边框和空白边不会影响内容区域的尺寸,但是会增加元素框的总尺寸.但是在IE 6和其之前的版本中,会将填充(padding)视为内容的一

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框

第十七天学习:CSS框模型

关键字:框模型 学习计划: CSS框模型简介 border特性 padding特性 margin特性 学习记录: CSS框模型(box model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 可以使用CSS分别控制每个框的顶部.底部.左边和右边边框以及页边空白和内边框:并且可以为框的每一边指定不同的宽度和颜色 元素框的最内部分是实际内容,直接包含的内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后面的任何元素. 背景应用于由内容

关于CSS框模型及定位的概念

一.CSS框模型(box model)包含了边框(boder).外边距(margin).内边距(padding).宽(width).高(height).元素(element).背景应用于由内容.边框.内边距组成的区域.单边内边距的属性有四个,分别设有上.右.下.左内边距:padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字(单位厘米),也可以是百分比数值.边框的样式在boder—style中设置,可以定