盒子是网页布局的关键点
(一)盒子模型有:元素内容、边框(border)、内边距(padding)、外边距(margin)
盒子里的文字和图片是内容区域
盒子的厚度是盒子的边框
盒子内容与边框的距离是内边距
盒子与盒子之间的距离是外边距
1、边框:border
边框的宽度在实际开发中都是跟px单位
例:border-width: 1px;
边框的样式:
solid:实线
dashed:虚线
dotted:点线
例:border-style: solid;
边框的颜色:border-color
边框的综合设置
border:border-width border-style border-color
但是顺序也没有具体要求
(1)边框可以单独指定样式,并不需要指定4个边框
border-top:
border-left:
border-right:
border-bottom:
(2)表格的细线边框
border-collapse:collapse:表示相邻边框合并在一起
2、内边距:padding
padding-left:左边距
padding-right: 右边距
padding-top:上边距
padding-bottom:下边距
padding的综合写法:
(1)padding: 10px;表示上下左右都是20内边距
(2)padding: 10px 20px;表示上下是10,左右是20
(3)padding: 10px 20px 30px;上10,左右20,下是30
(4)padding: 10px 20px 30px 40px; 上10,右是20,下是30,左是40(是一个顺时针值效果)
3、内核尺寸的计算(元素实际大小)
盒子的实际大小=内容宽度+内边距+边框
解决方法:内边距是一定要给的,我们只能改变内容宽度,因此就用内容宽度减去内边距=盒子的大小
特殊情况:若盒子没有写宽度,则padding不会撑开盒子
4、外边距:margin
其中综合写法和padding一样
(1)块级盒子居中对齐
让块级盒子居中对齐:1、必须有宽度(若没有了宽度,则就是统揽的宽度为百分之百,那谈何而来的居中对齐),
2、左右外边距设置为auto;
写法有三种:
<1> margin-left: auto;
margin-right: auto;
<2> margin:auto;
<3> margin:0 auto;
注意第二种中,就算上下写了auto ,但是并不会在正中间对齐,还是在上面对齐,所以上下指定了auto并没有用
(2)文字居中和盒子居中的区别:
盒子内的文字水平居中是 text-align: center;而且还可以让行内元素和行内块元素居中对齐
(3)插入图片和背景图片的区别:
<1> 插入图片我们用得最多,比如产品展示类,通过padding,margin来移动位置
<2> 背景图片一般用于小图标背景或者超大背景图片,背景图片只能通过background-position
(4)清除元素默认内外边距(重要!!!)
利用通配符:
- {
margin: 0;
padding: 0;
}
这句代码非常重要,在以后的CSS代码中是写在开头的一句。
注意:以后行内元素只设置左右内外边距,不设置上下内外边距
5、外边距合并
(1)相邻块元素垂直外边距的合并
当上下的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素右上边距magrin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并(也称外边距塌陷)
解决方法:尽量只给一个盒子添加margin值
(2)嵌套块元素垂直外边距的合并(塌陷)
对于两个嵌套元素的块元素,如果父元素没有上内边距级边框,父元素的上边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者
解决方案:可以为父元素定义上边框
可以为父元素定义上内边距
可为父元素添加overflow:hidden
6、盒子模型布局稳定性
(1)大部分情况下内外边距可以混用,自己觉得那个方便就用哪个。
建议:优先使用宽度,其次使用内边距,再次使用外边距
width > padding(内边距) >margin(外边距)
原因:
margin会有外边距合并,在某些浏览器下会有Bug;
padding 会影响盒子的大小,需要进行加减计算(麻烦)其次使用
width没有问题,经常使用宽度剩余法和高度剩余法来做
7、去掉列表默认的样式
li {
list-style :none
}
拓展内容:
1、圆角边框:border-radius:length;
其中每一个值可以为数值或百分比的形式
技巧:让一个正方形变为圆形
例:
border-radius:50%
经常用这个写法
2、如果要做长方形的那种圆角矩形,要这样做
例:border-radius: 10px;
注意:只能给高度的一半,此时不能写百分数了
3、盒子阴影:box-shadow
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内\外阴影
一般都是默认外阴影,因此我们不用写内外阴影
注意:前两个属性必须写,其他的可以省略
例:box-shadow: 0 15px 30px rgba(0,0,0,.3);
CSS书写规范:
1、空格规范
选择器与{ }之间必须包含空格
属性的冒号后面和值之间必须要有一个空格
2、选择器规范
并集选择器,每个选择器声明必须另占一行
大括号的后面合格括号必须和属性值对齐
建议:一般选择器的嵌套不要大于三级
3、属性值定义完必须以分号结束