css盒子模型
认识盒子模型
我们可以把HTML每一个元素看出一个个的盒子.具备如图四个属性
因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边
- 内容
设置内容是通过宽度和高度设置的:
宽度设置: width,默认是auto,交给浏览器决定,块级元素独占一行.
高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!,例如
span
- padding
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距.
- border
边框相对于content/padding/margin来说特殊一些:- 边框具备宽度width;
- 边框具备样式style;
- 边框具备颜色color;
.box {
display: inline-block;
width: 300px;
height: 300px;
/* width */
/* border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px; */
/* border-width: 10px 20px 30px 40px; */
/* style */
/* border-top-style: solid;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge; */
/* border-style: solid dashed groove ridge; */
/* color */
/* border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: orange; */
/* border-color: red blue green orange; */
/* 总缩写属性 */
border: 10px solid red;
}
- border-radiu
.box {
/* 设置圆角 */
/* 设置具体的数值 */
/* border-radius: 20px; */
/* 设置百分比 */
/* 百分比相对于谁, 了解即可 */
border-radius: 10%;
}
- margn 外边距
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距
利用margn进行水平居中
<style>
body {
margin: 0;
padding: 0;
/* inline-level box */
/* 行内级: 行内非替换元素span/a 行内替换元素 img input inline-block */
/* text-align: center; */
}
.container {
width: 800px;
height: 150px;
background-color: #0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
width=width(内容)+padding+border+marginleft+marginright 设置0 auto利用浏览器设置margin进行居中
- 外轮廓和盒子阴影 不常用
- box-sizing
css设置背景
高级元素
<table>
<caption>热门股票</caption>
<thead>
<tr>
<th>排名</th>
<th>股票名称</th>
<th>股票代码</th>
<th>股票价格</th>
<th>股票的涨跌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>贵州茅台</td>
<td>600519</td>
<td>1800</td>
<td>5%</td>
</tr>
<tr>
<td>1</td>
<td>贵州茅台</td>
<td>600519</td>
<td>1800</td>
<td>5%</td>
</tr>
<tr>
<td>2</td>
<td>腾讯控股</td>
<td>00700</td>
<td>400</td>
<td>3%</td>
</tr>
<tr>
<td>3</td>
<td>五粮液</td>
<td>000858</td>
<td>160</td>
<td>8%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>其他</td>
<td>其他</td>
<td>其他</td>
<td>其他</td>
<td>其他</td>
</tr>
</tfoot>
</table>
也可以使用简单的tr,td进行操作,然后给第一行添加样式
- input相关介绍
