码迷,mamicode.com
首页 > Web开发 > 详细

我学到了那些HTML5 简单标签

时间:2017-04-24 01:02:16      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:under   显示   nbsp   fixed   循环   ack   背景   顺序   中间   

块级格式化上下文:在父级建bfc,子级浮动导致高度塌陷可以找回高度         overfolw:hidden

 

常见会触发bfc的:1.根元素  2.folat   3. overolw:auto scroll ,hidden4.display:table-cell, table-caption      inline-block,flex, inline-flex5.position:absolut,fixed 

定位:相对定位,相对于自身的位置移动   postion:relative

绝对定位:脱离文档流  position:absolute

非静态定位:position:relative

固定定位,脱离文档流,以视口为准  position:fixed

z-index 层数和定位一起用 可以把覆盖的内容显示出来

在父级里面 子级相对定位就跑不出去,以包含他的上一级为准

 

 

浮动   脱离文档流

float:left/right 左浮动/右浮动   右浮动后顺序会乱 可以先左浮动之后浮动他的父级

去掉无序列表的小圆点:

list-style:none;

     upper-coman;变成大写

     lower-roman;变成小写

     upper-alpha;/lower-alpha   英文大小写

虚线  boder:  px dased 颜色;

点线 boder:  px dotted       ;双实线  boder: px   double

定义四个方向的样式 只需要在  boder-方向  后面的内容同上

长度和宽度一样的话可以用  boder-reius:50%  可以调成圆形

boder-reius:px  px  px  px  可以把四个方向的角 调成圆角

 

颜色渐变     

    background:linear-gradient(颜色   颜色)

 

外边框缩进

*{margin:0px;padding:0px}

 

 

 

元素阴影

box-shadow:px  px 模糊值px  外延颜色;

线性渐变

background:linear-gradient(to right,red,yellow);角度渐变   90deg

径向渐变

 background:radial-gradient(red px;yellow    px

那些样式需要渐变   匀速

transition:all linear  1s;

循环

@keyframes box1{

from{

      background-----

     }

}

to{background----}

动画属性animation   

infinite  循环次数无线

 

行内标记准换为块级

display:black

line-height:px

 

浮动

float:left/rite  左右浮动

右浮动会导致顺序变乱   可以先左浮动  后浮动他的父级

clear:both  清除浮动

子级浮动  父级高度会塌陷  行内元素浮动后会视为块级

 

在浮动文本元素时候设置宽度

 

 

定视口

 

background:颜色  url(图片路径)  no-repeat不平铺

 

 

 

{

width

height

background:url()no-repent

}

hover{

background-position:x   y

}

背景图片设置

background-image:url(路径)

平铺方式

 

none不平铺

横向平铺repeat-x

纵向平铺repeat-y

固定在左上角  background-position:topright;

 固定中间                 center  center;

                      px   px

改变图片大小               size:  100%:100%;

横向铺满    cover;     /contain

 

 

固定定主background- attachment:fixed;

 

 

 

文字倾斜

font-style:oblique

加粗

font-weight:bole

改变字体大小

font-weight:normal

 

文本首行缩进20px

text-indent:20px

词间距

word-spacing:px

词间距

letter-spacing:px

行高

line-height

居中

text-alight:center

加下划线

text-decorationg:underlin

加上划先

overline

字中间划过

变成大写/小写

text-transform:upprecase/lowercase

line-thyough

去下划线

none

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

我学到了那些HTML5 简单标签

标签:under   显示   nbsp   fixed   循环   ack   背景   顺序   中间   

原文地址:http://www.cnblogs.com/liutk/p/6746552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!