html div+css 布局
DIV+CSS布局中主要CSS属性介绍:
Float:
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。
<div>实例
文档中的一个区域将显示为蓝色:
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p></div>
所有主流浏览器都支持 <div> 标签。
标签定义及使用说明
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢?
需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。
首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。
实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px,边框为红色。以便我们观察效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div水平居中演示 www.</title>
<style>
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释:为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<div class="div">
DIV水平居中显示CSS实例
</div>
</body>
</html>
提示:<div> 元素经常与 CSS 一起使用,用来布局网页。
注释:默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况。
HTML 4.01 与 HTML5之间的差异
HTML5 中不支持 align 属性。
在 HTML 4.01 中,align 属性 已废弃。
属性
属性 | 值 | 描述 |
---|
align | left right center justify | HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。 |
<div> 标签支持 HTML 的全局属性。
<div> 标签支持 HTML 的事件属性。
HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
标签 描述
<div> 定义文档中的分区或节(division/section)。
<span> 定义 span,用来组合文档中的行内元素。
如何给div加一个边框border样式的八种方法
一、虚线与实线边框
边框虚线样式:dashed
边框实现样式:solid
border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框
border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框
二、对div上边加边框
我们给div上边加1px黑色边框
div{border-top:1px solid #000}
三、给div底部加边框
给div盒子底部加2px虚线红色边框
div{border-bottom:2px dashed #f00}
四、在div盒子左侧加边框
给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框
.divcss5{ border-left:1px solid #00f}
DIV代码:
<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>
五、在盒子div右侧加边框
div对象右侧加1px红色实线边框
div{ border-right:1px solid #f00}
六、在盒子上下加边框
给盒子上下加1px实现黑色边框
div{border-top:1px solid #000;border-bottom:1px solid #000}
七、给div盒子左右加边框
给盒子左右加2px虚线绿色边框
div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
八、给div四边加上一个边框
给一个DIV四边加上3px实现黑色边框
div{ border:3px solid #000}
以上是如何给一个div加边框,各种加边框样式方法教程。根据需要对选择器进行重新命名,即可使用class或id在html的div引入调用,灵活运用并掌握对一个对象加边框样式方法。