html使用常见问题
行级元素
- span
- a
行级元素只能嵌套行级元素
行级元素居中的方式为 意为文本居中
text-align:center;
行级元素性质为不可设置宽高可设置背景色 多个行级元素可为一行
盒模型应用于行级元素 元素实际看到的大小=元素设置的大小+padding+border
添加左右外边距或内边距可调节词与词之间的距离
添加上下内外边距 不可以调节上下间的距离 文本也不可以上下窜动 不占据上下的空间
块级元素
- div
- p
- h
- ul li
块级元素可以嵌套块级元素/行级元素/行级块元素 h1-h6 ； p;特别不可以嵌套块级元素
块级元素居中的方法为 意为右移到中间位置
块级元素性质为可设置宽和高可设置背景色
margin:0 auto;
盒模型应用于块级元素 元素实际看到的大小=元素设置的大小+padding+border
外边距合并问题
并列关系
将想要的距离写到一个元素里
嵌套关系
解决方式
-
为父元素加溢出隐藏 overflow：hiden;
-
给父元素或子元素加绝对定位
( positon：relative相对定位 相对于本身进行的定位 定位后空间不会释放) ( position： absolute 绝对定位 相对于最近的已定位的祖先定位后空间会释放) (position：fixed 固定定位 定位后空间会释放 相对于body定位) (定位后可用z-index） -
给父元素或子元素加浮动
（ float：left 按照html结构的顺序从左到右排序 浮动后空间会释放） 元素浮动后会造成塌陷问题 解决方法 给父元素设置高度 给父元素设置溢出隐藏 给父元素里加一个空的字元素（块级元素），并且给这个子元素设置清除浮动 增加尾元素 .clearfix::after{ content:''; display:block; clear:none; } -
给父元素加边框
行级块元素
- img
- input
- buttom
行级块元素居中的方法为
text-align:center;
行级块语速自带边距
