【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-toppadding-rightpadding-bottompadding-left简写：Padding：10px;                 上下左右Padding：0 10px;                       上下      左右Padding:10px 20px 30px;          上   左右    下Padding:10px 20px 30px 40px; 上    右   下  左 外边距margin：元素与元素之间的距离margin -topmargin -rightmargin -bottommargin -left简写：margin：10px;            上下左右margin ：0 10px;                         上下  左右margin :10px 20px 30px;             上   左右  下margin :10px 20px 30px 40px;    上    右   下  左 

新增属性

Box-sizing:content-box/border-boxcontent-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