css学习(二)
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相关介绍
结构伪类
ul li:nth-child(2n + 1) { color: blue; }进行使用,其中n的取值为0->无穷
web-font的相关知识
相关使用
/* 下载字体文件ttf*/
/* 将这个字体引入到网页中 */
@font-face {
font-family: "why";
src: url("./fonts/AaQingHuanYuanTi-2.ttf");
}
/*使用*/
.box {
font-family: "why";
}
字体图标
- 下载字体图标
- 将ttf文件盒css文件导入项目
- 引入该css,然后进行类的添加
精灵图
<style>
.box {
background: #333;
}
.topbar {
background-image: url(../images/topbar_sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
i.hot-icon {
background-position: -192px 0;
width: 26px;
height: 13px;
}
i.logo-icon {
background-position: 0 -19px;
width: 157px;
height: 33px;
}
</style>
</head>
<body>
<div class="box">
<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>
<!-- <i class="topbar "></i> -->
</div>
cursor
浙公网安备 33010602011771号