div p 等标签的宽度和高度问题

div p 等标签的宽度和高度问题

  (2013-01-13 01:31:23)
标签: 

杂谈

分类: viewTech

想用一个div 把整个页面填充,代码会怎么写???

 

标题

 

Hello

 测试


 

用浏览器查看后,效果不是想要的,高度没有100%???

是浏览器兼容问题???

试了其他浏览器,结果一样,还是不行。

 

这个p标签的100% 是相对其父元素的,如果设置了body的宽度和高度以后,应该就没有问题了。

结果效果有点像了,但还是没有达到要求,这是因为在ie中默认情况下,

body 元素的margin属性有一个默认值,再给 body加上margin:0px 就好了。

 

这里贴出常见浏览器中一些默认的属性值:

 

浏览器默认样式

1.页边距
IE默认为10px,通过body的margin属性设置
FF默认为8px,通过body的padding属性设置
要清除页边距一定要清除这两个属性值
body {
   margin:0;
   padding:0;
}

2.段间距
IE默认为19px,通过p的margin-top属性设置
FF默认为1.12em,通过p的margin-bottom属性设
p默认为块状显示,要清除段间距,一般可以设置
p {
   margin-top:0;
   margin-bottom:0;
}

3.标题样式
h1~h6默认加粗显示:font-weight:bold;。
默认大小请参上表
还有是这样的写的
h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
h6 {font-size:x-small;}
个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,
要清除标题样式,一般可以设置
hx {
   font-weight:normal;
   font-size:value;
}

4.列表样式
IE默认为40px,通过ul、ol的margin属性设置
FF默认为40px,通过ul、ol的padding属性设置
dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
要清除列表样式,一般可以设置
ul, ol, dd {
   list-style-type:none;
   margin-left:0;
   padding-left:0;
}

5.元素居中
IE默认为text-align:center;
FF默认为margin-left:auto;margin-right:auto;

6.超链接样式
a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置
a {
   text-decoration:none;
   color:#color name;
}

7 鼠标样式
IE默认为cursor:hand;
FF默认为cursor:pointer;。该声明在IE中也有效

8 图片链接样式
IE默认为紫色2px的边框线
FF默认为蓝色2px的边框线
要清除图片链接样式,一般可以设置
img {
   border:0;
}

 

JavaSwing_1.1: FlowLayout(流式布局) FlowLayout,流式布局管理器。按水平方向依次排列放置组件,排满一行,换下一行继续排列。 阅读详情

相关推荐

<Verilog实现除法器> Verilog实现牛顿-拉夫逊(Newton-Raphson)除法器

阿斯顿阿斯顿啊啊是打发士大夫

IC跳跳鱼的博客 3585

p标签设置宽高问题

1、代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl

极客鼠之家 5333

S32K314 EB配置MCAL全模块讲解【Autosar——1 MCU模块详解】持续更新中

FIRC(fast internal RC Oscillator) :高速内部时钟,固定48MHZ;SIRC(Slow Internal RC Oscillator):低速内部时钟,固定32KHZ;FXOSC(Fast Crystal Oscillator Digital Controller):高速外部晶振(8-40MHZ),根据原理图选型进行配置;SXOSC():外部低速外部时钟,固定输入32.768KHZ;PLL_PHIn_CLK:时钟倍频锁相环时钟范围(640-1280MHZ);

qq_40488886的博客 1779

别再只用快排了!当数据范围集中时,试试这个O(N)的排序神器——计数排序

本文深入探讨了计数排序在数据范围集中时的高效应用,对比传统比较排序算法,计数排序能以O(N)的时间复杂度显著提升性能。通过详细解析核心原理、实现策略及性能实测,帮助开发者掌握这一非比较排序神器,适用于整数数据集排序等场景。

weixin_30872157的博客 1004

【计算机三级-数据库技术】操作题大题(第1套)

从触发器的语法中可知,【1】处应该填写的是执行触发器的表,【2】处应该填写指定在表或视图上执行哪些数据修改语句时将激活触发器的关键字。使用FOR或AFTER选顶定义的触发器为后触发器,即只有在引发触发器执行的语句中的操作都已成功执行,并且所有的约束检查也成功完成后,才执行触发器。转换成新的独立的模式,模式的属性由联系本身的属性及两个实体的键构成,主键由两端实体的键组合而成。实体的转换:在从ER图转换为关系模式时,一个实体转换成一个关系模式,实体的属性就是关系模式的属性,实体的键就是关系的主键。

放纵小开爱的博客 1101

