CSS中的块级元素与行内元素

块级元素特性：
　　1.占据一整行，总是重起一行并且后面的元素也必须另起一行显示。
　　2.内联元素特性：
　　3.和其他内联元素显示在同一行。

块级元素列举如下：
　　div（文档分区）,article（文章内容）, aside（伴随内容）, audio（音频播放）, blockquote（块引用）, canvas（绘制图形）, dd（定义列表中定义条目描述）, dl（定义列表）, fieldset（表单元素分组）, figcaption（图文信息组标题）, figure（图文信息组）, footer（区段尾或页尾）, form（表单）, h1-h6（标题）, header（区段头或页头）, hgroup（标题组）, hr（水平分割线）, noscript（不支持脚本或禁用脚本时显示的内容）, ol（有序列表）, output（表单输出）, p（段落）, pre（预格式化文本）, section（一个页面区段）, table（表格）, tfoot（表脚注）, ul(无序列表), vidio（视频）。

常见块元素：

　　div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd

内嵌标签(行内/内联)(inline)

   1.在一行显示

   2.不支持宽高，对上下的margin和padding支持的也有问题

   3.代码换行会被解析成一个空格

　4.内嵌的宽度，有内容撑开

内联元素列举如下：
　　b（粗体）, big（大号字体）, i（倾斜）, small（小号字体）, tt（等宽）, abbr（缩写）, cite（引用）, code（计算机代码文本）, dfn（定义项目）, em（强调）, kbd（键盘文本）, strong（语气强调）, samp（样本文本）, var（定义变量）, a（链接）, bdo（元素可覆盖默认的文本方向）, br（换行）, img（图像）, map（图像映射）, object（对象）, q（引用）, script（定义客户端脚本）, span（组合行内元素）, sub（下标）, sup（上标）
button（按钮）, input（输入）, label（标注）, select（表单控件）, textarea（文本域）。

内嵌元素:

　　span,a,strong,em,time,mark

background 背景（集合样式）

       background-color   背景颜色

       background-image 背景图片 （添加路径 url（））

       同一个元素可以拥有多个背景，用逗号分开，先写的背景在上面

       background-repeat 背景图片平铺方式

              no-repeat（不平铺）

              repeat（平铺）

              repeat-x （水平平铺）

              repeat-y （纵向平铺）

       background-postion 背景定位

              关键字

                    x：left  center  right

                    y：top  center  bottom

              数值

                    x：10px/20%   （像素大小/百分比）

                    y：10px/20%

       background-attachment：fixed 固定图片不动

       background-origin  背景图位置

              border-box

              padding-box （默认）

              content-box   

       background-clip 背景裁切

              -webkit-text （文字背景，只限谷歌）

              border-box （默认）

              padding-box

              content-box   

       background-size 背景图大小（！！！手机端不建议使用）

              等比放大：contain（包含）

                      cover （覆盖）

       线性渐变

       background-image：linear-gradient（red,blue）  （有红色变蓝色 从上到下）

       渐变定位（从什么地方开始到什么地方结束）

       在（red,blue）中加入位置

              如：（red 50px,blue 100px） 也可加入百分比 

       渐变方向 deg

              在开是位置加入角度值 （角度默认180deg）

                     如：background-image：linear-gradient（120deg，red,blue）

       斑马线（就是平铺渐变）

              background-image：repeating-linear-gradient（）

       兼容IE6（方向）

              filter：progid:DXTmageTransform.Microsoft.gradient

                        (starColorstr='red',endColorstr='blue',GradientType='1');或者2

       径向渐变

              background-image：radial-gradient（起点  形状 大小 点）

       起点：可以是关键字（left，top，right，bottom）、具体数值或百分比

       形状：ellipse、aircle

       大小：具体数值或百分比，也可以是关键字

                最近端（closest-side）

                最近角（closest-corner）

                最远端（farthest-side）

                最远角（farthest-side）

                包含 contain      

                覆盖 cover

       ！！！火狐只支持关键字。

 

font 文字（集合样式）

       color 字体颜色

       font-size 文字大小

       font-family 字体

       font-weight 字体加粗与否

              bold 加粗

              normal 正常

       font-style 字体倾斜

              italic 倾斜

              nomral 正常

       line-height 行高

       字体语法：

              font：font-style  font-weight  font-size/line-height  font-family；

文本

       text-decoration 文本修饰

              line-through 删除线

              overline 上划线

              underline 下划线

              none 没有修饰

       text-algin 文本对齐方式

              Left               center          right

       text-indent 首行缩进

       white-space：nowrap 强制不换行（wrap 换行）

       word-spacing 单词间距

       letter-spacing 字母间距

       direction 文字排列方向

              rtl  右到左          

