网页布局基础之盒子模型与浮动

最新推荐文章于 2023-04-03 20:25:44 发布

原创最新推荐文章于 2023-04-03 20:25:44 发布 · 884 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

本文介绍了CSS中的盒子模型概念，包括边框、内边距和外边距等属性的设置方法。并通过实例展示了如何设置这些属性的具体数值。此外，还讲解了如何通过设置overflow属性来解决浮动导致的布局问题。

盒子模型

属性：边框 border，内边距 padding，外边距 margin

3D模型：border ，content+padding,background-image,background-color,margin(为最后一层)

例：

设置内边距 44px，15px，15px，15px

padding:44px 15px 15px;

设置1px的实线，颜色为#b1adaa

border:1px solid #b1adaa;

设置外边距上下为10px，左右为18px

margin:10px 18px;

初始化 *{}

*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}

样式追加

<div class="content profile">

浮动

关于overflow:hidden的设置

有这么一段解释

当子元素设置了浮动，父元素没有设置浮动而导致的父元素高度不能自动扩展，缩成一条线，子元素从父元素中溢出时，适合使用同时设置width:100%（或固定宽度值）+overflow:hidden的方式来清除浮动；此法可同时去除紧邻的块级受到的浮动影响，而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。

#mainbody {
	    background:#FC0;
        width:100%;
	    overflow:hidden;
}
.left {
	width:800px;
	height:200px;
	background:#000;
	float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;
}
#footer {
	background:#639;
	width:100%;
    
}