前端攻城狮---css样式之盒模型

最新推荐文章于 2023-08-24 19:25:34 发布

csdn_gyh

最新推荐文章于 2023-08-24 19:25:34 发布

阅读量420

点赞数 2

分类专栏：前端攻城狮文章标签： css html 前端盒子模型

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80547513

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在讲盒模型之前，先来了解一下常见的属性

颜色表示法

单词表示法: black white green yellow pink purple gold blue red skyblue orange等

rgb()表示法
每种颜色取值 0~255
表示红色 rgb(255,0,0)
绿色 rgb(0,255,0)
蓝色 rgb(0,0,255)
白色 rgb(255,255,255)
黑色 rgb(0,0,0)
灰色 rgb(111,111,111)
十六进制表示法
#000000 黑 #000
#ff0000 红 #f00
#00ff00 绿 #0f0
#0000ff 蓝 #00f
#aabbcc 可以简写#abc
#ff2345 #f2345错的

#112233 #123 对的

文字属性

color：green； 设置文字颜色

font-size：20px； 文字大小有单位目前的单位是px (其实还有rem 、em单位)

chrome浏览器 12px

line-height：20px； 行高

           font-family: "宋体";字体有宋体微软雅黑等
             font-weight：bold；表示字体是否加粗
                    font-weight:700或bold 加粗
                    font-weight:400或normal 表示正常
            font-style：none；表示字体样式
                    font-style: italic; 让文字倾斜
                    font-style: normal; 不倾斜
                    font-style: oblique文字倾斜
                    italic oblique的区别就是前者是倾斜的字体后者是倾斜的文字
                    中文一律用italic
             text-decoration：none 表示字符装饰
                        text-decoration: none; 默认
                        text-decoration: underline; 下划线
                        text-decoration: line-through; 删除线
                        text-decoration: overline; 上划线
            综合font属性
                    font: italic bold 14px/28px arial,sans-serif;
                        相当于
                        font-style:italic;
                        font-weight:bold;
                        font-size:14px;
                        line-height:28px

font-family:arial,sans-serif;

一般来说会这么综合 font: 14px/28px arial,sans-serif

text-align：center；设置字体的位置，如居中靠右靠左等等

text-indent：2px；缩进

盒模型

整体感知

盒模型主要涉及到这几个属性 width height padding margin border 分别表示宽高内边距外边距边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				padding: 20px;
				background-color: green;

			      margin: 20px;
			      border:5px solid yellow;

}</style></head><body><div id="div1" class="div1"></div></body></html>

大家可以自行跑起来看看最终出现的宽高是多少？通过网页打开按f12 出来的控制台再结合实际效果

上图就是最终显示的效果图和控制台显示的数据

可以看到黄色的边框外，还有20px的margin却看不到效果，最终呈现出来的宽高是有黄色的边框和绿色的内容组成的。

所以我们可以得出一个结论盒子的总宽度=左border+左padding+width+右padding+右border

padding

padding:内容和边框之间的距离,下面是一些设值的方式

padding：10px =padding：10px 10px 10px 10px；分别对应的是上右下左

等价于padding-top:10px;padding-right:10px;padding-bottom:10px; padding-left:10px;

padding:10px 20px 30px;

等价于padding-top:10px;padding-right:20px;padding-bottom:30px; padding-left:20px;

也就是说当左padding没设值，那么就会和右padding的值一样；

padding:20px 40px

等价于padding-top:20px;padding-right:40px;padding-bottom:20px; padding-left:40px;

当左padding没设值，那么就会和右padding的值一样；

当下padding没设值，那么就会和上padding的值一样；

注意：浏览器会给一些元素设置默认的padding,比如ul 对我们页面制作有影响所以我们需要重置
* {
padding: 0;
margin: 0;
}

border

border:表示边框主要有三个参数粗细线型颜色

border: 20px solid blue;

等价于border-width: 20px;

分解成

border-top-width:20px;

border-right-width:20px;

border-bottom-width:20px;

border-left-width:20px;

border-style: solid;

border-color: blue;

关于线型只需要记住两个 solid 实现 dashed 虚线即可

margin

margin：盒子与其他元素之间的距离，值得设置方式和padding一样。

margin需要注意的是，在垂直布局的时候，会出现塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: yellow;
				margin-bottom: 50px;
			}
			.div2{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin-top: 20px;
			}
	</style>
</head>
<body>
	<div id="div1" class="div1"></div>
	<div id="div2" class="div2"></div>
</body>
</html>

上诉代码中我们设置了两个盒子一个，按照常理来说两个盒子之间应该相隔70px，但最后实际效果只有50px，这就是塌陷，因为上一个盒子margin-botton大于下一个盒子margin-top 所以下一个盒子塌陷在上一个盒子里面。

标准文档流

特点 1 文字空白出现折叠现象
2 文本类的元素会并排高低不齐底边对齐
3 文字排到最右侧，自动换行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	     .last {
	     	 font-size: 32px;
	     }
	</style>
</head>
<body>
	<div>
		1111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		333333333333331111111111111
		2222222222222
		33333333333333
	</div>
	<div>
		<input type="text" />
		<span>111</span>
		<span class="last">2</span>
	</div>
</body>
</html>

看看上诉的例子就很容易理解，在div中内容中有很多空白的，但最后显示的效果却没有那么多的空白，说明空白都已经折叠了，底部对齐，到右边自动换行。

其实标准文档流对元素又分块级元素和行内元素

块级元素：所有的容器级标签都是块级元素，文本级元素中的p元素也是块级
如 body h1~h6、p、ul、dl、li、table、tr、td、div、form
特点：a 可以设置宽高
b 独占一行,不与其他标签并排，也就是说是竖直排列
c 不设置宽度，会继承父亲宽度的100%
行内元素:除了p元素之外的所有文本级标签都是行内元素
如 a img span input i em strong
特点：1 设置宽高无效，宽高由自己的内容撑开

2 行内元素与行内元素可以并排在一行，也就是说是水平排列

那如果说想要给行内元素设置宽高的话可以使用这个参数display

display: block; 常用转成块级元素
display: inline 很少用转出行内元素

display: none 隐藏元素

display:inline-block 保留行内元素的特性，但可以像块级元素一样设置宽高。

有的人可能会在开发中看到给img input设置宽高，你明明说img input是行内不能设置宽高，为什么我还设置成功了呢？你这个骗子大骗子。其实img input 就是display设置成了inline-block的行内元素。

盒子模型的已经讲完，接下来会来讲css浮动，如有表达错的请谅解和提出错的点，望能共同进步。

csdn_gyh

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
前端攻城狮---css样式之盒模型

在讲盒模型之前，先来了解一下常见的属性颜色表示法单词表示法: black white green yellow pink purple gold blue red skyblue orange等rgb()表示法每种颜色取值 0~255 表示红色 rgb(255,0,0) 绿色 rgb(0,255,0) ...
复制链接

扫一扫

专栏目录