`

div常用功能

    博客分类:
  • html
阅读更多

div常用功能

 

1,如何设置div居中

用上级的text-align: center然后嵌套一层DIV来解决问题

对需要水平居中的DIV层添加以下属性:

margin-left: auto;

margin-right: auto;

 

       或者margin:0px auto;

 

2,div横向排列

     1,对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

<html>
  <head>
    <style>
      #div1{float:left}
      #div2{float:left}
      #div3{float:left}
    </style>
  </head>

  <body>
    <div id="div1">第1个div</div>
    <div id="div2">第2个div</div>
    <div id="div3">第3个div</div>
  </body>
</html>

     2,使用css display同行显示(参照http://www.divcss5.com/wenji/w472.shtml

 

3,div内文字溢出控制

    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

 

 

 

这样一来文字就将不会溢出超出设置固定的高和宽区。

 

说明:

 

Overflow是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

 

Overflow语法: 

 

overflow : visible | auto | hidden | scroll

 

Overflow参数: 

 

visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效

 

auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

 

hidden :  不显示超过对象尺寸的内容

 

scroll :  总是显示滚动条

 

4,div内文字居中

文字水平居中:

先设置宽度,再设置text-align:center;

文字垂直居中:

先设置高度(100px),再设置line-height:100px;

 

分享到:
评论

相关推荐

    CSS+DIV常用方法说明

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

    常用的div+css模板

    本主题“常用的div+css模板”旨在提供一种快速、高效地构建网页界面的方法,帮助设计师和开发者节省时间,提高工作效率。 首先,让我们理解一下`div`标签。`&lt;div&gt;`是HTML中的一个通用容器元素,没有特定的语义,但...

    div css js 常用特效打包

    这个压缩包"div css js 常用特效打包"似乎包含了这些技术实现的各种常见特效,方便开发者快速引用和使用。下面我们将深入探讨这三个领域的基本概念以及它们如何共同创建出令人印象深刻的网页效果。 `div` 是 HTML ...

    HTML+DIV+CSS常用网页模板21-40

    这个"HTML+DIV+CSS常用网页模板21-40"压缩包包含了一系列实用的网页设计模板,适合初学者学习和专业人士参考。 HTML(HyperText Markup Language)是网页的基础,它定义了网页的内容和结构。例如,`&lt;head&gt;`标签用于...

    DIV遮罩层 div div

    在网页设计与开发领域,DIV遮罩层是一种常用的UI技术,用于暂时性地遮挡页面的其他部分,从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、加载动画、登录框等场景,能够提升用户体验和界面的...

    div布局软件-主要用于div对网页进行前期的布局

    Div布局,全称为“Division布局”,是HTML中一种常用的布局方法,常用于创建复杂且灵活的网页结构。本篇将详细介绍Div布局的概念、优势以及如何使用Div布局软件进行可视化设计。 **Div布局基础** Div元素在HTML中...

    div模式窗口-div模式窗口

    `div`元素是HTML5中的一个通用容器,它的主要功能是将内容分组,以便应用样式或进行脚本操作。`&lt;div&gt;`标签本身没有特定的语义,但可以通过CSS定义其外观和位置,使其适应各种需求。在网页设计中,`div`通常用来创建...

    div+css排版常用代码下载

    - DIV+CSS是Web前端开发中一种常用的布局方式。其中,“DIV”指的是HTML中的`&lt;div&gt;`标签,它是用于定义文档中的独立区域的一种标签;“CSS”即Cascading Style Sheets(层叠样式表),主要用于定义网页元素的显示...

    DIV+CSS 网页布局常用基础知识

    7. **CSS预处理器**:如Sass、Less等预处理器可以编写更高效、可维护的CSS代码,通过变量、嵌套规则、混合等功能提升开发效率。 8. **浏览器兼容性**:虽然大部分现代浏览器对`CSS3`支持良好,但仍然需要注意不同...

    【JS常用代码】Div层处理

    在JavaScript编程中,Div(Division)层是一种常用的布局工具,用于组织网页内容。Div元素是HTML中的一个块级元素,可以包含其他HTML元素,并通过CSS样式进行定位和设计。本篇将围绕“JS常用代码”中的Div层处理展开...

    前端笔记前端笔记前端笔记前端笔记,一些div居中以及常用的CSS属性

    本篇笔记主要探讨了如何使`div`元素居中以及一些常用的CSS属性,这些都是前端开发者日常工作中不可或缺的基础知识。 一、`div`元素居中方法 1. **margin自动填充**:设置`div`的`margin`为`auto`,可以使其在父...

    DIV布局十大技巧以及DIV盒子模型

    3. **浮动布局**:`float`属性是早期`DIV`布局常用的方法,通过设置`left`或`right`使元素浮动,实现多列布局。但需注意清除浮动避免父元素高度塌陷。 4. **定位布局**:`position`属性(如`relative`、`absolute`...

    div+css实现treeview功能

    而"treeview"功能,即树形视图,是网页界面中常用的一种数据展示形式,尤其适用于组织层次结构清晰的信息,如目录结构、菜单系统或数据库记录等。本教程将详细介绍如何利用div和CSS来实现treeview功能。 首先,我们...

    c# 可以拖动的div

    在这个特定的问题中,它们可能不会直接参与实现可拖动的div功能,但它们确保了整个项目的完整性和功能实现。 总的来说,实现C# web应用中的“可拖动的div”功能,主要是通过HTML、CSS和JavaScript三者的配合。HTML...

    div常用标签

    12. `&lt;img&gt;`用于插入图片,可以通过`border`、`width`、`height`、`vspace`、`hspace`和`alt`属性进行样式和功能控制。`lowsrc`属性在旧版HTML中用于预加载低分辨率图像。 13. `&lt;map&gt;`和`&lt;area&gt;`组合使用创建影像...

    保存网页div块为图片

    首先,`div`是HTML中的一个常用标签,用于定义文档中的分区或节。它通常用于组织页面结构,通过CSS进行样式控制。在保存`div`为图片的需求中,`div`内的内容可能包括文本、图像、链接等各种元素。 要将`div`转换为...

    使用div实现的复选选择控件

    `div`(division)是HTML中的一个块级元素,常用来分组其他元素,提供布局控制。它本身不具备复选功能,但可以通过CSS样式和JavaScript脚本赋予更丰富的交互性。 复选选择控件的核心功能是允许用户多选项目。在HTML...

    常用的css/div

    本文将围绕“常用的css/div”这一主题,深入探讨CSS的基础概念、重要性以及如何有效地利用div元素进行布局。 首先,CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制...

    滚动div,实现动态页面切换功能,实现图书翻页

    在HTML中,div是一个常用的布局元素,可以用来组织网页内容。当我们将div设置为滚动条,用户可以通过滚动查看超出可视区域的内容。在本案例中,我们将利用JavaScript和CSS来扩展这个功能,实现不依赖传统滚动条的...

Global site tag (gtag.js) - Google Analytics