ltr  左到右

       unicode-bidi：bidi-override  改变文字的书写方式（从右到左）

       在某一元素内文字超出显示省略号

              white-space:nowrap;

              overflow:hidden;

              text-overflow:ellipsis;

 border 边框(复合样式，集合样式)

       border-top

       border-right

       border-bottom

       border-left

       border-top-width 上

       border-right-width 右

       border-bottom-width 下

       border-left-width 左

       border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)

       border-top-style

       border-right-style

       border-bottom-style

       bordder-left-style

       border-color 边框颜色

              关键字

              rgb(0-255,0-255,0-255);

              六位或者三位的一个十六进制的数字;

       border-top-color

       border-right-color

       border-bottom-color

       border-left-color

       border-radius 圆角半径

              列：border-radius:10px 20px 30px 40px           

       border-width 边框宽度

　　 border-image语法 ：

              border-image：border-image-sourceg  border-image-slice  border-image-repeat      

              -webkit-border-image:url(border.png) 27 27 stretch stretch;      

       border-image 给内容加入图片 仅限谷歌 要加如前缀 -webkit-

       border-image-sourceg 引入图片

       border-image-slice 切割图片 两个值（上下或左右）不用加px

       border-image-repeat 图片的排列方式

              round 平铺

              repeat 重复

              streth 拉伸

       border-colors 为边框加颜色（从外层一层层显示）

              只可在火狐下使用，并单独为某个方向上的边框设置

盒模型

       怪异盒模型

              在IE6,7,8,下，没有文档声明会进入怪异盒模型

              box-sizing：

                     border-box（怪异盒模型）

                     content-box （标准盒模型）     

       box-shadow

              inset （可选）内阴影

              x 偏移

              y 偏移

              模糊半径

              扩展半径

              阴影颜色

       阴影先写的在上边，后写的在下边

padding  

       padding 内填充(使元素和它的内容之前有一个空隙)

       padding:30px(上下左右);

       padding:30px(上下) 60px(左右);

       padding:10px(上) 30px(左右) 60px(下);

       padding:10px(上) 30px(右) 60px(下) 80px(左);

       padding-top

       padding-right

       padding-bottom

       padding-left

       padding不算在元素的width里边

       padding在元素的边框以里，并且padding会显示元素的背景

margin

       margin 外边距

       margin:30px(上下左右);

       margin:30px(上下) 60px(左右);

       margin:10px(上) 30px(左右) 60px(下);

       margin:10px(上) 30px(右) 60px(下) 80px(左);

       margin-top

       margin-right

       margin-bottom

       margin-left

       margin在元素的边框以外，并且margin不会显示元素的背景

       同级元素之间的距离用margin，父元素和子元素之间的距离用padding

 a 超链接

           href 页面地址      点击会跳到这个页面来

           href 压缩包        点击会下载这个压缩包

           href id名字    点击跳到这个id的元素的位置

       a 标签不继承父级的字体颜色

              a标签中不能再包含a标签

              span 标签区分样式用

              包含选择 a span{} 找到a标签下的span标签

       base 定义页面上的链接默认的打开方式和默认地址

                  新窗口打开页面 target="_blank"

                  当前窗口打开页面 target="_self"

table 表格

table 设置宽度之后，宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

      thead 表格头部

      tbody 表格主体

      tr 行

      th 单元格(加粗，居中)

      td 单元格

      colspan 横向合并单元格

      rowspan 纵向合并单元格        

       td,th 不支持margin

       tr，thead，tbody 不支持margin和padding     

       border-spacing:0; 单元格间距为0（IE6，7不支持）    

       border-collapse:collapse; 合并边框  

        单元格中的内容默认垂直居中,可通过设置vertical-align进行修改

        单元格设置 宽度，一竖列宽度都变，单元格设置 高度，一横行高度都变

       表格清除默认样式：

       table{border-collapse：collapse；}

       td，th{padding：0；border：1px；}

vertical-align 垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐)

       值           描述

       baseline          默认。元素放置在父元素的基线上。

       sub         垂直对齐文本的下标。

       super              垂直对齐文本的上标

       top          把元素的顶端与行中最高元素的顶端对齐

       text-top          把元素的顶端与父元素字体的顶端对齐

       middle           把此元素放置在父元素的中部。

       bottom           把元素的顶端与行中最低的元素的顶端对齐。

       text-bottom     把元素的底端与父元素字体的底端对齐。

       length    

       %           使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

       inherit            规定应该从父元素继承 vertical-align 属性的值。

float(浮动 left/right/none):

       1.使内嵌元素支持宽高

       2.使块元素在一行显示

       3.不设置宽度的时候,宽度由内容

       4.脱离文档流

浮动原理:

使元素脱离文档流,然后按照指定的方向去移动，直到碰到父级的边界，或者另外一个浮动元素停止  

文档流:文档流是文档中可显示对象在排列时所占用的位置。

 

BFC ( Box Formatting Context) 块级格式化上下文

      inline formatting context 行内格式化上下文

   

    BFC 作用

           1.清除内容浮动

           2.阻止margin向外传递

   

    触发BFC的条件:

           1.根节点

           2.float不为none的情况     

              3.display的值为inline-block、table-cell、table-caption

           4.overflow的值不为visible

           5.position的值为absolute或fixed

    overflow的值

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

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

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

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

          inherit            规定应该从父元素继承 overflow 属性的值。

          clear            元素的某个方向上不能有浮动元素（left、right、both、none）

