h5,css学习笔记

1.h5不分大小写。

2.常见的块级元素：div,p,h1-h6,ol,ul,li,dl,dt,menu,section,form,table, address。

3.常见的行内元素：span,strong,em,b,i,code,label。

4.常见的行内块元素：a,img,input,select。

块级元素主要用来做页面布局，内联元素主要用来选中文本设置样式，一般用块级元素包含内联元素。但是a标签可以包含任意元素无论块级元素或者内联元素，除了他本身。

5.p元素不可以包含任何其他的块级元素。

6.hover和active也可以为其他元素设置。

7.input:focus{

background-color:yellow;

  }

文本框获取焦点后修改背景颜色。

8.选择器的类型有元素选择器，全局选择器，id选择器，class选择器，组合选择器，后代选择器，子元素选择器，相领兄弟选择器，同级元素通用选择器（选择同伴元素里面的第几个），属性选择器，动态伪类选择器，结构性伪类选择器等等。

其中优先级是行内样式>id>class>元素选择器>全局选择器，跟元素越近样式就越有效，是服从就近原则。

9.网页的基本结构：网页的头部，网页的导航，网页的banner,网页的主体，网页的脚步。

10.浮动的元素都成为块级元素。浮动元素的父元素如果没有设置高度那么它的高度是由其子元素的内容撑开的，等子元素浮动的时候父元素的高度就会塌陷。解决父元素高度塌陷的方法有两种：第一，给父元素设置高度。第二给父元素添加一段代码如下：

clearfixed:after{

content:"1";

clear:both;

display:block;

visibility:hidden;

height:0;

}

第三，给父元素添加overflow：hidden；。第四，在浮动的元素添加一个空白的div盒子，给此div清除浮动。

11.text-decoration:none/underline/overline/line-through;。是文字修饰，

12.text-align:left/center/right;文字水平对齐方式。文本行高是line-height。如果一个块级元素里只有一行文字想把一行文字上下对齐到中间把line-height的值等于盒子高度。

text-transform:capitalize/uppercase/lowercase。只对英文使用，首字母大写/所有字母大写/所有字母小写。

letter-spacing字符之间的距离，word-spacing单词之间的距离，white-space:normal/nowrap;强制在同一行显示所有文本，合并多余的空白，直到文本结束或者遇到<br/>。

13.box-sizing:content-box/border-box;。标准盒子模型/怪异行盒子模型。

14.相对定位,绝对定位和固定定位。position-relative/absolute/fixed;。相对定位相对自己本身的位置定位，定位后保持自己的位置会占空间，绝对定位相对于开启定位的父元素定位，如果其父元素没开启定位那就相对浏览器定位不会保持原来的位置不占空间。固定定位是相对浏览器定位，定位后无论页面如何上下翻其位置再也不会随着页面动。

15.z-index是使用显示在那一层，比如z-index:999;显示在最上层，不会被别的盒子压下。

16.圆角：border-radius:10px;如果是椭圆：border-radius:10px/20px;

17.溢出处理：overflow:hidden/scroll/auto;隐藏/溢出的部分用滚动条来处理/无论溢出不溢出都用滚动条来处理。

18.text-overflow:clip(裁剪)/ellipsis(省略号);

19.text-shadow文字阴影，box-shadow盒子阴影。

20.背景属性：background-image:linear-gradient(red to top yellow);

21.边框属性：background-image:url(),url(),url();可以设置多个图片。background-position:left center;

background-clip:border-box/content-box;

22.html5新增的一些标签：header,nav,aside,address,footer,section,figure。figure标签是块级元素，一般适用于插入图片和相应的文字，默认图片在上显示文字在下，如果想图片在左侧文字在右侧显示那么对img设置左浮动。

<figure>

<img src=""/>

<figcaption>文字</figcaption>

</figure>

23.audio标签用于插入音频，video标签用于插入视频。autoplay="autoplay";是打开网页就自动播放，loop="3"表示顺还播放3次。

24.<input type="text" placeholder="请输入有效的电话号码"/>。placeholder的作用是在文本框里提示需要填写的内容。

25.css hack:对于不同的浏览器修改css样式。（针对不同的浏览器写出不同的css样式）

26.1)常见的bug和解决：图片下面的空隙：给图片设置img{vertical-align:middle;  display:bolck;}

     2)图片右侧的空隙：img{float:left;}

     3)给图片添加超链接时带边框，解决方案：img{border:none;}

      4)间距带来的问题解决方案：*{margin：0；padding：0；}

27.常用的过渡：过度一般跟hover，checked,active配合使用。transition-过渡。它的属性有如下：

transition-property:要改变的属性，比如宽度，高度或者颜色等;

transition-duration:持续时间，时间单位为s;

transition-timing-function:过渡的类型比如ease等;

transition-delay:延迟时间，单位s或ms;

语法如此：div{width:100px;

height:100px;

background:yellow;

transition:all 2s ease 3s;(all表示改变的类型为所有，也可以写width，height，bakground等。这是transition的复合应用)。

28.transform：变化，移动，旋转。transform有一下属性值：

1)transform:translateX(~px);平移多少多少像素。也可以按Y轴移动，transform:translateY(~px);

2)transform:rotate(~deg);旋转多少度。

3）transform:origin(~~);原点移动。

语法：div{

width:100px;

height:100px;

animation:name 2s ease 1s infinite;（animation的属性复合应用）

}

这里的name是提前编好的变化代码比如：

@keyframes name{

from{

transform:rotate(0deg);

width:100px;

height:100px;

}

to{

    transform:rotate(360deg);

    width:200px;

    height:200px;

   }

}

animation-name:~;

animation-duration:2s;

animation-timing-function:ease/linear;

animation-delay:1s;

animation-iteration:infinite;(无限顺还)

animation-derection:alternate;

animation-fill-mode:forwards/backwards;(播放前的状态)

animation-play-state:paused/runnig;（暂停或播放）