J204B接口数据链路的建立

介绍J204B数据链路层的建立方式

QUACK_G的博客 6546

div中多个p标签设置的宽高计算过没有超过父级元素的宽高,却依然超出?

在做一个商品介绍的页面时,分成上图下字两个模块,在下面的模块中要输入三段样式不同的文字,采用三个p标签,外面套一个div父级的方式,给div设置一个尺寸,给三个p标签设置好样式,并且加起来的宽高不会超过父级的寸,理想状态如图 但实际上却是这样 明明尺寸计算没问题,但是还是超出了父级的范围,在网页检察元素后发现p标签默认下边距16px,因此只要选中所有出现问题的p标签,再给他们设置“margin-bottom:0px;”就可以了。 ...

qq_45865796的博客 720

Flink实战项目——城市交通实时监控平台

本项目是与公安交通管理综合应用平台、机动车缉查布控系统等对接的,并且基于交通部门现有的数据平台上,进行的数据实时分析项目。

yangwei2048的博客 836

p标签内限制显示内容详解汇总

今天总结一篇关于p标签内限制显示内容长度的文章,如有新方法,新思路,欢迎留言 先看看p标签内的显示效果 前两个显示设置了p标签的宽度,后一个不显示设置宽度,因为p标签是块状元素,默认是父容器宽度的100% 以上可了解到,在设置了标签宽度,并且标签内元素超过宽度限制的情况下,内容会自动换行。本次想讲的是第二种情况,将超出文本宽度的内容设置为三个点的省略号。 一、CSS 方法 单行省略 #p1...

weixin_39590507的博客 4072

虚拟机安装VMware Tools

单击虚拟机-->安装VMware Tool 安装之后会有一个VMware Tools硬盘,里面有VMware Tools.tar.gz的压缩包 按照提示解压它,然后执行vmware-install.pl安装VMware Tools 将安装包放到/tmp目录下。可以直接拽过去,也可以使用cp或者mv命令 进入tmp文件目录并解压此文件包 cd /tmp ...

afei001 619

全网最全-DA14531-全球最小-BLE从入门到精通开发教程

本教程主要适用于低功耗产品,DA14531它体积小,非常适用于对体积敏感的设备,如无线可穿戴、传感器、助听器等设备。本文经过作者发大量时间来记录开发项目的调试方法,里面有许多笔者开发心得体会,旨在让读者工程师快速上手,减少摸索时间,提高软件质量。读者对象本文档主要适用以下工程师:嵌入式系统工程师单片机软件工程师IOT固件工程师BLE固件工程师。

hejinwu1314的博客 5137

浏览器的兼容性问题

浏览器的兼容性问题 分类: Web前端 2012-12-21 20:21 1636人阅读 评论(0) 收藏 举报 兼容性浏览器 1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;} 2. 水平居中的问题 问题: 设置 text-align: center ie6-7文本居中,嵌套的块元

云曦沥雨 1276

【深度学习基础】多任务学习(Multi-Task Learning)

多任务学习(Multi-task learning)是和单任务学习(single-task learning)相对的一种机器学习方法。在机器学习领域,标准的算法理论是一次学习一个任务,也就是系统的输出为实数的情况。复杂的学习问题先被分解成理论上独立的子问题,然后分别对每个子问题进行学习,最后通过对子问题学习结果的组合建立复杂问题的数学模型。多任务学习是一种联合学习,多个任务并行学习,结果相互影响。一次只学习一个任务(task),大部分的机器学习任务都属于单任务学习。

十二月的猫 1万+

2-26

 1. table的border属性和border样式     两者的区别是:     (1) border属性会为外边框和内边框都加上格线,而border样式则只会为外边框加上格线,这也提供了一个小技巧,因为很多时候,为了美观起见,内部的格线是不需要的,这样设置的话,就不需要每个td都设置了。     (2) 应该养成这样一个习惯,就是在设置border样式时,应该一次性设置3个参数

Cupid1984的专栏 526

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

html兼容模式下不显示图片,HTML邮件兼容问题与解决方案

问题描述:今天给后端同学写了一个邮箱发送页面,由于之前没有这方面的经验,很多标签都是用最新的H5标签,样式也是很多C3样式,当时还考虑到IE低版本的兼容性,谁知道在浏览器中显示正常,在移动端显示就好像没有引入样式一样,反复查看代码感觉没啥毛病,最后在网上S了下,才焕然大悟。原来HTML 邮件内容虽然也是 HTML,但是和我们在网页上使用的 HTML 不同,因为安全原因,各大邮箱服务商及邮件客户端都...

