css盒子模型相关

  • 时间:
  • 来源:互联网
  • 文章标签:

css盒子模型相关

  • 块级元素与行内元素
  • 可以设置高度的元素
  • 边框border
  • 盒子模型在页面中的实际高度问题

块级元素与行内元素

块级元素(占一行):div、dl、form、h1 – h6、hr、ol、p、pre、table、ul;
行内元素(一行显示):a、br、img、input、label、q、select、span、strong、textarea;
可以通过display属性来进行转换
display:inline将元素显示为内联元素,元素前后没有换行符
行内元素无法设置宽和高,外边距只能设置左右的,无法设置上下的

可以设置高度的元素

HTML中可以设置宽度和高度的元素有块级元素和替换元素,行内元素无法设置宽和高;span标签属于行内元素,无法设置宽和高,只能由元素内的内容撑开,元素内有多少个字,元素就有多宽,无法设置宽和高;

边框border

边框样式的值
double定义双线边框
dotted定义点状边框
dashed定义虚线边框
solid定义实线边框

边框的样式设置有:border-style边框样式,border-width边框宽度,border-color边框颜色。

盒子模型在页面中的实际高度问题

盒子的实际宽度是:左边框+左内边距+内容宽度+右内边距+右边框;
盒子在页面中所占据的宽度是:左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距;
注意一个是实际高度,一个是实际占据高度。

本文链接http://www.taodudu.cc/news/show-83101.html