赞
踩
css最重要的是盒子模型,盒子组成一切
盒子构成:
首先可以直接设置各个区域
.box{
width:70px;
padding:5px;
margin:10px;
}
注意:这里的width和height设置的大小是内容区的大小,不是整个盒子的大小。内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。外边距可以是负值,而且在很多情况下都要使用负值的外边距。
(当width和height为默认时,即auto,这时内边距不会影响可见框的大小,而是会自动修改width和height,以适应内边距,即一变大一变小,父元素内容区未指定数据也是默认被内容撑开的)
介绍一个创建div的快捷方式(div.box$*10
:创建10个div,类名从box1到box10)
为一个元素设置边框必须指定三个样式(至少有样式才能看到边框,因为大部分浏览器会为颜色和宽度备有默认值,而边框样式默认值是none,即无):
分别指定四个边不同样式:例如:border-width:10px 20px 30px 40px
顺序为:(顺时针)上 右 下 左
当只写三个参数时:上 左右 下
只写两个参数时:上下 左右
也可使用:border-xxx-width: 30px;
(其他什么颜色风格都一样,内边距外边距是一样道理)。例子:border-left-width:40px;
设置左边框宽度。
xxx值有:top ; right ; bottom ; left
其他示例:border-xxx-style:double;
常用样式:
简写模式:border: red solid 30px;
三个元素无顺序区分,都可以,不会有影响。但是border不能分别指定四个边,只能同时指定四个边。
所以还可以使用:border-xxx:red solid 30px;
仅仅指定一条边;
但只设置三条边时,为了简单还可以----先用border设置所有边,然后取消掉一条边的样式。
border:red solid 30px;
border-right:none;
盒子内容区与盒子边框之间的距离叫内边距;
四个方向内边距设置:
盒子可见框的宽度=width + padding-left + padding-right + border-left-width + border-right-width;可见框高度同理;
外边距是指当前盒子与其他盒子之间的距离,它不会影响可见框的大小,但是会影响当前盒子的位置。
盒子有四个方向的外边距:
margin-left:auto;
就是移动到最右边(如果左右都是设置auto,则是在父元素里水平居中)。margin:auto;
居中。margin-top:auto;
无效果;属性margin可同时设置四个方向的值:margin:20px 30px 40px 10px;
与border一样。
注意:两相邻盒子垂直外边距之间会重叠,比如一个处于上面的盒子下边距为100px,下面盒子的上边距为100px,那么他们的距离为100px,而不是200px;兄弟元素的相邻外边距只会取最大值不会求和。(要点:相邻,垂直方向外边距)
如果父子元素的垂直外边距相邻了,那么子元素的外边距会设置给父元素。
解决方法 :
.p1:before{
content="";
display=table;//将一个元素设置为表格显示;而且空表格还不会占用空间
}
内容区:内联元素无法设置width和height。
内边距:可以设置水平与垂直方向内边距,但是垂直内边距设置后不会影响页面布局。只会覆盖其他盒子。
边框:可以设置边框,但垂直方向同样不能影响布局,水平会。
外边距:水平方向上可以正常设置,但是与相邻元素不是重叠而是求和。内联元素不支持垂直方向外边距设置。
display可以改变元素的类型(主要就是内联元素和块级元素);
display:block;
常见可选值:
visibility:hidden;
隐藏的元素虽然消失了,但是会保留原有的位置)子元素默认是存在于父元素的内容区中,理论上子元素最大应该和父元素一样大。但子元素大小超出父元素的内容区时,超出的内容会在父元素以外的位置显示。超出父元素的内容称为溢出的内容。即父元素默认将溢出内容显示在外面。
而overflow就可以设置父元素如何处理溢出的元素,
可选值:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。