盒子模型（CSS重点）

最新推荐文章于 2023-03-31 22:42:25 发布

北岭有燕

最新推荐文章于 2023-03-31 22:42:25 发布

阅读量372

点赞数 1

分类专栏： HTML+CSS 文章标签： css

HTML+CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

盒子模型（CSS重点）

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子边框总结表

border-top-style:样式; border-top-width:宽度; border-top-color:颜色;
border-top:宽度样式颜色;

样式综合设置 border-style:上边 [右边下边左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线

宽度综合设置 border-width:上边 [右边下边左边]; 像素值

颜色综合设置 | border-color:上边 [右边下边左边]; 颜色值、#十六进制、rgb(r,g,b)

表格的细线边框

border-collapse:collapse; 表示边框合并在一起。

圆角边框(CSS3)

border-radius: 左上角右上角右下角左下角;

border-radius: 10px; 4个角都是相同的 10px 的弧度
border-radius: 50%; 变成一个圆形
border-radius: 10px 40px; 左上角和右下角是10px 右上角和左下角40px （13,24）
border-radius: 10px 40px 80px; 左上角10 右上角和左下角 40 右下角80 （1,24,3）

内边距（padding）

是指边框与内容之间的距离。F12调试工具，青色的是内间距。
padding: 上右下左（顺时针）
padding: 3px 5px; 上下3像素左右5像素（13,24）
padding: 3px 5px 10px; 上是3像素左右是5像素下是10像素（1,24,3）

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}
text-align: center;   文字居中水平

插入的图片也是一个盒子，更改大小width和height，更改位置可以用margin 或padding
背景图片更改大小只能用background-size，更改位置用background-position
一般情况下，背景图片适合做一些小图标使用。产品展示之类的就用插入图片

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
* {
padding:0; /*清除内边距 /
margin:0; / 清除外边距 */
}
注意：行内元素是只有左右内外边距的，是没有上下内外边距的。尽量不要给行内元素指定上下的内外边距。
实际工作中，可以把 * 换成div,dl,dt,dd,ul,ol,h1,input等等

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：避免这样写，把需要的外边距给一个块。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。
解决外边距合并(塌陷)问题：

可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; 或padding: 1px;
可以为父元素添加overflow:hidden。

content宽度和高度

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
内盒实际宽度尺寸：width+2padding+2border
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

只要不给块级元素宽度，padding就不会影响盒子的宽度
一个盒子（该块级元素）继承父亲的宽度，不给该块级元素宽度，padding也不会影响盒子的宽度

一个小案例用到的东西（本篇末尾后有此代码）：
在实际中一般哟啊加上如下所示：
* { /* 清空默认的内外边距几乎是我们写css 必须要写的 */
margin: 0;
padding: 0;
}

如果四个边框里上边框是特别的样式，应该放在下面，就近原则。
border: 1px solid #D9E0EE;
border-top: 3px solid #FF8400; /* 这句话要放到 border 的下面 */

写完一个盒子可以加背景色看看效果如何
块级元素就是一个个的盒子，h3标签也是一个盒子

font-weight: normal; /* 让粗体不变粗，比如标题*/

图片默认左对齐，margin: 7px 0 0 8px; 设置好上边，左边就可以了。右边和下边会自动调整。

list-style: none; /* 取消列表自带的小点默认的列表样式 */

text-decoration: underline; /* 添加下划线 */

color: rgba(255, 255, 255, 0.7);/* 颜色半透明 */

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		* {  /* 清空默认的内外边距 几乎是我们写css 必须要写的 */
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none; /* 取消列表自带的小点  默认的列表样式 */
 		}
		.searchPic {
			width: 238px;
			height: 294px;
			border: 1px solid #D9E0EE;
			border-top: 3px solid #FF8400;  /* 这句话要放到 border 的下面 */
			margin: 100px;
		}
		.searchPic h3 {
			height: 35px;
			line-height: 35px;  /* 让行高等于高度 ，可以让文字垂直居中 */
			border-bottom: 1px solid #D9E0EE; 
			font-size: 16px;
			font-weight:  normal;  /*  让粗体不变粗 */
			padding-left: 12px;  /* 因为这个h3我么没有给宽度 继承的父亲的宽度 padding就不会撑开盒子了 */
		}
		.searchPic img {
			margin: 7px 0 0 8px; /*  上 右 下 左 */
		}
		.searchPic ul li a {
			font-size: 12px;
			color: #666;
			text-decoration: none; /* 取消下划线 */
		}
		.searchPic ul {
			margin-left: 8px;
		}
		.searchPic ul li{
			padding-left: 10px;
			height: 26px;
			line-height: 26px;
			background: url(images/square.png) no-repeat left center; /* 背景设置 */
		}
		.searchPic ul li a:hover {
			text-decoration: underline;  /* 添加下划线 */
			color: #ff8400;
		}
        </style>
    </head>
    <body>
     <div class="searchPic">
     	<h3>搜索趣图</h3>
     	<img src="images/happy.gif" height="160" width="218" alt="">
     	<ul>
     		<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
     		<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
     		<li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
     	</ul>
     </div>
    </body>
</html>

盒子模型布局稳定性

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。
原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法（一个块中文字居左，后面的块紧挨着左边的块）高度剩余法来做。

CSS3盒模型

CSS3中可以通过box-sizing来指定盒模型
1、box-sizing: border-box 盒子大小为width，（padding 和 border 是包含到width里面的）padding和border不会撑开盒子。

2、box-sizing: content-box 盒子大小为 width + padding + border（此值为其默认值，就是以前W3C的标准Box Mode）

盒子阴影

box-shadow:水平位置垂直位置模糊距离阴影尺寸（影子大小）阴影颜色内/外阴影；

前两个属性是必须写的。其余的可以省略。
默认外阴影 (outset) 不能写想要内阴影用inset
box-shadow:3px 3px 5px 4px rgba(0,0,0,1);

北岭有燕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型（CSS重点）

盒子模型（CSS重点）其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。盒子边框总结表border-top-style:样式; bor...
复制链接

扫一扫