盒子模型 边框border 外边距 内边距
css学习的三大重点:css盒子模型,浮动,定位
盒子模型
盒子模型由四部分组成:内容(content),内边距(padding),边框(border),外边距(margin) • 1
盒子边框
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:水平阴影,垂直阴影,模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影
总结:
盒子模型的四部分组成:内容,内边距,外边距,边框 内边距的作用和对盒子的影响:调节内容和边框的距离,会使盒子撑大, padding参数的含义:上 右 下 左 盒子居中对齐的两个条件:给定宽度 margin:auto 外边距合并的解决办法:
t | 可选,将外部阴影改为内部阴影 |
总结:
盒子模型的四部分组成:内容,内边距,外边距,边框 内边距的作用和对盒子的影响:调节内容和边框的距离,会使盒子撑大, padding参数的含义:上 右 下 左 盒子居中对齐的两个条件:给定宽度 margin:auto 外边距合并的解决办法:
