web开发——CSS样式（基础2）

这里总结一下在学习CSS过程中的样式。

1、高度和宽度

.size{
    height: 300px;
    width: 500px;
}

• 宽度支持百分比，高度不支持。
• 行内标签：默认无效
• 块级标签：默认有效（右侧会有空白区域无法使用，后面有方法可以取消）

2、块级和行内标签

• 块级：使用块级标签，设置高度和宽度时，可能会有右侧部分无法使用，留有空白
• 行内：行内标签无法使用高度和宽度进行更改，具有一定的限制。
• CSS样式：可以使用标签

  display:inline-block

  它即具有块级标签的特点，又具有行内标签的特点，可以如下设置：

.size{
    display: inline-block;
    height: 50px;
    width: 100px;
    border: 1px solid red;
}

效果如下：

<span class="size">这是一个改后的行内标签</span>
<span>行标签后面的内容</span>
<div class="size">只是一个改后的块级标签</div>
<span>这两部分现在一样了，设置多少就有多大</span>

 div虽然默认是一个块级标签，但是可以当成一个行内标签来使用：

<div style="display: inline;">这是一个改后的块级标签</div>
<span>嗳~我和大哥一行了！</span>

看看效果：

 同样，span虽然默认是一个行内标签，但也可以当成一个块级标签使用：

<div style="display: inline;">块级标签(改)：小伙子挺牛皮哦。</div>
<span style="display: block">行内标签(改)：名字给咱改一哈呗</span>

效果如下：

 

 3、字体设置

• 字号大小

font-size: 58px

• 字体粗细

font-weight: 400px

• 字体格式：可以选择字体

font-family: "Helvetica Neue", sans-serif

4、文字对齐方式

• 水平方向居中

text-align: center; /* 水平方向居中 */

• 垂直方向居中

line-height: 59px; /* 垂直方向居中 */

垂直方向居中设置，是将line-height设置成height的值，字只能有一行才行。

5、浮动

<div>
    <span>左边</span>
    <span style="float: right">右边</span><!--浮动到块级标签右边-->
</div>

效果如图：

 这里可以修改块级标签，让块级标签不再占用过多地方，用多少就占多少。

.c1{
	float: left;
	width: 100px;
	height: 80px;
	border: 1px solid red;
}

<div>
	<div class="c1"></div>
	<div class="c1"></div>
	<div class="c1"></div>
	<div class="c1"></div>
</div>

效果如图：

 注意：

标签浮动起来之后，就脱离了文档流。父类的标签样式将无法使用，需要在子类的末尾将它们“拉”回来。

<div style="background-color: aqua">
	<div class="c1"></div>
	<div class="c1"></div>
	<div class="c1"></div>
	<div class="c1"></div>
	<div style="clear: both;"></div>
</div>
<div>就是这样</div>

 6、内边距

.c1{
    height: 200px;
	width: 200px;
	border: 1px solid red;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

<div class="size">
	<div style="background-color: darkkhaki">这是一个内边框设置</div>
	<div>第二行段落</div>
</div>

效果如图： 

padding-top:上边距    padding-left:左边距    padding-right:右边距    padding-bottom:下边距

四个边距距离相同时，可以用padding：

padding: 20px;

不相同时也能用padding设置：

padding: 20px 10px 22px 30px;

顺时针设置上边距、右边距、下边距、左边距。

7、外边距

• 是和外部的距离用margin

<div style="background-color: darkkhaki;height: 200px"></div>
<div style="background-color: aqua;height: 100px;margin-top: 20px"></div>

 margin-top:上边距    margin-left:左边距    margin-right:右边距    margin-bottom:下边距

margin: 0 auto

上下边距为0，左右边距为默认居中。