`
ZhouGang库鲁卡
  • 浏览: 31291 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS 定位和布局常用标签

 
阅读更多

                                                                定位

   1,定位方式  position    

              static(默认值):对象遵循常规流,toprightbottomleft等属性不会被应用;

              relative:对象遵循常规流  toprightbottomleft等属性会被应用,在应用时 他的偏移不会影响流中任何元素;

              absolut :不遵循常规流,通过用toprightbottomleft等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义。

             center:对象脱离常规流,使用toprightbottomleft等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠,其层叠通过z-index属性定义;

 

 

   2,层叠顺序z-index

         auto:遵从其父对象的定位

         <integer>:用整数值来定义堆叠级别。可以为负值。      

        注:这个值必须是在对象脱离常规流是才会生效

 

   3,top  right  botton left

 

 

                                                        布局

 

 1,display   设置对象是否显示 该如何显示

                     如果该对象隐藏,那么不会为该对象预留物理区域;

 

 2,设置对象是否显示 visibility   

                      visible:设置对象可视

                 hidden:设置对象隐藏                 collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
                  注:如果影藏对象   那么还会为对象预留物理空间

 3,folat  设置浮动

               none:设置对象不浮动

               left:设置对象浮在左边               right:设置对象浮在右边 

 4,浮动控制器 clear

                none:允许两边都可以有浮动对象

                both:不允许有浮动对象                left:不允许左边有浮动对象                right:不允许右边有浮动对象          注:用来设置folat是否有效的

5,用来设置高和宽超过指定尺寸时的处理方式  overflow        

visible:不剪切内容。
hidden:将超出对象尺寸的内容进行裁剪,将不出现滚动条。
scroll:将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto:在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
no-display:当内容不适合当前内容盒子时,整个盒子将被移除,类似display:none。
no-content:当内容不适合当前内容盒子时,整个内容被隐藏,类似visibility:hidden。 

                                                   常用标签margin外部距离   padding内部距离  border边框(宽度  样式  颜色)

分享到:
评论

相关推荐

    非常全面的css布局标签

    首先,我们来看DVI+CSS中的常用布局标签: 1. **头(header)**:通常包含网站的logo、顶部导航等元素。 2. **内容(content/container)**:页面的主要内容区域。 3. **尾(footer)**:页面底部,通常包含版权...

    CSS+div布局常用用法

    `div`标签是HTML中最常用的标签之一,常被用来作为容器,通过CSS进行样式设置和布局调整。 #### 二、浮动布局(Float) **1. 浮动的基本概念** - **取值**:`none`、`left`、`right` - `none`:默认值,对象不...

    文档里面是一些DIVCSS布局大全,Css_div_常用CSS标签及属性等

    在这个名为“Css_div_常用CSS标签及属性等”的文档集合中,我们可以期待找到关于这两个主题的深入学习材料。 首先,让我们详细了解一下`DIV`。`&lt;div&gt;`元素是HTML中的一个块级元素,意味着它会自动占据一整行,可以...

    前端常用布局模板39套,纯CSS实现布局

    接下来,传统的CSS布局方式,比如float浮动布局、position定位布局,虽然在响应式布局中的使用频率有所下降,但在一些特定的布局需求中,它们依然扮演着重要角色。例如,float布局非常适合处理图文混排的情况,而...

    css+div布局源码模板

    2. 定位布局:利用CSS的position属性(static、relative、absolute、fixed),可以精确控制Div的位置,适合多列布局和复杂页面结构。 3. 浮动布局:使用float属性(left、right),使元素脱离正常文档流,实现左右...

    html常用的标签和css

    HTML(HyperText Markup ...综上所述,HTML和CSS是网页设计的核心,熟练掌握这些基本标签和CSS规则能帮助你构建出美观且功能丰富的网站。在实际应用中,还可以结合JavaScript进行交互式设计,为用户提供更好的体验。

    html和css 常用

    2. 移动端布局方法包括Flex布局、定位布局等。 3. CSS3中的多列布局可以用来实现多栏布局效果。 4. Ppi和dpi是衡量屏幕密度的指标,影响设计的缩放。 5. CSS3中的渐变包括线性和径向渐变,可以用来创建美观的背景...

    使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx

    在开发商业网站时,HTML(超文本标记语言)是构建网页结构的基础,而CSS(层叠样式表)则用于美化和布局这些结构。本课件主要讲解了如何使用HTML进行有效的网页布局,以及布局中的一些关键CSS属性。 首先,布局的...

    很漂亮的css布局 CSS大集合

    2. **定位机制**:CSS的定位包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认状态,而相对、绝对和固定定位则允许元素相对于其正常位置或特定父元素进行偏移。 3. **Flexbox布局**:Flexbox是一...

    HTML+CSS布局、规范、兼容

    规范方面,为确保不同浏览器下的兼容性,建议统一定义常用标签的默认属性,可以通过引入一个基础样式文件(如base.css)来实现。使用DOCTYPE声明可以确保文档按标准模式解析。指定文档的语言和字符集,确保内容正确...

    CSS网站布局实录 (第二版)PDF版

    第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么 3.1.2 如何使用div 3.1.3 理解div 3.1.4 并列与嵌套div结构 3.1.5 使用合适对象来布局 3.2 一列固定宽度 3.3 一列宽度自适应 3.4 二列固定宽度 3.5 二列宽度...

    CSS+DIV常用方法说明

    ### CSS+DIV常用方法说明:理解布局与标签的精髓 #### 概述 在现代网页设计中,CSS(层叠样式表)与HTML中的`&lt;div&gt;`元素是构建页面布局和样式的基石。通过合理利用CSS与`&lt;div&gt;`,可以实现响应式设计、灵活的网格...

    变幻之美-DivCSS网页布局揭秘(案例实战篇)案例源码

    Div,全称是Division,意为“分隔”,是HTML中的一个常用标签,用于对网页内容进行区域划分和布局。Div元素本身无特定样式,但可以通过CSS(Cascading Style Sheets,层叠样式表)进行样式设置,实现丰富的视觉效果...

    CSS网站布局实战源代码

    CSS,即层叠样式表(Cascading Style Sheets),是用于控制网页元素样式和布局的重要工具。在这份实战教程中,你将有机会深入理解如何利用CSS来创建美观且响应式的网站布局。 首先,我们需要了解CSS的基本概念。CSS...

    CSS+DIV布局教程

    随着对CSS的深入理解和实践,可以添加更多复杂的样式和布局技巧,如浮动、定位、响应式设计等,以适应不同设备和屏幕尺寸。 总的来说,CSS+DIV布局提供了强大的网页设计能力,让设计师能够自由地组织和调整网页元素...

    Css+div 常用CSS标签及属性.pdf

    这些基本的CSS标签和属性构成了CSS的核心概念,通过它们,开发者可以实现丰富的网页设计和布局控制。了解并熟练掌握这些属性,对于创建美观、响应式且易于维护的网页至关重要。在实际应用中,还应考虑浏览器兼容性和...

    仿QQ空间采用Div+CSS布局

    Div(Division)是HTML中的一个标签,代表“分组”,常用来进行网页布局,通过设置不同的div,可以将网页内容划分为多个区域,如头部、主体、侧边栏和底部等。CSS(Cascading Style Sheets)则负责定义这些div的样式...

    div+css的各种布局参考

    - **CSS选择器**:了解如何选择和操作元素,如类选择器、ID选择器、标签选择器、后代选择器、伪类等。 - **盒模型**:理解盒模型的组成部分,包括内容(content)、内边距(padding)、边框(border)和外边距(margin),...

    css+div布局教育网源码分享

    CSS+Div布局是现代网页设计中常用的一种布局方式,它能够实现灵活、响应式的网页结构,且具有良好的浏览器兼容性。 1. **CSS基础** - 属性:颜色、字体、大小、位置等都可以通过CSS来设置。 - 选择器:ID选择器、...

    div+css布局资料

    这可能包括如何通过CSS定位`div`元素,以及如何调整它们的尺寸、颜色、边距等属性,以实现各种复杂的网页设计效果。 **压缩包子文件的文件名称列表解析** 1. **RGB颜色查询对照表.htm** - 这个文件可能是关于RGB...

Global site tag (gtag.js) - Google Analytics