1.盒子模型组成
-
内容区域 - width & height
-
边框线 - border
属性值:边框线粗细 线条样式 颜色(不区分顺序)
属性值 | 线条样式 |
solid | 实线 |
dashed | 虚线 |
dotted | 点线 |
设置单方向边框线
属性名:boder-方位名词
属性值:边框线粗细 线条样式 颜色(不区分顺序)
如:
<style>
div{
border-left: 2px solid red;
border-right: 2px solid green;
border-top: 3px dotted orange;
border-bottom: 3px dashed #D419F2;
width: 200px;
height: 200px;
}
</style>
-
内边距 - padding(出现在内容与盒子边缘)
书写方式为
padding: 数字 + px;
作用:设置内容与盒子边缘之间的距离。
属性名:padding/padding-方位名词
padding多值写法
按上下左右的顺序分配值,如果没有就往回走,往回走也不够?那就接着往后走!
加padding以及border会把尺寸变大的解决办法
- 默认情况
盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
- 结论:给盒子加border / padding属性会撑大盒子
- 解决
- 手动减法:减掉bodder / padding 的尺寸
- 内减模式: box-sizing: border-box
-
外边距 - margin(出现在盒子外面)
margin: 数字 + px;
与padding属性值写法相同、含义相同
在页面水平居中的方法 margin:0 auto;利用auto自动设置左右外边距,前提要求是要有宽度
2.元素溢出
作用:控制溢出元素的内容的显示方式。
属性名:overflow
属性值:
3.外边距问题
3.1合并现象
场景:垂直排列的兄弟元素,中间的margin会合并
现象:取两个margin中较大值生效
解决办法:给一个盒子设置外边距就行
3.2塌陷问题
场景:父子级的标签,子级的添加上外边距会产生塌陷
现象:导致父级一起向下移动
子级div标签设置了外边距属性,但是父级同样向下移动,导致整体移动
解决办法:
- 取消子级margin,父级设置padding
- 父级设置overflow:hidden
- 父级设置border-top
下面两种方法是通过确定盒子的边缘来解决问题
4.行内元素 -- 内边距问题
场景:行内元素添加margin和padding,无法改变元素垂直位置
解决办法:给行内元素添加line-height行高属性可以改变垂直位置
5.盒子模型 -- 添加圆角
作用:设置元素的外边框为圆角
属性名:border-radius
属性值:数字+px 或者 百分比
属性值的意义为圆角半径
属性值可以写多个,从左上角开始赋值,与padding实现相同。
正圆形状
给正方形盒子设置圆角属性为宽高一般 / 50%
img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}
胶囊形状
给长方形盒子设置为高度一半
div {
margin: 50px auto;
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
6.盒子模型 -- 阴影属性
作用:给元素设置阴影效果
属性名:box-shadow
属性值:x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
- X轴偏移量和Y轴偏移量必须书写
- 默认是外阴影,内阴影需要添加inset
加大阴影的尺寸以及偏移量