分清行内元素、行内块元素、块元素
如果你是个小白,看到这里可能会有些困惑,因为我是系统的学习了HTML和css。并且我自己练习了写京东、新浪、政府部门的网页等,在布局的过程中遇到了较大的困难。如果有和我一样困惑的小伙伴遇到了布局问题可以参考一下,没有的话也没有关系,只要有帮到你们的地方就可以了。
大家可以自己试试每个标签,他们有的标签自带属性,用谷歌浏览器的检查。橙色的margin,绿色的是padding,蓝色的内容。
行内元素
不知道是我自己学的肤浅还是怎么的,我只接触到了a、span。也是他们在我做网页的时候总是不能按着官网样式实现,一般a和span都会转换成块或者行内块。display:block; display:inline-block;看你具体的使用情况,像京东的导航中,ul>li>a
就会把它变成款。而如果你想插入一些小图标,把span变成inline-block即可。或许你也遇到了给他们浮动没有效果,但是其实他们可以**。行内元素浮动后,都会变成行内块**。他们的特点是:不独占一整行,不可以设置宽高。宽高为内容的宽高。
行内块元素
input、img.
特点:不独占一整行,可以设置宽高。
块元素
div、p、ul、li、dl、dd、dt、table
特点:独占一整行,可以设置宽高,宽是父元素的宽,高时内容的高度