web前端学习笔记05-CSS内边距、外边距、盒子模型、页面布局

最新推荐文章于 2022-08-08 15:10:19 发布

喵了个咪蛋儿

最新推荐文章于 2022-08-08 15:10:19 发布

阅读量651

点赞数

分类专栏： web前端学习文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_42727838/article/details/106804803

版权

一、CSS内边距（内补白、内补丁）

【内边距设置常用属性】

关键字	释义
padding	检索或设置对象四边的内边距，参数个数1或2(上下/左右)或4(上/右/下/左)
padding-top	检索或设置对象顶部的内边距， top顶，bottom低，left左，right右

&& padding会改变元素的大小

二、CSS外边距（外补白、外补丁）

【外边距设置常用属性】

关键字	释义
margin	检索或设置对象四边的外边距，参数个数1或2(上下/左右)或4(上/右/下/左)
margin-top	检索或设置对象顶部的外边距， top顶，bottom低，left左，right右

&& 利用margin让元素水平居中： margin: 0 auto;
&& 利用margin合并边框：外边距值设为负的边框宽度

/*上面一个元素*/
border: 5px solid green;
/*下面一个元素*/
margin-top: -5px;

三、盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中的盒子来比喻，辅助进行元素样式设置。把元素看作盒子，则对应样式分别为，盒子的边框-border、盒子内的内容与边框之间的间距-padding、盒子与盒子之间的间距-margin。

【 盒子的实际尺寸】

盒子宽度= width + padding左右 + border左右
盒子高度= height + padding上下 + border上下
元素占位大小(宽) = width + padding左右 + border左右 + margin左右
元素占位大小(高) = height + padding上下 + border上下 + margin上下

&& 解决padding和border改变盒子大小：即设置内边距但元素大小不变 `box-sizing: border-box;`

四、页面布局——块元素、内联元素和内联块元素

4.1 块元素

块元素，也称为行元素，布局中常用的标签有：div、p、ul、li、h1-h6、dl、dt、dd等，它们在布局中的行为：

支持全部的样式
宽度默认为父级宽度的100%
盒子占据一行，即使设置了宽度

4.2 内联元素

内联元素，也称为行内元素，布局中常用的标签有：a、span、em、b、strong、i 等，它们在布局中的行为：

支持部分样式，不支持宽、高、margin上下
宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

4.3 内联块元素

内联块元素，也称行内块元素，是新增元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但仍归类于内联元素，它们在布局中的行为：

支持全部样式
如果没有设置宽高，则宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

【 三种元素比较】

	块元素	行内元素	行内块元素
常用标签	div p ul li h1-h6 dl dt dd	a span em b strong i	img input类似
是否支持全部样式	是	否	是
宽高	宽度默认为父元素的100%	不支持，宽高由内容决定	支持，默认为内容的宽高
是否独占一行	是	否	否
margin	支持	仅支持margin左右	支持
padding	支持	支持	支持

4.4 三种元素之间的转换

display属性用来设置元素的类型及隐藏。
【 display常见属性值】

属性值	释义
none	元素隐藏且不占位置
block	元素以块元素显示
inline	元素以内联元素显示（不常用）
inline-block	元素以内联块元素显示（html5中基本不用）

本节代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/c05.css"/>
		<title>CSS内边距、外边距、盒子模型、页面布局</title>
	</head>
	<body>
		<!--<div>你好</div>-->
		<div class="item1"></div>

最低0.47元/天解锁文章

喵了个咪蛋儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记05-CSS内边距、外边距、盒子模型、页面布局

一、CSS内边距（内补白、内补丁）【内边距设置常用属性】关键字释义padding检索或设置对象四边的内边距，参数个数1或2(上下/左右)或4(上/右/下/左)padding-top检索或设置对象顶部的内边距， top顶，bottom低，left左，right右    && padding会改变元素的大小二、CSS外边距（外补白、外补丁）【外边距设置常用属性】关键字释义margin检索或设置对
复制链接

扫一扫