CSS学习三大重点:CSS盒子模型、浮动、定位
主体思路:
理解目标:
- 能说出盒子模型有哪四部分组成
- 能说出内边距的作用以及对盒子的影响
- 能说出padding设置不同数值分别代表的意思
- 能说出块级盒子居中对齐需要的2个条件
- 能说出外边距合并的解决方法
应用: - 能利用边框复合写法给元素添加边框
- 能计算盒子的实际大小
- 能利用盒子模型布局模块案例
看透网页布局的本质
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
看透网页布局的本质:
盒子模型
所谓盒子模型:
小结:
(1)盒子模型由元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
(2)盒子里面的文字和图片等元素是内容区域
(3)盒子的厚度:我们称为盒子的边距
(4)盒子内容与边距的距离是内边距(类似单元格的cellpadding)
(5)盒子与盒子之间的距离是外边距(类似单元格的cellspacing)
标准盒子模型
盒子边框(border)
- 语法:
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border–width | 定义边框粗细,单位是px |
border–style | 边框的样式 |
border–color | 边框颜色 |
- 边框的样式:
(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单词是合并的意思
boder–collapse:collapse;表示相邻边框合并在一起
内边距(padding)
内边距:
设置
属性 | 作用 |
---|---|
padding–left | 左内边距 |
padding–right | 右内边距 |
padding–top | 上内边距 |
padding–bottom | 下内边距 |
当我们给盒子指定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>
内盒尺寸计算(元素实际大小)
- 宽度
Element Height = content height + padding + border (Height为内容宽度) - 高度
Element Width = content width + padding + border(Width为内容宽度) - 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
内边距产生的问题
会撑大原来的盒子
padding不影响盒子大小情况
外边距(margin)
外边距
margin属性用于设置外边距,margin就是控制盒子和盒子之间的距离
设置
块级盒子水平居中
- 可以让一个盒子实现水平居中,需要满足以下两个条件:
(1)必须是块级元素
(2)盒子必须指定了宽度(width) - 然后就给左右的外边距都设置为auto,就可使块级元素水平居中
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{width:960px; margin:0 auto;}
常见的写法,以下三种都可以。
(1)margin–left:auto; margin–right:auto;
(2)margin:auto;
(3)margin:0 auto;
文字居中和盒子居中区别
1.文字水平居中是 text–align : center,而且还可以让行内元素和行内块居中对齐
2.块级盒子水平居中,左右margin改为auto
text-align : center; /*文字 行内元素 行内块元素水平居中*/
margin : 10px auto; /*块级盒子水平居中,左右margin改为auto就可以了,上下margin都可以*/
插入图片和背景图片区别
1.插入图片,我们用的最多比如产品展示类,移动位置只能靠盒模型padding,margin
2.背景图片我们一般用于小图标背景或者超大背景图片。背景图片只能通过background–position
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)相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)
解决方案:尽量只给一个盒子添加margin值。
(2)嵌套块元素垂直外边距的合并(塌陷) - 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
解决方案:
(1)可以为父元素定义上边框(border–top:1px solid transparent)
(2)可以为父元素定义上内边距(padding-top:1px;)
(3)可以为父元素添加overflow:hidden
还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。
盒子模型布局稳定性
- 学习完盒子模型,内边距和外边距,什么情况下用内边距,什么情况下用外边距?
大部分情况下是可以混用的。就是说,你用内边距也可以,用外边距也可以,哪个方便用哪个。
我们根据稳定性来分,建议如下:
按照优先使用宽度(width)其次使用内边距(padding)再次外边距(margin)
- 原因:
(1)margin会有外边距合并,还有ie6下面margin加倍的bug,所以最后使用。
(2)padding会影响盒子大小,需要进行加减计算(麻烦)其次使用。
(3)width没有问题,我们经常使用宽度剩余法,高度剩余法来做。
ps基本操作以及常用快捷键
因为网页美工大部分效果图都是利用ps来做的,所以以后大部分切图工作都是在ps里面完成。
原文地址:https://blog.csdn.net/gou1791241251/article/details/126847074
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_44424.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!