`
阅读更多

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 框模型(盒子模型)详解** 在网页设计中,CSS3框模型(Box Model)是理解和布局页面元素的关键概念。它定义了网页元素如何占据和影响页面空间,包括元素的内容区域、内边距、边框和外边距。框模型使得开发者...

    HTML&CSS&JavaScript词典范例

    CSS3新增了盒模型、过渡、动画、伪类和多列布局等特性,使得网页设计更加灵活且富有表现力。 JavaScript是一种解释型的、基于原型的脚本语言,它为网页提供了动态交互的能力。JavaScript可以直接在浏览器中运行,...

    css&html 学习project之七

    CSS3引入了新的布局模式,如Flexbox(弹性盒模型)和Grid(网格布局),极大地简化了复杂布局的设计。Flexbox允许你轻松地创建响应式、单轴布局,而Grid提供了二维布局的解决方案,使得元素可以在行和列中对齐。 在...

    css&html学习project之六

    传统的盒模型(Box Model)包括内容(content)、内边距(padding)、边框(border)和外边距(margin),理解这个模型是调整元素尺寸和位置的关键。此外,流体布局(Fluid Layout)利用百分比宽度使页面适应不同...

    CSS+盒模型,css盒模型面试题,HTML

    **CSS盒模型详解** 在网页设计与开发中,CSS(层叠样式表)盒模型是理解元素布局和尺寸计算的关键概念。盒模型定义了元素如何占据空间,包括内容区域、内边距、边框和外边距。了解CSS盒模型对于优化页面布局和解决...

    css框架模型

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

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

    CSS框模型是网页布局的基础,它定义了网页元素如何占据空间,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容是元素实际显示的信息,内边距则提供了元素内容与边框之间的空间,通常用于...

    css&javascript小例子

    在压缩包中的“css”文件夹可能包含了各种CSS样式表示例,这些示例可能涵盖了选择器的使用、类和ID的应用、盒模型的理解、响应式设计的实现,以及动画和过渡效果的创建等内容。 例如,开发者可能创建了一个简单的...

    CSS+盒模型,css盒模型面试题,HTML源码.zip

    **CSS盒模型** 在网页设计中,CSS(层叠样式表)盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距(padding)、边框(border)以及外边距(margin)组成,...

    css&javascript&dhtml查询手册

    DHTML是HTML与CSS、JavaScript以及DOM(文档对象模型)的组合,使得网页具有动态效果和交互性。它可能涉及: 1. **DOM解析**:理解DOM如何将HTML文档转换为可编程的对象结构。 2. **动态更新**:使用JavaScript改变...

    [CSS&javascript动态网页设计与制作].吴以欣.插图版

    书中会详细讲解CSS的基本语法、选择器、盒模型、定位技术、浮动和Flexbox布局,以及最新的Grid布局系统。此外,还会涵盖CSS动画和过渡效果,使网页更具交互性和动态性。 JavaScript则是一种强大的客户端脚本语言,...

    CSS下盒子模型定位浅析.pdf

    【CSS盒子模型定位浅析】 CSS(层叠样式表)是一种强大的样式控制工具,它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念,它将HTML元素视为一个个具有内容(content)、内边距...

    CSS 框模型概述word文档

    总之,CSS框模型是理解和创建复杂网页布局的关键,通过精确控制内容、内边距、边框和外边距,可以实现各种视觉效果和布局需求。在实践中,要注意浏览器的兼容性问题,并灵活运用内边距和外边距来调整元素间的空间...

    css 盒模型整理

    **CSS盒模型详解** 在网页设计中,CSS(Cascading Style Sheets)盒模型是理解元素布局的关键。盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要,特别是在响应式...

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

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

    CSS+DIV-盒子模型示例.zip

    **CSS+DIV 盒子模型详解** 在网页设计与开发中,CSS(层叠样式表)和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念,它将...

    div+css 主页框架

    CSS盒模型包括元素的内容区域、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于精确控制元素大小和间距至关重要。 四、创建主页框架 1. 结构规划:首先,我们需要规划主页的结构,例如头部...

    CSS使用盒模型实例讲解

    在CSS中,盒模型是一种描述元素布局的重要概念,它决定了元素占用空间的方式。盒模型包括元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于精确控制页面布局至关重要。 首先,...

    配图详细讲解CSS的盒子模型

    本文通过配图详细解释了CSS盒子模型,并提供了一个具体的几何题来帮助理解各个部分的宽度计算。 首先,我们来看水平方向的宽度计算。以题目中的例子为例: 1. `a` 是body元素的左外边距,由于设置为0,所以`a`的值...

    CSS盒子模型教程PPT课件.pptx

    CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素(图片、段落、单元格等)进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本节主要介绍...

Global site tag (gtag.js) - Google Analytics