一、边界:margin(相邻盒子/元素对之间的距离)
取值:top right bottom left 根据格式规定的方向为四个方向设置边界距离
例:margin:5px 10px 15px 20px; 上边界5px ,右边界10px,下边界15px,左边界20px
margin:5px 10px; 上边界5像素,右边界10像素,下边界5像素,左边界10像素
margin:5px; 四个方向的边界均为5像素。
*{margin:0;}去掉浏览器周围自带的8px距离。*通配选择器,让页面所有的元素边界均为0。
例:通栏效果的顶部top栏。
margin:0 auto;块级元素在父元素内部水平居中。
二、填充:padding。
1、取值:padding-top:设置顶部填充的距离。 padding-right:设置右侧填充的距离。
padding-bottom:设置底部填充的距离。 padding-left:设置左侧填充的距离。
padding:top right bottom left; //表示四个方向需要填充的具体数值。
2、加入padding的容器,宽高会被撑大。
例:
.box{
width:200px; height: 150px;
background-color: #3385ff;
color:#ffffff;
padding:20px;
}
box原尺寸为200px*150px,由于添加了padding,所以四个方向均添加了20px的填充大小。导致box的宽度变为200+20+20=240px,高度变为150+20+20=190px。
若仍然希望box的实际尺寸恢复为原始尺寸,则按照下列公式计算width和height属性的取值:
(1)容器的width属性取值 = 原始宽度 - 左填充 - 右填充。
(2)容器的height属性取值 = 原始高度 - 上填充 - 下填充。
即CSS代码变为:
.box{
width:160px; height:110px;
background-color: #3385ff;
color:#ffffff;
padding:20px;
}
3、使用box-sizing属性改变页面的布局模式:
取值:content-box(默认值):内容盒。产生的填充和边框均在内容。
border-box (边框盒):边框在内容内。
(当使用padding时最好将box-sizing属性的取值设为border-box。)
4、去掉无序列表为列表项预留的40px距离:例:
ul{
list-style-type:none; //去掉无序列表前的序号
padding-left:0; //去掉无序列表为列表项预留的40像素距离。
}
三、边框:border
1、边框粗细:border-top-width设置顶部边框粗细;border-right-width设置右侧边框粗细
border-bottom-width设置底部边框粗细;border-left-width设置左侧边框粗细
border-width:top right bottom width;(上右下左边框具体数值)
2、边框颜色:(同上)border-color:top right bottom left;
3、边框样式:(同上)border-style:top right bottom left;
none没有边框。 solid实现边框 dashed虚线边框
dotted点线边框 double双线边框 groove凹槽边框
ridge脊状边框 inset突出边框 outset凹陷边框
4、整体设置边框外观:取值格式border:style width color
例:border:solid 5px #ff5857;
5、容器的圆角效果:border-radius:设置容器四个圆角的半径,没有涉及到的角度,按照它对角的取值设置圆角半径,如果只设置一个角,则四个角取值相同。
例:border-radius:10px;
四、浮动属性:float
功能:设置元素的浮动,解决块级元素无法在一行显示。
取值:float:left;(左浮动) float:right;(右浮动)
条件:1、 将一个块级元素设置为左浮动,它会带动它下面的块级元素,将这个下面的块级元素拉扯到与本元素同行的位置。但是下面的块级元素将被这个上面的块级元素覆盖。
2、解决覆盖问题:将被拉扯上去的块级元素同时也设置左浮动。
3、被拉扯上去的块级元素若不希望与其他块级元素在同一行,如何解决:将被拉扯上去的块级元素设置清除浮动。
clear清除浮动 1、功能:将元素两侧的浮动拉扯效果清除掉。
2、取值:left,清除左浮动。right,清除右浮动。both,同时清除左右浮动。
五、将内联元素转换为块级元素:
例:a{display:block; //将内敛元素a转换为块级元素
width:150px;height:40px;} //将转换好的内联元素设置宽度高度(内联元素本身没有宽高)