HTML+CSS学习05-CSS盒子模型

盒子模型

网页元素基本都是盒子
CSS盒子模型：封装的html元素，包括外边距、边框、内边距、内容

边框border

边框会影响盒子的大小

border: border-width  border-style  border-color
//     边框粗细    边框样式    边框颜色
border:1px solid red;//无固定顺序 
border-style:solid;//实线
border-style:dashed;//虚线
border-style:dotted;//点线

分开写法

border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;

border-collapse:collapse;//表格单元格边框合并

内边距padding

边框与内容之间的距离，影响盒子大小

padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;

padding:5px;//上下左右
padding:5px 10px;//上下5  左右10
padding:5px 10px 20px;//上5  左右10  下20
padding:5px 10px 20px 30px;//上5  右10  下20  左30 

外边距margin

让块级盒子居中三种写法
盒子必须有宽度，设置左右外边距为auto

margin:auto;
margin:0 auto;
margin-left:auto;margin-right:auto;

让行内元素或行内块元素居中：给父元素添加text-align:center

外边距合并问题

使用margin定义块元素垂直外边距可能会出现外边距合并
相邻块元素：兄弟关系，一个设下外边距，一个设上外边距，取较大值

<div class="a">A</div>
<div class="b">B</div>
.a{
	width:50px;
	height:50px;
	margin-bottom:50px;
	}
.b{
	width:50px;
	height:50px;
	margin-top:30px;
	}
//A在B的上方50px位置

解决：尽量只给一个盒子设外边距

嵌套块元素：父子关系，两个同时设置上外边距，取较大值

<div class="a">A<div class="b">B</div></div>

.a{
	width: 100px;
	height: 100px;
	margin-top: 50px;
	background-color: #000000;
	}
.b{
	width: 30px;
	height: 30px;
	margin-top: 100px;
	background-color: #008855;
	}
//AB上边框紧贴，都距离页面顶部100px

解决：一：给父元素定义上边框；二：给父元素定义上内边距；三：给父元素添加overflow:hidden；四：浮动、固定、绝对定位等

圆角边框（CSS3新增）

border-radius:length;//与盒子边框的一个角，的两条边，相切的圆半径
//可以是数值或百分比

//分开写
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;

//圆形
.a{
	border-radius:50%;
	width:50px;
	height:50px;
	}
<div class="a"></div>

盒子阴影（CSS3新增）

阴影不占空间，不影响其他盒子排列

box-shadow:h-shadow v-shadow blur spread color insert;
//h-shadow v-shadow必写，水平和垂直位置的阴影，允许负值
//blur 模糊距离
//spread 阴影尺寸
//color 阴影颜色
//insert 设为内部阴影
//默认outset，但是写了outset会让阴影无效

文字阴影（CSS3新增）

text-shadow:h-shadow v-shadow blur color;