weixin_39984442的博客 1161

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

html中的div标签的含义和应用

CSS是DHTML的基础,CSS用于设定HTML元素在页面上的显示风格,而CSS-P则是CSS的一个扩展,它可用来控制HTML元素在网页上或者说在窗口的位置。下面的两个链接提供了CSS和CSS-P详尽的技术手册:   W3C CSS-Positioning   Builder.coms CSS Guide   在本课程中,将会反复地对CSS进行介绍。   使用DIV标

雨中怡然 3万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

p 标签里面不能嵌套 div 标签

p 标签里面不能嵌套 div 标签 开头先放大加粗的展示这句话 作为一名半专业的切图仔,怎么能够犯如此低级的错误?? 某日… 正常搬砖中,突遇一奇葩问题,尝试各种方案均试无法解决 大致情况如下(JSX): ... <p className={styles.item1}> <span>Item1</span> <Component1 /> &...

He Manyuan 2929

问题 - li 标签无法设置宽度和高度

li 标签无法设置宽度和高度 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>图片相册</title> </head> <body> <!-- 首先将HTML结构搭建起来 --> <img class="bigImg" src="./imag

Nshrod的博客 7166

p标签在div中居中

在css标签内,再使用text-align属性设置div里面内容的居中方式,例如,这时设置为center居中方式。在css标签内,通过class设置div标签的样式,定义它宽度为200px,高度为100px,背景颜色为灰色。新建一个html文件,命名为test.html,用于讲解如何在css中让div中的p标签居中。在test.html文件内,在div内,使用p标签创建一行文字,用于测试。在test.html文件内,设置div标签的class属性为mydiv。

fury的博客 1253

span和div的区别是什么?

div和span的区别是:div标签是块级元素,每个div标签都会从新行开始显示,占据一行;div标签内可以添加其他的标签元素(行内元素、块级元素都行)。而,span标签是行内元素,会在一行显示;span标签内只能添加行内元素的标签或文本。 在html页面布局时,我们经常会使用到div标签和span标签,那么div标签和span标签之间有什么区别?本篇文章就给大家介绍div标签和span标签之间的区别,希望对你们有所帮助。 HTML div标签 div标签是块级元素,拥有块级元素的特点。每

Obito_TXP的博客 2万+

CSS高度和宽度

CSS假定每个元素都会生成一个或多个矩形框,这称为元素框,各元素框中心有一个内容区。内容区周围有可选的内边距、边框和外边距。如下图: 注:1. 元素背景显示的区域是 内容区+内边距 ** 2. 边框和内边距的宽度不能会负值,外边距可以为负值** 术语: 正常流:传统的HTML文档的文本布局,文本从左向右,从上向下显示。大多数元素都在正常流中,要让一个元素不在正常流中,唯一的办法就是使之成为浮...

fangjuanyuyue的专栏 2063

CSS单元的位置和层次-div标签

  我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化。  而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性,你可以精确地设定要素的位置,还能将定位的要素叠放在彼此之上,还有...还有......你自己慢慢看吧!  Cascading Style

Henry的专栏 1759

CSS宽度和高度

CSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。

2401_82561004的博客 2364

Bootstrap的宽度和高度的设置(相对于父元素的宽度和高度、相对于视口的宽度和高度)

Bootstrap的宽度和高度的设置(相对于父元素的宽度和高度、相对于视口的宽度和高度)

昊虹AI笔记 2610

HTML中p标签与div标签与span标签的区别

4、div与p都独占一行的块元素标签,唯一区别就是p自带有margin-top和margin-bottom属性值,而div俩个属性值都为0,也就是p标签之间有一定的间距,而div没有。3、span标签是行元素,行元素不能直接设置它的宽度和高度,它会随着内容撑开宽度和高度。2、p是段落标签,布局文章标签,自带间隔一行的间距,可以设置宽和高,也可消除上下间距。1、div是布局框架标签,大小结构布局均使用div布局。

weixin_59883636的博客 2520

第九章DIV+CSS布局

div标签在Web标准的网页中使用非常频繁,属于块状元素。div标签是双标签,即以<div></div>的形式存在,中间可以放置任何内容,包括其他的 div标签。但是在没有CSS 的影响下,每个div标签只占据一行,即一行只能容纳一个div标签。

2403_87158639的博客 2273
上一篇: html checkbox 文字自动换行
下一篇: jquery 检测浏览器
chenweishaoxing
博客等级 码龄19年 35粉丝 1332原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值