多语言展示
当前在线:1934今日阅读:155今日分享:35

CSS 盒子结构

CSS 盒子结构
工具/原料

CSS

方法/步骤
1

1.盒子结构内容区:width和height内边距:paddingŸ Padding-top:内容和上边框之间距离Ÿ Padding-right:内容和右边框之间的距离Ÿ Padding-botttom:内容和下边框之间的距离Ÿ Padding-left:内容和左边框之间的距离简写Ÿ Padding:10px 20px 30px 40px ;上右下左Ÿ Padding:10px  20px  5px; 10px 上  , 20px 左右   5px 下Ÿ Padding:10px 20px ;10px 上下 20px左右Padding:10px;  上右下左都是10px;

2

2.外边距: 元素和元素之间的距离:Ÿ Margin-top:上边框往外的部分Ÿ Margin-right:右边框往外的部分Ÿ Margin-bottom下边框往外的部分Ÿ Margin-left: 左边框往外的部分简写Ÿ Margin:10px 20px 0  40px ; 上 右 下 左;Ÿ Margin:10px 20px 5px;   10px上  20px 左右 5px 下Ÿ Margin:10px 20px;10px 上下 20px  左右;Ÿ Margin 10px; 上右下左 都是10px;

3

3.边框上边框Ÿ Border-top-color:上边框的颜色Ÿ Border-top-width:上边框的粗细Ÿ Border-top-style:上边框的线型简写Border-top:粗细 线型 颜色;右边框Ÿ Border-right-color:右边框的颜色Ÿ Border-right-width:右边框的粗细Ÿ Border-right-style:右边框的线型Ÿ 简写Ÿ Border-right:粗细 线型 颜色;上右下左四条边线的样式一样 Border:粗细 线型 颜色;网站的布局思想 网站的页面就是由如干个盒子堆积(纵向和横向) 如果是纵向输入div 如果是横向 float

4

4.浮动:float  Float:left;  Float:right; 父元素如果不设置固定高,  1在父元素的里面的最下方,放一个

   在css样式中,clear:both;  2 在父元素里面加overflow:hidden;

推荐信息