别具光芒Div CSS 读书笔记(一)_html/css_WEB-ITnose
边框(border)、边界(margin)、填充(padding)、背景(background) 是不能继承的。
table 中td不会继承body的属性,因此需要单独指定。
权重
p {color:black;} /*权重为:1*/
p em {color:yellow;} /*权重为:2*/
p .note em .dark{color:gray;} /*权重为:22*/
#main{color: black;} /*权重为:100*/
p{color:red !important;} /*权重为:1000*/
内联样式表(写在标签内的)> 嵌入式样式表(写在文档头部的)>外部样式表(写在外部文件中的)。
元素分类
块级元素(display: block): 标题 h、段落 p、表格 table、层 div、body
内联元素:(display:inline):a、em、span
列表项:(display:list-item):li
隐藏元素:(display:none)
盒模型
每个HTM元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离叫“填充(padding)”盒子本身有边框(border),而盒子边框和其它盒子之间,还有“边界(margin)”
一个元素的实际宽度为=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
注意事项:
1,margin值可以为负,各浏览器支持不同。
2,border默认样式为不显示(border-style:none)。
3,padding值不可为负。
4,对于块级元素,未浮动的垂直相邻元素上、下边界会被压缩,如:上下有两个元素,上元素的下边界为10px,下元素的上界面为5px,则实际两个元素的间距为10px(两个边界值取最大的值)。如图:1
5,浮动元素(不管是左浮动还是右浮动),边界不会压缩。如图:2
6,内联元素,例如a,定义了上下边界,不会影响到行高。
7,如果盒中没有内容,即使定义了宽度、高度,实际上只占0%。
图:1
图:2
推荐阅读
-
把一个DIV分为两个iframe,但是顶端不对齐。求解_html/css_WEB-ITnose
-
学习DIV+CSS布局的一些感悟(II)_html/css_WEB-ITnose
-
新手求教:怎么防止div内容太多串到另一个div里面_html/css_WEB-ITnose
-
div+css布局模式一_html/css_WEB-ITnose
-
html综述一 jQuery基础使用(动态在body中创建div节点)_html/css_WEB-ITnose
-
div 里边只包含一个img, 结果div的高度比img图片的高度多3px_html/css_WEB-ITnose
-
在一个div里面嵌套1个labal和2个div,如何用css实现:labal和第一个div显示在一行,第2个div显示在第2行,并且和第1个div左对齐?_html/css_WEB-ITnose
-
怎么把一个div放在另一个div的中间?口头说不清楚,见图求解!祝大家双休日快乐!_html/css_WEB-ITnose
-
div里面插入一张图片,li里面也插入一张图片,但是li的图片却在div图片外面_html/css_WEB-ITnose
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose