css--盒子模型
盒子模型
边框属性
边框宽度：border-width
边框颜色：border-color
边框样式：border-style
4个方向来表示（上下左右）
设置元素边框宽度
border-width：thin | medium | thick |长度值
边框颜色
border-color：颜色
边框样式
border-style：值 | none | hidden
padding
padding为内边距属性，设置元素的内容与内 边框之间的距离（内边距或填充），分四个方向（上、右、下、左）
padding-top：长度值 | 百分比
padding-right：长度值 | 百分比
padding-bottom：长度值 | 百分比
padding-left：长度值 | 百分比
注意：值不能为负数
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid} </style> </head> <body> <div>测试</div> </body> </html>
上面的代码效果是一个100*100的边框，测试两个字在左上角，如果我们想让文字距离顶部20px，就可以加上padding-top
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid; padding-top: 20px; } </style> </head> <body> <div>测试</div> </body> </html>
说明，因为加了内填充padding-top: 20px，所以之前的100*100的边框的高度就变为了120，宽度还是100
如果想距离左边30px，就可以加上padding-left
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{width: 100px;height: 100px; border: 1px red solid; padding-top: 20px; padding-left: 30px; } </style> </head> <body> <div>测试</div> </body> </html>
说明：边框的宽度增加了30px
如果要给内容的上下左右都增加padding，我们可以简写‘
padding:值1; 4个方向都为值1
padding:值1值2; 上下=值1,左右=值2
padding:值1值2值3; 上=值1,左右=值2,下=值3
padding:值1值2值3值4: 上=值1,右=值2,下=值3,左=值2
margin
margin为内边距属性，设置元素与元素之间的距离（外边距），分四个方向（上、右、下、左）
margin-top：长度值 | 百分比 | auto
margin-right：长度值 | 百分比 | auto
margin-bottom：长度值 | 百分比 | auto
margin-left：长度值 | 百分比 | auto
说明：值可为负值
margin:值1; 4个方向都为值1 margin:值1值2; 上下=值1,左右=值2 margin:值1值2值3; 上=值1,左右=值2,下=值3 margin:值1值2值3值4: 上=值1,右=值2,下=值3,左=值2
外边距属性
默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p......
声明margin属性，覆盖默认样式
body,h1,h6,p{margin:0;}
margin值为auto，实现水平方向居中显示，由浏览器计算外边距
垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度=两个发生合并外边距的高度中的最大值
盒子模型的计算
在CSS中，width和height指的是内容区域的宽度和高度
增加内边距，边框，和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸
display属性
inline：元素将显示为内联元素，元素前后没有换行符
block：元素将显示为块级元素，元素前后会带有换行符
inline-block：行内块元素，元素呈现为inline，具有block相应特性
none：此元素不会被显示
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{color: red;} span{display: none} div:hover span{display: inline} </style> </head> <body> <div href="#">指我。。。 <span > 捉迷藏。。。 </span> </div> </body> </html>
1.相应内联元素及使用 display: inline设置成内联元素的元素width和 height属性无效。
水平方向 margin-left/ margin- right/ padding-left / padding-right有效
垂直方向 margin-top/ margin- bottom/ padding-top/padding- bottom无效
2.块级元素及使用 display: block设置成块级元素的元素width/ height/ margin/ padding属性都生效
