本文介绍: 盒子模型(CSS重点)

CSS学习三大重点:CSS盒子模型浮动定位
主体思路
在这里插入图片描述
理解目标

看透网页布局本质

网页布局中,我们如何里面文字图片,按照美工给我们效果图排列的整齐有序呢?
看透网页布局本质

盒子模型

所谓盒子模型:

在这里插入图片描述
在这里插入图片描述
小结
(1)盒子模型由元素的内容边框border)、内边距(padding)、和外边距(margin)组成。
(2)盒子里面文字图片等元素是内容区域
(3)盒子的厚度:我们称为盒子的边距
(4)盒子内容与边距的距离内边距(类似单元格cellpadding
(5)盒子与盒子之间距离外边距(类似单元格cellspacing

标准盒子模型
在这里插入图片描述

盒子边框border

在这里插入图片描述

border : border-width || border-style || border-color
属性 作用
borderwidth 定义边框粗细单位px
borderstyle 边框样式
bordercolor 边框颜色

在这里插入图片描述
(1)none没有边框即忽略所有边框的宽度默认值
(2)solid:边框为单实线(最为常用的)
(3)dashed:边框为虚线
(4)dotted:边框为点线

边框综合设置

border : border-width || border-style || border-color

例如

border : 1px solid red; 无顺序要求

盒子边框写法总结

很多情况下,我们需要指定4个边框,我们可以单独给4个边框分别指定的。

在这里插入图片描述

表格的细线边框

在这里插入图片描述

table{border-collapse:collapse;}

collapse单词合并的意思
bodercollapse:collapse;表示相邻边框合并在一起

内边距(padding

在这里插入图片描述

内边距:

padding属性用于设置内边距,是指边框与内容之间的距离

设置

属性 作用
paddingleft 左内边距
paddingright 右内边距
paddingtop 上内边距
paddingbottom 下内边距
当我们给盒子指定padding值之后,发生了2件事情:
(1)内容和边框有了距离添加了内边距
(2)盒子会变大
注意:后面跟几个数表示的意思是不一样的

案例:新浪导航

新浪导航栏的核心就是因为里面的字数不同,所以不方便给宽度还是padding,让其撑开盒子。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>新浪导航案例</title>
	<style type="text/css">
		.nav{
			height: 41px;
			background-color: #FCFCFC;
			border-top: 3px solid #FF8500;
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a{
			display: inline-block;
			height: 41px;
			text-decoration: none;
			line-height: 41px;
			padding: 0 20px;
			font-size: 14px;
		}
		.nav a:hover{
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="">新浪</a>
		<a href="">首页</a>
		<a href="">新浪网</a>
		<a href="">关于我</a>
		<a href="">微博</a>
		<a href="">手机新浪网</a>
	</div>
</body>
</html>

内盒尺寸计算(元素实际大小

在这里插入图片描述

内边距产生的问题

在这里插入图片描述
会撑大原来的盒子

padding不影响盒子大小情况

如果没有一个盒子指定宽度,此时,如果给这个盒子指定padding,则不会撑开盒子

外边距(margin

在这里插入图片描述

外边距

margin属性用于设置外边距,margin就是控制盒子和盒子之间的距离

设置

在这里插入图片描述

块级盒子水平居中

.header{width:960px; margin:0 auto;}

常见写法,以下三种都可以。
(1)marginleft:auto; marginright:auto;
(2)margin:auto;
(3)margin:0 auto;

文字居中和盒子居中区别

1.文字水平居中textalign : center,而且还可以让行内元素和行内块居中对齐
2.块级盒子水平居中,左右margin改为auto

text-align : center;     /*文字 行内元素 行内块元素水平居中*/
margin : 10px auto;   /*块级盒子水平居中,左右margin改为auto就可以了,上下margin都可以*/

插入图片背景图片区别

1.插入图片,我们用的最多比如产品展示类,移动位置只能靠盒模型padding,margin
2.背景图片我们一般用于图标背景或者超大背景图片背景图片只能通过backgroundposition

img {
	width : 200px;
	height: 210px;
	margin-top:30px;
	margin-left: 50px;
}
div{
	width : 400px;
	height : 400px;
	border : 1px solid purple;
	background: #fff url(images/heder.jpg) no-repeat;
	background-position: 30px 50px;     /*背景图片更改位置,用background-position*/
}

清除元素的默认内外边距(重要)

在这里插入图片描述
为了更灵活方便地控制网页的元素,制作网页时,我们需要将元素的默认内外边距清除
代码

* {
padding:0;
margin:0;
}

注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。

外边距合并

使用margin定义块元素的垂直外边距时,可能出现外边距的合并
(1)相邻块元素垂直外边距的合并

盒子模型布局稳定

  • 学习完盒子模型,内边距和外边距,什么情况下用内边距,什么情况下用外边距?
    部分情况下是可以混用的。就是说,你用内边距也可以,用外边距也可以,哪个方便用哪个。
    我们根据稳定性来分,建议如下
    按照优先使用宽度(width)其次使用内边距(padding)再次外边距(margin)

width > padding > margin

ps基本操作以及常用快捷键

因为网页美工大部分效果图都是利用ps来做的,所以以后大部分切图工作都是在ps里面完成

在这里插入图片描述
在这里插入图片描述

原文地址:https://blog.csdn.net/gou1791241251/article/details/126847074

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44424.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注