HTML/CSS 第六章笔记

发布于 2016-11-17  10.84k 次阅读


第六章:笔记

margin:元素与元素之间的"距离".(只有距离.单位一般用px:像素)
语法:
<body>
<p>第一个p标签</p>
<p>第二个p标签</p>
</body>
margin:0;/*表示四边外边距都没有*/
body{border:1px solid red; }
p {
border:1px solid red;
width:200px;
margin:0;/*去掉所有的外边距,*/
}
margin:0 auto;/*表示上下是0,左右自动(水平居中)*/
margin:0 auto;/*上下外边距0,左右(水平)自动居中*/

margin:5px 10px;/*表示上下外边距为5像素,左右为10像素*/

margin:5px 10px 15px;/*表示上5像素,左右10像素,下15像素*/

margin:5px 10px 15px 20px;/*上5像素,右10像素,下15像素,左20像素*/

总结:margin:
为一个值时,表示设置四边;
为两个值时,第一个值表示上下,第二个值表示左右.
为三个值时,第一个表示上面,第二个表示左右,第三个表示下边.
为四个值时,依次顺序是:上-->右-->下-->左.
重点:为两个值时,第二个值常用auto,自动水平居中.

当然,margin可以分开写,分别单独设置四个外边距:
margin-top:10px;/*上边距为10像素*/
margin-right:10px;/*右边距为10像素*/
margin-bottom:10px;/*下边距为10像素*/
margin-left:10px;/*左边距为10像素*/

border:边框(样式,颜色,宽度)
border:宽度 样式 颜色;
border-top:宽度 样式 颜色;
border-right:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
border-left:宽度 样式 颜色;
每个边都可以单独设置,还可以分成三个语句来写,但不常用.
比如我们设置border-top:(下面写法不常用.)
border-top-style:solid;
border-top-color:red;
border-top-width:1px;

padding:内边距(内填充宽度)
padding设置与margin基本一样.不能使用auto设置居中.

知识点:盒子所占的高度=上外面+上边框+上填充+下填充+下边框+下外边.
设定元素的高度:不包括边框高度
比如我们设定一个DIV元素:height:50px;padding-top:10px; margin:10px; border:2px solid red;
请告诉我这个DIV在网页中一共要占多高?
知识点:盒子所占的宽高度:50+10+20+4

position:定位属性
position:值有三个:static(默认值,没有定位),absolute(绝对定位,相对于页面),fixed(固定定位,但不会随滚动条的滚动而随着动),relative(相对定位,相对于父标签)
注意:fixed:不常用,很多浏览器不支持.

重点:定位属性要结合:left,top,right,bottom这四个值一起使用.

当元素(标签)一旦使用了定位属性,它们就有可能重叠,我们用z-index属性去控制
z-index:整数(可以是正数,也可以是0,还可以是负数,反正谁值大谁在上面.)
display:(它的值有多个,但常用的只有一个:block)它就是控制元素的显示方式:可以是行级,块级,隐藏等....