结论提取:
1.在没有设置大小的盒子,如果有padding,不会撑开盒子;
2.背景颜色与边框线的关系:把边框线写到li 而背景颜色在ul 就会是想要的效果 因为ul是大盒子里面包着很多小li;
3.看边框, 明明有了背景颜色加了padding却这么窄的原因 :背景颜色和padding不在一个选择器内;
4.设置行高会让文字居中但是会让height变高,仅设置height得到的就是想要的height但文字不居中。让文字居中的原理:在设置了height的基础上, 设置line-height等于height,就可以在不改变height 的基础上让文字居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新闻列表2(2</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 240px;
height: 307px;
/*上面宽和高因为下面这句padding 10px 所以各自减少20*/
margin: 100px auto;