边框属性
border边框
border-width:
1、一个值:四个方向;
2、两个值:上下 左右
3、三个值:上 左右
下
4、四个值:上 右
下
左
border-color、border-style也一样的设置
简写:
border:1px solid #fff;
属性值依次为:宽度,样式,颜色,顺序不能乱
给边框添加弧度
border-radius:150px;/50%;
边距
padding内边距
1、用来控制内容和盒子的位置关系;
2、边框内的距离都是内边距;
3、设置padding会让盒子变形,如果想要盒子的大小不变,加上了多少padding,盒子的大小就要减去多少;
4、 单一方向:
padding-left/padding-right/padding-top/padding-bottom:数值;
多个方向:
padding:
1、一个值:四个方向;
2、两个值:上下
左右
3、三个值:上
左右
下
4、四个值:上
右
下
左
内边距不能设置成负数
margin外边距
1、用来控制盒子和盒子之间的边距;
2、border外边的距离都可以设置外边距;
3、
单一方向
margin-left/margin-right/margin-top/margin-bottom
多个方向
1个值:四个方向
2个值:上下 左右
3个值:上 左右 下
4个值:上 右 下 左
4、 margin可以设置负值
5、margin: 0px auto;可以让块元素水平居中
![~~~~](https://i-blog.csdnimg.cn/blog_migrate/a8a365d3f9de910b3c08afd005ce68f9.png)
![~~~~](https://i-blog.csdnimg.cn/blog_migrate/a8a365d3f9de910b3c08afd005ce68f9.png)
1、父元素:border(给父元素设置边框)
float(给父元素设置浮动)
padding-top:1px;
padding-top:(margin-top的值)
overflow:hidden
2、子元素:float(给子元素设置浮动)
盒子模型的大小
盒子的总宽度: width+左右的padding+左右的border
盒子的总高度 height+上下的padding+上下的border
背景
背景颜色
background-color:#333fff
复制代码
背景图片
background-image:URL(图片路径)
复制代码
背景图片平铺属性
语法:选择符{background-repeat:no-repeat;
位置
background-positon:cener center;
background
background:yellow url(images/img13.jpg) no-repeat center center;
图片滚动
background-attachment:fixed/scroll;