HTML5和CSS3提高

 

 

 

 

 

 

 

 不能总是input和textarea，有些文本框可以是只能输入数字，也不能每个盒子都是div，区分不了。

 

 

 

 

 

 

 

 

 

 

 

 display：block

 

 

 

 最好用mp4的格式。

 

 为了照顾兼容性问题。

 

 

 

 

 

 

 

 设置这个就是默认播放了。

 

 

 显示播放控件，左侧暂停播放按钮，右侧声音和放大等。

 

 

 

 

 

 

 

 

 但是谷歌把自动播放的功能禁用了。得要有控件。

 

 

   播放控件：

 

 

 

 

 

 

 

 

 

 

 

输入错误指定格式就会提醒。这些新增的表单到后面不用js来验证了，方便太多了。这些也可以在手机上展示自带的。

 

 

 

 

 

 

 文本框里的默认小字可以用伪元素修改样式。

 

 记住以前输入的内容，但不太安全。所以一般都是off。不要记录我的输入过的内容。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 第二个选择器更加详尽。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 直接写n的话就代表了选择了所有孩子。一直往下找，找到最后一个。还不能写其他字母，只能写n

 

 

 

 n都是从0开始的。

 

 

 

 这个项目就直接把第五个第十个盒子选出来，去掉右边距。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 设置高宽没有用，因为是行内元素，只能改变背景颜色。

 

 除非变为行内块元素。可以加浮动也可以加定位来转换模式。

 

 以前，准备两个盒子，一个父级的div盒子和子级div盒子。父子级嵌套。

现在就用伪元素选择器。就不用插入html标签了。

伪元素选择器会创建一个选择器，然后再把这个选择器渲染出来。

 

 

 还要用到定位关系，子绝父相。

  

 

 

 

 简便了html的代码，不用添加盒子。

 

 

 文字符号也可以转义一下。

 

 

以前：

 

 然后把mask删了。也把样式里面的mask改成.tudou::before

 

 

 

 

 

 

 

 

 

 

 

 

 每次都要插入一个标签，很麻烦，要是多了盒子就会插入多的标签。

 

 

 

 有点像额外标签法。

 

 

第二种方法：闭合浮动了，前后都加盒子。双伪元素。

 

 

display：table  把前后两个盒子before和after放在一行上，如果是display：block的话就会上下放置。

 

    减少了边框border和padding的增加导致模型原本的大小变大，要计算相减原来模型的高宽。

 

 

 

 content是不变的，依然会撑大盒子。border的话就是会自动改变其他值，不会改变原来盒子的大小。

 

 

 

 padding+border不会超过width宽度。

 以后可以初始化这样：

 

 

 

 

 

 

 

 函数是js里面会详细讲。现在记住blur就好。

 

 

 

 

 

 

 

子盒子会随父盒子一起变化。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 又想改高又想改宽的话只要加逗号就好了。如果再写一个transition的话，就会出现样式冲突问题。要是想所有都变就写一个all就好了。和hover一起使用这个过渡效果。

 

 

 

 

 

 

 

 

 

 

  

 

 

 

 

 

 

 

 

 

 

 

 （重点）