div的css属性（救命，如何用js给div标签添加css属性，当鼠标事件发生的时候，譬如点击某个元素）

本文目录

• 救命，如何用js给div标签添加css属性，当鼠标事件发生的时候，譬如点击某个元素
• css中给div加风格属性时，什么时候需要制定宽和高
• CSS的哪些属性可以定义div的大小及在网页里的位置
• css中div的用法
• div里的css属性不对里面的子元素生效及相关问题
• DivCSS小结：浏览器默认HTML的CSS样式属性

救命，如何用js给div标签添加css属性，当鼠标事件发生的时候，譬如点击某个元素

需要准备的材料分别有：电脑、html器、浏览器。

1、首先，打开html器，新建html文件，例如：index.html，编写问题基础代码。

***隐藏网址***

2、在index.html中的《script》标签，输入js代码：$(’div’).click(function(){$(this).css(’color’,’blue’);});。

***隐藏网址***

3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。

***隐藏网址***

css中给div加风格属性时，什么时候需要制定宽和高

这样说吧：
div在不设定长宽的情况下，以及不设定position:absolute、fixed或者float的情况下
默认display:block，即宽度 width:100%;高度 height:auto ；
而设定了position:absolute、fixed或者float的情况下
宽度就会变成 width:auto 了。
而你所说的什么时候需要制定高度和宽度，主要还是要看页面效果的需求。
例如你想div的宽度继承父元素的宽度，那就width:100%，或者不设定
例如你想div的高度规定100px，超出范围的都看不见，那就height: 100px;overflow:hidden
如果还是不清楚的话，多点去看别人的布局和样式，慢慢积累经验吧~百度不错可以看看

CSS的哪些属性可以定义div的大小及在网页里的位置

《div style="width:100px;height:100px;position:absolute;z-index:99; top:0; left:0; right:0; bottom:0;margin:1px 3px 4px 5px"》《/div》
width：长度
height：高度
需要用到定位的时候，必须设置position属性。
position：位置（absolute绝对位置，相对于body）
z-index：深度。
margin:距离。其实基本大部分的标签都可以用来调整位置。
设置后上述两样属性后，就可以用left,top,bottom,right来定位了。
left:0; //在最左边；
right:0;//在最右边；
top:0;//在最上面；
bottom:0;//在最下面；
罗嗦几句，如果要做一个永远居底的div，其实不需要JS代码，只需要用bottom:0;就可以了。
4个属性里面，一般一次只会用两个。
如：左上角：
left:0;top0;

css中div的用法

DIV本身就是容器性质的,不但可以内嵌table还可以内嵌文本和其它的HTML代码；CSS是CascADIngstyleSheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页数的网页的外观和格式。

Div+CSS标准具有以下优点:
1、因为采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。

2、结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。

3、兼容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。

4、缩短改版时间，因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

5、强大的字体控制和排版能力，CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。

6、提高易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7、更好的扩展性。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint等。

8、更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。

9、表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。

10、更方便搜索引擎收录，并获得更高的评价。用只包含结构化内容的HTML代替嵌套的标签，主次分明，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

11、Table表格布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli......

12、Table表格布局中，垃圾代**很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

13.以前一些必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

div里的css属性不对里面的子元素生效及相关问题

首先，不知道你的预期效果是什么样的，针对你给出的样式：
div li{list-style:none;display:inline;margin:7px}
a{text-decoration: none;}
说明一下：
第一条，规定了 所有 div 下的 li的样式，即 不显示图标，显示为内联样式不换行，外边距7px。
第二条，规定了 所有超级链接内的文本样式，这里为无样式。
针对你说的“没有达到预期效果，display:inline只对第一个子元素li有效果，list-style:none则对下面所有li起了作用，text-decoration:none也只有在css里标出a标签后起了效果，个人认为和继承有关”
css样式的规则是这样的，你规定到了什么级别就对什么级别的HTML标签起作用。比如 你写的 div li{}表示规定 HTML中所有div下面的li的样式。a{}表示规定 HTML中所有超级链接的样式。
《ul》表示无序列表 《ol》表示有序列表，按照规定li 就应该是在ul ol 的，浏览器对HTML标签是有纠错机制的，即便你再HTML中写错部分标签，HTML也会容错正常显示。

DivCSS小结：浏览器默认HTML的CSS样式属性

这个“浏览器默认HTML的CSS样式属性”，在你需要还原默认值的时候，比较有用。开始的时候应用通配选择器 *{margin:0;padding:0;}，当需要使用边距的时候，就需要还原HTML默认CSS值了。
但通配选择器在大型网站的构建中，影响性能，可以参考的相关文章，大家还是需要谨慎一些。
以前一直在找这份文档，今天偶然在w3上看到了。除了inline和block的定义，主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式（margin和font-size）。
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h3, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h3 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h3, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
**all, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
center { text-align: center }
abbr, acronym { font-variant: **all-caps; letter-spacing: 0.1em }
/* Begin bidirectionality settings (do not change) */
BDO { direction: ltr; unicode-bidi: bidi-override }
BDO { direction: rtl; unicode-bidi: bidi-override }
* { direction: ltr; unicode-bidi: embed }
* { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h3, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }