css盒子模型
2017-07-12 08:30
399 查看
一、盒子模型
1、在HTML中所有的标签都可以设置宽高、内边距、外边距、边框
2、box-sizing的取值：
2.1、content-box：元素的宽高等于边框+内边距+内容的宽高
2.2、border-box：元素的宽高=width属性值
3、如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来，如果不想外面的盒子被顶下来，那么需要给外面那个盒子添加边框属性
4、一般情况下如果要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin。margin本质上是用于控制兄弟关系之间的间隙
5、text-align：center；与margin：0 auto；的区别
text-align：center；用于设置盒子里的文字、图片水平居中，但是里面的盒子不会
margin：0 auto；让盒子自己水平居中
6、清空默认边距(外边距和内边距):为了更好的控制盒子的位置和计算盒子的宽高
格式：
注意点：通配符选择器会遍历当前界面所有标签，性能不好，故常用另一种：
7、行高line-height:20px;
如果只有一行文字，可以通过设置行高与盒子高height相等来使文字垂直居中；如果有多行文字，只能通过设置padding来使文字垂直居中
8、还原字体和字号
1、一个盒子中如果存储的是文字，会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
2、右边如果放不下一个文字，该文字就会换行显示，造成右边距误差
3、顶部的内边距是边框到行高顶部的距离
小练习
1、在HTML中所有的标签都可以设置宽高、内边距、外边距、边框
2、box-sizing的取值：
2.1、content-box：元素的宽高等于边框+内边距+内容的宽高
2.2、border-box：元素的宽高=width属性值
3、如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来，如果不想外面的盒子被顶下来，那么需要给外面那个盒子添加边框属性
4、一般情况下如果要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin。margin本质上是用于控制兄弟关系之间的间隙
5、text-align：center；与margin：0 auto；的区别
text-align：center；用于设置盒子里的文字、图片水平居中，但是里面的盒子不会
margin：0 auto；让盒子自己水平居中
6、清空默认边距(外边距和内边距):为了更好的控制盒子的位置和计算盒子的宽高
格式：
*{
margin: 0;
padding: 0;
}注意点：通配符选择器会遍历当前界面所有标签，性能不好，故常用另一种：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}7、行高line-height:20px;
如果只有一行文字，可以通过设置行高与盒子高height相等来使文字垂直居中；如果有多行文字，只能通过设置padding来使文字垂直居中
8、还原字体和字号
1、一个盒子中如果存储的是文字，会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
2、右边如果放不下一个文字，该文字就会换行显示，造成右边距误差
3、顶部的内边距是边框到行高顶部的距离
小练习
<head>
<meta charset="UTF-8">
<title>小练习</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0 }
body{
background-color: #efefef;
}
div{
margin: 0 auto;
box-sizing: border-box;
width: 372px;
height: 232px;
border: 1px solid #666;
padding-top: 10px;
padding-left: 10px;
}
h1{
font-size: 18px;
font-family: "微软雅黑";
border-bottom: 1px solid black;
}
span{
font-size: 16px;
}
ul{
list-style: none;
margin-top: 10px;
}
ul li{
line-height: 30px;
border-bottom: 1px dotted #666666;
font-family: "微软雅黑";
font-size: 12px;
color: #242424;
padding-left: 20px;
}
</style>
</head>
<body>
<div>
<h1>心情不好<span>/not happy</span></h1>
<ul>
<li>reason1</li>
<li>reason2</li>
<li>reason3</li>
<li>reason4</li>
<li>reason5</li>
</ul>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 