盒子模型 边框border 外边距 内边距
css学习的三大重点:css盒子模型,浮动,定位
盒子模型
盒子模型由四部分组成:内容(content),内边距(padding),边框(border),外边距(margin)
盒子边框
border-width:边框宽度
border-style:soild(实线),dashed(虚线),dotted(点线)
border-color:边框颜色
边框的总和写法:变宽粗细 边框样式 边框颜色
border:5px solied red
border-collapse:collapse/*合并相邻重叠的边框*/
内边距
盒子的实际大小的宽度=内容的宽度+内边距*2+边框*2
内边距是边框与内容之间的距离
padding-left padding-right padding-top padding-bottom
padding:上 右 下 左
注意:当我们给盒子指定padding的时候发生两件事1盒子会变大,2内容和边框有了距离,添加了内边框
盒子的大小=内容的宽度或者高度+内边距+边框
解决添加内边距撑大盒子的方法:
因为内边距一定要给的,我们只能改变内容的宽度,让内容的宽度减去内边距*2就好了.
padding不影响盒子大小的情况
如果没有给一个盒子指定的宽度(不包活继承也就是继承的不算给的宽度),此时如果给这个盒子指定padding,则不会撑开这个盒子
eg:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
width:200px;
height: 41px;
border: 1px solid red;
}
p{
height: 20px;
background-color: pink;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="nav">
<p>哈哈哈</p>
</div>
外边距
margin属性用于设置外边距,margin就是控制盒子和盒子之间的距离
块盒子水平居中的条件:
盒子必须指定宽度
然后给左右外边距都设置auto
eg:.header{width:960px;margin:auto;}
文字居中和盒子居中的区别
1:盒子内的文字水平居中是text-align:center 而且还可以让行内元素和行内块居中对齐
2:块级盒子水平居中 左右margin:auto
插入图片和背景图片的区别
1:插入图片 我们用的最多的 比如产品展示类 移动位置只能靠盒模型padding margin
2:背景图片我们一般用于小图标背景或者超大背景图片 背景图片只能通过background-position
img{
width:200px;//插入图片更改大小 width和height
height:210px;
margin-top:30px;/*插入图片更改为位置 可以用margin或padding盒模型*/
margin-left:30px;/*插入当图片也是一个盒子*/
}
div{
width:400px;
height:400px;
border:1px solid purple;
background:#fff url() no-repeat
background-position:30px 50px ;
}
清除元素的默认内外边距(重要)
*{
padding:0;
margin:0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距
相邻块元素垂直外边距的合并
上边外边距是margin-bottom:200px;下边外边距是margin-top:100px;则两个块元素之间的聚利时取两值中的最大值
决绝办法尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的合并(塌陷)
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方法:
可以为父级元素定义上边框
可以为父级元素定义上内边距
可以为父级元素添加overflow:hidden
还有其他方法,比如浮动,固定,绝对定位的盒子不会有问题,后面在总结.
取消li列表的样式
li{
list-style:none;
}
圆角变边框
语法:border-radius:length;
其中每个值可以为数值或者百分比形式
技巧:
让一个正方形编程元圈border-radius:50%
如果是矩形只用高度的一半,如果是正方形使用高度或者宽度的一半
盒子阴影
语法:box-shadow:水平阴影,垂直阴影,模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必须,水平阴影的位置.允许负值 |
| v-shadow | 必须,垂直阴影的位置,允许负值 |
| blur | 可选,模糊距离 |
| spread | 可选,阴影的尺寸 |
| color | 可选,阴影的颜色, |
| inset | 可选,将外部阴影改为内部阴影 |
总结:
盒子模型的四部分组成:内容,内边距,外边距,边框
内边距的作用和对盒子的影响:调节内容和边框的距离,会使盒子撑大,
padding参数的含义:上 右 下 左
盒子居中对齐的两个条件:给定宽度 margin:auto
外边距合并的解决办法:
t | 可选,将外部阴影改为内部阴影 |
总结:
盒子模型的四部分组成:内容,内边距,外边距,边框
内边距的作用和对盒子的影响:调节内容和边框的距离,会使盒子撑大,
padding参数的含义:上 右 下 左
盒子居中对齐的两个条件:给定宽度 margin:auto
外边距合并的解决办法: