`
阅读更多

CSS & 框模型

 

1.页面元素边框的属性

属性 说明
boder 设置边框样式的复合属性
border-color 设置边框的颜色值
border-style 设置边框的样式,包括none(无边框),dotted(点划线),dashed(虚线),solid(实线),double(双线),groove(槽状),ridge(脊状),inset(凹陷),outset(凸出)
border-width 设置边框宽度
border-top, border-right, border-bottom, border-left 分别设置上、右、下和左边框的复合属性
border-top-color, border-right-color, border-bottom-color, border-left-color 分别设置上、右、下和左边框的颜色
border-top-style, border-right-style, border-bottom-style, border-left-style 分别设置上、右、下和左边框的样式
border-top-width, border-right-width, border-bottom-width, border-left-width 分别设置上、右、下和左边框的宽度

 

 

2.元素定位属性

属性 说明
position                  定义元素在页面中的定位方式,有absolute,relative,static,fixed,默认为static
left 指定元素与最近一个具有定位设置的父对象左边的距离
right 指定元素与最近一个具有定位设置的父对象右边的距离
top 指定元素与最近一个具有定位设置的父对象上边的距离
bottom 指定元素与最近一个具有定位设置的父对象下边的距离
z-index 设置元素的层叠顺序,仅在position属性为relative或者absolute时有效
width 设置元素框宽度
height 设置元素框高度
overflow 内容溢出控制
clip 剪切

 

 

 

 

 

 

 

 

 

 

 

3.布局属性

属性 说明
clear                  指定元素中不允许有浮动对象的边,取值:none(默认),left,right和both
float 指定元素是否以及如何浮动,取值有none,left和right
clip 指定元素的可视区域,区域外的部分将隐藏
overflow 指定在元素的内容超过指定宽度和高度时的处理方式,默认为visible
overflow-x 指定元素处理内容超过宽度时的方式
overflow-y 指定元素处理内容超过高度时的方式
display 指定元素是否以及如何显示,默认为inline(元素将以内联方式显示)
visibility 指定是否显示元素
   
   

 

 

 

分享到:
评论

相关推荐

    CSS3样式表-框模型(盒子模型).pptx

    单元二 CSS3样式表端基础前Web单元2-6 框模型(盒子模型)13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素,若干个inline元素是水平排列的body,ul,li为block元素,它们独占一整行,兄弟之间...

    css框架模型

    HTML元素的框架模型,理解它在网页中设计HTML元素的样式很简单,而且让你的元素在网页中的布局显示更容易上手

    前端学习笔记-CSS(2)_css框模型

    前端学习笔记-CSS(2)_css框模型 8.边框(盒子模型) margin,外边框,指当前标签的边框和其他标签或父标签的距离。 padding,内边框,指当前标签的边框和内部文本的距离。

    CSS 框模型概述word文档

    CSS 框模型概述word文档,内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。

    css框模型概述及css边框.docx

    .

    CSS3样式表- 框模型之补充.pptx

    CSS3样式表- 框模型之补充.pptx

    tytttta#CSS-learning#五CSS盒子模型1

    1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用

    浅谈CSS中盒模型的理解

    CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图: 为了方便大家理解和尝试,我写了一个小Demo放上来方便大家尝试 &lt...

    CSS行内框架构

    想深入理解CSS布局的可以看看这个了,详细讲解了网页新布局概念中的CSS架构-CSS盒子模型的行内框问题,希望大家多多讨论啊研究。

    JQuery 确定css方框模型(盒模型Box Model)

    做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决...

    开元css框架

    开元css框架 对css感兴趣的朋友可以下载看看

    css box模型祥解

    CSS 将所有的网页元素都看做是一个矩形框,这个框由元素的内容、填充(padding)、边框(border)和边界(margin)组成。

    CSS3(上)CSS3是CSS(层叠样式表)技术的升级版本.md

    CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新, 因此...

    CSS和CSS3思维导图(xmind版)

    box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从哪里开始显示) background-clip(指定背景图片从...

    精通CSS高级Web标准解决方案-包含源码(高清PDF中文版)

    本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后...2.1.1 IE/Win和框模型 2.1.2 空白边叠加 2.2 定位概述 2.2.1 视觉格式化模型 2.2.2 相对定位 2.2.3 绝对定位 2.2.4 浮动 2.3 小结 ……

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...

    css盒子模型 css margin 外边框合并

    CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 内边距、边框和外边...

    css盒子模型详解加示例

     整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界 CSS盒子模型的属性:内容属性:宽=width 高=height内填充属性(内容与边框之间的距离):padding外边距属性:margin(使用该...

    CSS3盒子模型详解

    本章将介绍CSS3中各种盒的知识点;主要包含以下内容: CSS3中各种各样盒的类型概念、浏览器支持情况; 当盒中内容超出容纳范围时,如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示; 掌握给盒添加阴影...

    CSS设计网页边框的几个实例

    掌握CSS网页布局技术,网页边框效果的定义是基础内容,其中也涉及到CSS盒模型知识以及CSS属性简写知识。 相关文章阅读:CSS设计网页时的一些常用规范 实例一: CSS:p {padding: 15px; border: 1px solid black; } ...

Global site tag (gtag.js) - Google Analytics