CSS中*和body有什么区别

最新推荐文章于 2023-12-19 14:29:48 发布
最新推荐文章于 2023-12-19 14:29:48 发布
阅读量1k 收藏 2
点赞数
分类专栏： 初识前端

转自：http://www.softwhy.com/forum.php?mod=viewthread&tid=4758

CSS中*和body有什么区别:

建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色。在CSS文件中*是通配符选择器，它可以选择文档中所有的元素，也就是说是一个通杀选择器。body是一个普通的类型选择器，只能够选中body这么一个元素。而之所大家会感觉到*和body选择器有时候作用是相同的，主要是因为body是绝大多数布局元素的父元素，如果元素的CSS属性居有继承性的话，那么两者的效果确实一样。例如:

[CSS] 纯文本查看 复制代码

1

2

body{font-size:12px;}

*{font-szie:12px;}


以上两个代码的作用是完全一样的，因为font-size是居右继承性的。但是大家还是要明白它们的原理是不一样的，*选择器确实是选择了每一个元素并且把它们的字体大小设置为12px，body则是通过继承将字体设置为12px的。
建议:
在很多CSS页面的开头都有这么一句代码:

[CSS] 纯文本查看 复制代码

1

2

3

4

*{

  margin:0;

  padding:0

}


因为很多元素都有默认的内边距或者外边距，例如body、ul、p和标题元素h1-h6等。使用以上代码可以很轻松的清除所有元素的外边距和内边距，但是也会带来问题。例如:

[HTML] 纯文本查看 复制代码运行代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

*{

  margin:0px;

  padding:0px;

}

input{height:40px;}

</style>

</head>

<body>

<input type="text" name="mytest" />

</body>

</html>


以上代码可能会造成在一些浏览器中文本框输入的文字显示在左上角，并不是所以浏览器都这样。建议还是使用以下方式来统一定义样式：

[CSS] 纯文本查看 复制代码

1

2

3

body,ul,h1,h2,h3,h4,h5,h6,form,dl,p{

  样式代码

}

