1、a.无意义标签 div,span 主要用来布局 b.一级标签 body 一个页面中只有一个 c.二级标签 div,span… d.三级标签 p
2、布尔属性的样式 reversed 反转 open 打开 checked 默认选中,用于单选或者多选 disabled 禁止选中状态 readonly 只读 multiple 是否可以多选 selected 默认选中下拉框中的某个值 autofocus 默认提醒 required 必须输入不能为空 controls 显示控制条 autoplay 自动播放 loop 循环
3、注释的作用 代码更具可读性,便于维护
4、CSS优先级 行内样式 > 外部样式 = 内嵌式 (就近原则)
5、外边距合并问题 1)父子级 给父级加边框属性 给父级加padding 给子级或父级一方添加浮动 给子级或父级一方添加绝对定位 给子级或父级一方添加display:inline-block; 给父级元素添加overflow:hidden; 2) 兄弟级 垂直方向,外边距如果都是正数,则不会叠加而是会合并,且会取最大的值
垂直方向,外边距如果有一个为负数,则会进行叠加。 垂直方向,外边距如果都是负数,则不会叠加而是会合并,且会取绝对值较大的值6、显示与隐藏 display:none/block 隐藏的时候空间也会进行隐藏 visibility:visible/hidden 隐藏的时候原来所占据的空间依然占据
7、 元素的水平居中 1)、行内元素的水平居中:text-align 2)、块级元素的水平居中:margin:0 auto
元素的垂直居中 1)、行内元素:line-height设置为与父级元素的高度一样大 2)、块级元素:可以给父级使用相对定位,子级使用绝对定位并margin:auto;,将top、left、right、bottom为0 3)、给父级和子级都加绝对定位,再给子级添加top:calc(50% - 子级元素高度一半) left:calc(50% - 子级元素宽度一半) 4)、给父级相对定位,子级绝对定位:left:50%;top:50%; margin-left:-子级元素宽度一半;margin-top:-子级元素高度一半 5)、给父级一个display:flex; align-items:center;再给子级添加:margin:0 auto;
8、盒子模型 盒模型由外而内包括:边距(margin、padding)、边框(border)、填充(padding)、内容(content) 盒子模型: a、box-sizing:content-box;(标准盒子模型)width和height是指元素中内容的宽高 b、box-sizing:border-box;(IE盒子模型)width和height是指元素的宽高
9、行内元素和块状元素的区别? 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin 上下无效,padding上下无效 块级元素:各占据一行,垂直方向排列
10、清除浮动的方法 1)、使用额外的标签clear:both 在浮动元素下面添加一个空标签,在这个标签中设置clear:both; 2)、使用overflow:hidden属性 父元素定义overflow:hidden,此时,浏览器会自动检查浮动区域的高度; 3)、使用伪元素:after清除浮动 .parent:after{ // 定义元素前后的生成内容,这里是定义元素后的空内容 content: ‘’; display: block; clear: both; } 在元素最后定义一个空的内容,然后让该空的内容来清除浮动;