清浮动的方法：

              1.给同为父元素设置 float

              2.给父元素设置display：inline-block；         

              3.给父元素设置overflow不为visible（默认值） 一般设为auto；

              4给父元素加个样式（加入clear）{ :after{content:"";display:block; clear:both;}  目前最流行的方法；} 

定位（position）

       position:relative; 相对定位(只加相对定位元素不会有任何变化)

              1.不脱离文档流(元素移走元素的初始位置，还会被保留)

              2.根据自己的原始位置来计算left(right)和top(bottom)值

              3.提升层级

       position:absolute; 绝对定位

              1. 脱离文档流

              2.提升层级

              3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没      有定位,就根据document来计算

              4.使内嵌元素支持宽高

              5.绝对定位之后不设置宽度，宽度有内容撑开

！！！！元素定位之后，默认情况下，后边的层级高于前边的元素

z-index 层级

       1.数值越大层级越高

       2.层级只在定位元素上起效果

       3.层级最好只在同级元素之间做比较

       document 是html的父级 

form 表单

       action 提交跳转地址

       常用控件-----

       textarea                       输入一段文本

       select                       下拉框  option

       input

              type="text"    文本输入框

              type="password"   密码框

              type="radio" 单选框

              type="checkbox"   复选框

              type="file"     上传控件

              type="submit"       提交按钮

              type="email"  邮箱       必须以@结尾

              type="tell"      电话 （移动设备自动弹出数字输出法）

              type="url"      网址

              type="range"  数值选择

              max="100" min="1" value="50" step(部署控制，每次移动多少)="10"

              type="number"      数字选择

              max="9" min="1" value="3" step="3"

              type="color"   取色器

              type="datetime-local"  时间（年月日小时）

                        time：        只有时间

                        date：        只有年月日

                        week：        第几周/年

                        month：       第几月/年

                 　　 value             值

                       name              数据名称

       常用属性-----

              checked 单选和复选的默认选中

              selected 的默认选中

              disabled 禁止控件的编辑和提交

              for=要辅助input的id           

       pattern：正则验证

              placeholder：提示文字信息（不兼容IE）

              autocomplete：是否保存用户输入值 on（默认）/off

              autofocus：指定表单获取输入焦点

              required：强制用户输入不能为空            

                    

                   

                               javascript

                              html

                               css

                 

      

表单草稿箱

              当用户想保存草稿箱时

              为submit加入

                     formaction="地址" 新的提交地址

                     formnovalidate 取消验证

       清除表单默认样式

              form{margin：0；}

              input，select，textarea{padding：0；margin：0；border：1px solid #000；}

              textarea{resize：none；overflow：auto；}

 

resize 属性规定是否可由用户调整元素的尺寸。

       注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。     

       值           描述

       none              用户无法调整元素的尺寸。

       both        用户可调整元素的高度和宽度。

       horizontal       用户可调整元素的宽度。

       vertical           用户可调整元素的高度。

伪类

       :link{} 此链接未被访问过

       :visited{} 此链接已访问

       :hover{} 鼠标移入

       :active{} 鼠标按下

       L-V-H-A

       ：target 点击后出发hash值 类似锚点a

       ：checked 被选中的单选框或复选框

文本伪类

       p：first-letter 第一个字

       p：first-line 第一行

       p：selection 选中的颜色改变

       p：after 元素末尾

       p：before 元素开始

       p：not（命的名） 排除掉谁     

结构性伪类：

       box h2:nth-child(3){background:Red;}

       找到h2标签的父级下边的第3个子元素,并且标签类型还必须是h2

 

       p:nth-of-type(3){background:Red;}

       找到p标签的父级下的第3个p标签

      

       :first-child == :nth-child(1)

       :last-child == :nth-last-child(1)

       :first-of-type == :nth-of-type(1)

       :last-of-type == :nth-last-of-type(1)             

       (其中括号里面的值可以是：odd（奇数）、even（偶数）、或者数学里面的数列（n、2n、）！)

鼠标交点

       outline：none；

透明

      opacity透明 0-1的小数 元素透明它里边所有的内容都会变成透明的

　　IE下透明度的设置

　　filter:alpha(opacity=50);

 

　　opacity: .5;

黑客

       在结尾加如：

       \0IE11至IE8的IE浏览器

       \9\0IE10至IE8的IE浏览器

       \9IE10及IE10之前的IE浏览器

       在开头加入：

       *,+IE7及IE7之前的IE浏览器支持

       _IE6及IE6之前的IE浏览器支持

       注释！！！！！！！！！！！！！！！！！！！

      

      

      

      

      

      

其他 IE 条件判断语句

      

       IE6下不支持png的透明

             

             

cursor其他取值    鼠标移入

       auto        ：标准光标 

       default        ：标准箭头 

       pointer       ：手形光标 

       wait           ：等待光标 

       text             ：I形光标 

       vertical-text  ：水平I形光标 

       no-drop       ：不可拖动光标 

       not-allowed  ：无效光标 

       help        ：帮助光标 

       all-scroll       ：三角方向标 

       move         ：移动标 

       crosshair     ：十字标

Html5中标签（包括新增常用）：