低调奋进
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈html和body标记应用CSS
09-27
在CSS中，针对`<html>`和`<body>`的样式应用有以下几点需要注意： 1. **优先级**：通常，直接应用在`<body>`上的样式会比应用于`<html>`的样式更具有优先级，除非使用了更具体的选择器或更高的优先级（如ID选择器、...
CSS 表单元素不继承body的字体属性
09-25
在CSS（层叠样式表）中，样式通常会遵循继承的规则，这意味着子元素可以从其父元素继承某些样式属性，例如字体、字号和颜色。然而，这种继承并不是万能的，尤其是在涉及到表单元素时。标题提到的问题"CSS 表单元素不...
CSS里定义body{ }和定义*{ }的区别
guorun18的专栏
12-04 3561
* {  margin: 0;  padding: 0;  border: 0;  }  body {  background: #CCC;  padding-top: 20px;  text-align: center;  } * 代表所有元素  所以对*设置了属性 也就是对xhtml标签的所有元素设定了属性  而body只是一个标签  但是他是结构标签的开始 
css样式表定义时*与body的区别
weixin_30505225的博客
04-21 147
css样式表定义时*与body的区别 今天看到有人问*和body的区别，大家的回答莫衷一是，下面就我对这两个的理解谈论一下用法。 首先看一下正解： 通配选择符 语法：* {sRules} 说明：选定文档目录树（DOM）中的所有类型的单一对象 类型选择符 语法：E {sRules} 说明：以文档语言对象(Element)类型作为选择符 大家在做网站时，规划样式表许多朋友首先会用*{margin...
CSS Body
无序代码
01-25 1318
1.xhtml下滚动条的颜色问题？在原来的html的时候，我们可以这样定义整个页面的滚动条body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/  scrollbar-highlight-color:#fff; /*- 左二 -*/  scrollbar-face-color:#E4E4E4; /*- 面子 -*/  scrollbar-arrow
css代码body＞*是什么意思
wangyining070205的博客
02-13 3291
今天学习前端的时候，发现body>*这样一个选择器,详细代码如下。我大概知道它的作用，但是不太确定，想从网上搜个现成的答案，百度了一下居然没找到，只好按照自己的理解写一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>子代选择器</title> <style type="text/css">
CSS全局声明*与body的区别
weixin_30871293的博客
08-21 312
　　通常在写CSS前，为了保证兼容性及展示效果的一致，先会清除浏览器默认样式。此时有两种用法比较常用：1、*{}; 2、body{}; 　　之前我比较偏好于用*{}，比较便于把控样式的设置。一直也没试过body{}，所以对body不太了解。今天简单一试，发现了两者的区别。 　　简单讲就是——*{}将更改应用于HTML结构中的所有元素，而body{}仅是更改了body层的默认属性。从继承角度讲...
css body背景图全屏不论分辨率大小
09-25
在CSS中，要实现body背景图全屏且适应不同分辨率的屏幕，通常会采用不同的方法。其中一种简单而有效的方法是通过设置一个嵌套在body内的img元素，并利用CSS的定位属性来达到全屏效果。这种方法的核心在于设置img元素...
css设置body背景图片满屏的实例代码
09-24
主要介绍了css设置body背景图片满屏的实例代码,需要的朋友可以参考下
html中的body是什么,CSS中的“body”*是什么意思？
weixin_33242934的博客
06-15 988
我想了解jQTouch实现的CSS效果.http://www.jqtouch.com/它有一些CSS定义包含语法,如“body> *”body > * {-webkit-backface-visibility: hidden;-webkit-Box-sizing: border-Box;display: none;position: absolute;left: 0;width: 10...
css中* html>body 是什么意思？
weixin_30721077的博客
05-31 357
>是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2比如说:body > p{color:red;}<body><p>内容</p><div><p>内容</p></div></body>只有第一个匹配,第二个P是DIV的下级,因此是BODY的孙级,就不匹配了 *是通用选择符,匹...
html body是什么,[网页设计]css中* htmlbody 是什么意思
weixin_28987735的博客
06-15 516
[网页设计]css中* htmlbody 是什么意思0 2012-04-20 21:00:06">"是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2比如说:body > p{color:red;}内容内容只有第一个匹配,第二个P是DIV的下级,因此是BODY的孙级,就不匹配了 *是通用选择符,匹配文档中的任何元素 比如说:body * ul{color:gray;...
css中.号、#号、*号都是什么意思，通俗易懂系统讲解
最新发布
我真的睡不够
12-19 1699
号是标签都遵循的统一样式，这个不难理解。下面总结#和.的区别和用法，通俗易懂的说，#对应id，.对应class不加对应html 标签，id优先大于class。Class与ID的区别一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线， 你可以通过CSS，Javascript等来使用这个类。
前端进阶-个人笔记-CSS基础知识
树上骑个猴的博客
12-12 196
CSS属性的继承： 元素的一些CSS属性是有继承关系的，有继承关系的属性被称为可继承属性。color属性就是一个可继承属性。还记得前面的课程里我们说过HTML文档结构是树状结构，元素之间有嵌套关系。可继承属性是指如果我们在外层元素上设置了这个样式属性，内层没有设置该属性的元素都会自动继承该属性。比如我们给body设置了color为白色，它内层的h1、h2、p、em等标签我们没有设置color，但是它们自动继承了body设置的color，于是也成为了白色。 与之不同的是，不可继承属性是指设置在外层元素的属性不
css选择器是什么？css选择器有哪些类型？
热门推荐
sc13647346287的博客
10-15 1万+
css选择器在css的学习中无疑是十分重要的，所以，什么是css选择器？css选择器有哪些类型？这是我们必须要掌握的，本篇文章将给大家来介绍关于css选择器的基本定义，以及css选择器有哪些类型。 我们话不多说，直接进入正题~~ css选择器是什么？ 在百度百科中，我们可以看到css选择器的基本定义是：每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{...
CSS —— 继承body 确保最高优先级
永远的北极光
10-19 1430
样式优先级：内联>内部css>外部css. 知道这还不够，有时样式较多时，从某个样式class 中定义某个元素或类的样式，可能没效果，最简单粗暴的方法：直接继承body，如使用layui的layer时，要修改默认按钮的样式，css可如下设置，之后通过skin 属性使用layer-ext-yourskin： /* 通过body前缀，是为了确保你皮肤的优先级 你可以通过调试工具重置更多样式
css 设置body的最小高度是100%，满屏显示
weixin_42896278的博客
02-20 1万+
解决问题： 1.body里的内容不满一屏时，body的高度满屏； 2.当内容超出屏幕高度时，内容的高度就是body的高度。 方法一：没有设置body的高度，内容不满屏，但是背景色却铺满整个屏幕，方法如下： html {} // html不设置背景色 body { background: pink; } *注：可是为什么我们在写项目的时候，却并没有达到这个效果，而是内容多高，body背景就是多高...
body{},和.body{}的区别
RK
12-24 1369
一个是html标签<body>; 另一个是类body,也就是.body;比如<div class="body"></div> .body{}是一个类。只有引用class="body"时才有效（如<div class="bocy">）. 而body{}则不需要引用。只要页面中有<body>这个标签就有效！ 效果是这样的 要是写成.body{} 效果就是 ...
css样式 relative 和absolution 有什么区别
06-13
在CSS中， `relative` 和 `absolute` 是定位属性，它们的主要区别在于它们相对于谁进行定位。 `relative` 定位是相对于元素本身原来的位置进行定位，可以使用 `top`、`bottom`、`left`、`right` 属性进行微调。 `absolute` 定位是相对于最近的已定位父级元素（已定位的元素是指 `position` 属性值为 `relative`、`absolute` 或 `fixed` 的元素）进行定位，如果没有已定位的父级元素，则是相对于文档的 body 元素进行定位。 所以，相对定位元素仍然占据着文档流中的位置，而绝对定位元素不占据文档流中的位置，可以覆盖其他元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值