【5】CSS段落属性及盒模型

css段落属性

text-decoration：文字修饰
         none 无修饰
        underline下划线
        line-through删除线
        overline:上划线
text-align:left/center/right水平对齐方式
text-indent ：2em;     文本缩进
line-height  24px/150%/1.5    文本行高 
letter-spacing： <length>设置标签的字符之间的最小，最大和最佳间隙
word-spacing：<length>

设置标签的单词之间的最小，最大和最佳间隙。或者说，单词之间空格的大小。值是 数值单位可以是px或em

text-transform： capitalize | uppercase | lowercase
（文字大小写转换，值分别是， 将单词首字母转大写 | 所有字母转大写 | 所有字母转小写，只对英文单词起作用。）
white-space：normal | nowrap 
    normal： 默认处理方式。 
    nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。 

尺寸属性——指内容的大小Width   宽Height  高
<div></div>相当于一个容器可以容纳：段落、标题、表格、图片等
属性值掌握用数值加单位为元素设置宽度和高度 

内填充padding :内容与边框之间的距离
padding-top
padding-right
padding-bottom
padding-left

简写：
Padding：10px;                 上下左右
Padding：0 10px;                       上下      左右
Padding:10px 20px 30px;          上   左右    下
Padding:10px 20px 30px 40px; 上    右   下  左 

外边距margin：元素与元素之间的距离
margin -top
margin -right
margin -bottom
margin -left

简写：
margin：10px;            上下左右
margin ：0 10px;                         上下  左右
margin :10px 20px 30px;             上   左右  下
margin :10px 20px 30px 40px;    上    右   下  左 

新增属性

Box-sizing:content-box/border-box

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。 

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 

note

html标签--结构（超文本标记语言）
1：站点的建立
2：html基本结构
3：html标签(因为基本组成单位是:标签)
    单<hr/><img/><input/></br><meta/><link/>    

    双标签
    行内
        h1-h6
        p
        div
        ul li
        ol li
        dl dt dd
        form
        table
        tr  
    行内
        span
        a
        b
        strong
        i
        em
    行内块级元素 display:inline-block
        img
        input
        selecte
        textarea

【CSS表现】：(层叠样式表)  | 行为：javascript
        作用：修饰美化html标签
        【样式表】
            四种  
                行内
                内部
                链接<link href="路径" rel="style/sheet" type="text/css"/>
                导入<style>@import<style>
            样式表优先级：
                就近原则

        【选择器】
                基本选择器 : #id  .类class  基本全局* element
                关系选择器 ：
                            群组：#id,.class,.element{}
                            后代：父 后代{}
                            子元素： 父> 子{}
                动态伪劣选择器:原则（爱恨 LoVeHAte）
                        :link
                        :visited
                        :hover
                        :active
                :nth伪劣选择器
                        :first-child{}
                        :last-child{}
                        :nth-child(n){}
        【css属性】
                【文字属性】：
                    color:
                    font-size:12px 14px 16
                    font-family:微软雅黑,mcrosoft yahei,宋体,黑体;
                    font-style:italic/normal;
                    font-weight:bold/normal;
                【段落属性】：
                    text-align:left/ceenter/right
                    text-indent:2em
                    text-decoration:none/underline/overline/line-through
                    line-height:20px/150%/1.5;
                    line-height=height(只有一行文本居中设置方式)
                【背景属性】;
                    background-color:
                    background-image:
                    background-repeat:
                    background-position:

                    background:...复合属性

                【列表属性】：
                    list-style:none去掉项目符号
                    list-style-type:列表的类型
                    list-style-image:
                    list-style-position:inside|outside  设置位置

                【段落属性】：
                    text-transform:capitalize(首字母大写)|uppercase|lowercase运用于英文网站
                    letter-spacing:设置子与字之间的距离
                    word-spacing:单词语单词之间的距离
                    white-space:normal|nowrap(不换行)

                盒模型：    
                    把所有的变迁都看作是一个盒子
                    盒子组成部分：
                            内容宽+内边距(左右)+边框+外边距
                            内容高+内边距(上下)+边框+外边距

                            width:
                            height；
                        【边框】(border)
                                border-left:
                                border-right:
                                border-top:
                                border-bottom:
                        四条边都一样的边框
                                border-style:(边框样式)solid（实线）|dashed(虚线)|dotted(点线)|double（双线）
                                border-color:#000;背景颜色一般用rgba形式，其他少用
                                border-width:1px;
                                border:1px red solid（复合属性）

                        常用
                            border:none
                            border:1px solid red;
                            border-bottom:1px solid red;

                        【内边距】(padding)内容到边框的距离  相对值
                                paddding-left:
                                padding-right:
                                padding-top:
                                paddint-bottom:

                                padding:10px; 上下左右都是10px;
                                padding:10px, 20px;上下10px    左右20px
                                padding:10px  20px 30px; 上10 左右20px   30 下
                                padding:10px 10px 10px 10px 顺时针上右下左
                                padding:10px 0 0 0【尽量都写复合属性】

                        【内边距】：给外侧的元素设置里面的距离

                        外边距: margin  标签与标签之间的距离    相对
                                margin-left:
                                margin-right:
                                margin-top:
                                margin-bottom:
                                【能加margin不加padding  padding影响盒子的宽度|margin不影响】

                        注意问题;
                                    对于块级元素来说：上下的外边距取最大值，左右外边距是累加
                                    对于行内元素来说：上下的外边距不起作用;
                                    对于行内块元素来说：(img\input\select\textare)上下左右边距都是累加的



            一个盒子的实际的宽度;     
                    盒子的宽度+边框(上下)+内边距(左右)+内边距(左右)
            默认情况下， 所有的标签都带有内外边距
        常用全局属性的设置
                *{
                    margin:0;
                    padding:0;
                    box-sizing:border-box;
                }
                body{
                    font-size:12px;
                    font-family:microsoft yahei,微软雅黑;
                    width:1060px;
                    margin:0 auto;
                }
                ul,ol{
                    list-style:none;
}
                img{
                    border:none;
                }
                a{
                    text-decoration:none;
                }

                块级元素居中方式；marigin:0 auto;
                行内元素居中：text-align:center;       

        CSS3新增属性：<盒模型模式>
            box-sizing:border-box|content-box