CSS属性进阶

1.文本常用样式属性进阶：

• text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

• text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px

CSS部分: 
<style>
    .box {
        width:80px;
        height:30px;
        background: pink;
        text-align: center;
    }
    .pbox {
    	/* css里面默认的字体大小是16px */
    	font-size: 20px;
   	 	text-indent: 32px;
    }
</style>

HTML部分:
<div class="box">
    <p>
    	你好世界
    </p>
</div>
<p class="pbox">
    大头儿子小头爸爸
    一对好朋友 快乐父子俩
    儿子的头大手儿小
    爸爸的头小手儿很大
    大手牵小手
    走路不怕滑
    走呀走呀走 走 走
    转眼儿子就长大
    转眼儿子就长大
</p>

2. display属性

作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示

display 属性规定元素应该生成的框的类型。

display 的默认属性值是 inline, 此元素会被显示为内联元素

display属性是用来设置元素的类型及隐藏的，常用的属性有：

• none 元素隐藏且不占位置
• block 此元素会被显示为块元素
• inline 此元素会被显示为内联元素
• inline-block 行内块元素 ( 了解 )

CSS部分: 
<style>
    div {
        display: inline;  
    }
    
    a {
        display: block;
    }
    
    .pbox {
        width: 200px;
        height: 200px;
        background: pink;
        display: none;
    }
</style>

HTML部分:
<div>
    <div>我是要成为海贼王的男人</div>
    <div>海贼王下面的div</div>
    
    <a href="#">这是第一个链接</a>
    <a href="#">这是第二个链接</a>
    
    <p class="pbox" style="display:block">
        葫芦娃 葫芦娃 一根藤上七朵花 小小树藤是我家 啦啦啦啦 叮当当咚咚当当　浇不大 叮当当咚咚当当 是我家 啦啦啦啦
    </p>
</div>

font:

font: 样式属性是一个集合, 可以吧关于 font 的都放到这个属性里面:

使用方法:

<style>
	div {
       font:  bold italic 18px/20px  arial; 
	}
</style>


HTML部分:
<div>这是div里面的文字</div>

其中: arial 是一种字体, 和 微软雅黑一样.

​ font-size 和 font-family 的值是必需的。

• font-style 定义字体的风格
  • normal: 正常
  • italic: 浏览器会显示一个2斜体的字体样式。
• font-variant 能把字体变小一号并且全大写显示 small-caps 变小一号并且全大写显示 normal 正常
• font-weight 是否加粗 bold 是加粗 normal 正常
• font-size/line-height 字体大小 / 行高大小
• font-family 字体类型

3. CSS元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。

2、hidden 内容会被修剪，并且其余内容是不可见的。

3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

CSS部分: 
<style>
    div {
        width:100px;
        height:100px;
        overflow: auto;
    }
</style>

HTML部分:
<div>
	格叽格叽~
    <br><br>
    格叽格叽~~
    <br><br>
    格叽~格叽~~
    <br><br>
</div>