/* 布局相关样式
文档流默认的布局,浮动,定位,弹性盒子等*/
/* 盒模型、盒子模型、框模型(box model)*/
/*
网页中也有很多的元素,将各种元素摆放在合适的位置,
盒模型将页面所有元素的形状都统一了,你在布局时,
只需要考虑到元素的大小即可
*/
/* 盒模型 快递
内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒子
外边距 margin 快递离你的距离
盒子的大小:内容区、内边距、边框 有关系,跟外边距是没有关系
边框(border) 边框用来隔开盒子内部和盒子外部
设置边框,三个要素,缺一不可 宽度、颜色、样式
边框的宽度 border-width
1、可以设置多个值,以空格隔开即可
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
2、单独设置某一边的宽度
border-top-width: ;
border-bottom-width: ;
border-left-width: ;
border-right-width: ;
3、border-width 是由默认值,默认大小在1-3px
边框的颜色 border-color
1、可以设置多个值
规则跟border-width是一样
2、单独设置某一边的颜色
border-XXX-color:;
XXX:top、right、bottom、left
3、小箭头的写法
border-color: transparent transparent orange transparent ;
4、border-color 有默认值,默认值是黑色
边框的样式 border-style
1、边框样式的种类
solid 实线
dotted 点状的虚线
dashed 虚线
double 双线
2、可以写多个样式
规则跟border-width一样
3、单独设置某一边样式
border-XXX-style:;
XXX:top、right、bottom、left
4、border-style 默认值是none
-->
<!--
边框 border
1、语法: border: 大小 颜色 样式;
三要素顺序是无所谓
2、单独设置某一边的边框
border-top
border-right
border-bottom
border-left
3、 border-bottom: none; 不要某边边框
/* 内边距 padding 是边框和内容区之间的距离
1、可以单独设置某一边的内边距
padding-top:;
padding-right: ;
padding-bottom:;
padding-left:;
2、内边距padding简写
可以写多个值,规则跟border-width是一样
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px green solid;
/* padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px; */
padding: 10px 40px;
}
/* 创建一个子元素box2占满box1,box2把box1内容区撑满了*/
.box2 {
width: 100%;
height: 100%;
background-color: red;
}
*{
padding: 0;
margin: 0;
}
-->