CSS盒子模型

block(块级元素)

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

inline(行内元素)

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文确定类型)

applet ,button ,del ,iframe , ins ,map ,object , script

块级元素与行内元素的区别

  • 首先从视觉上来看多个行内元素在同一行,而块级元素独占一行
  • 其次块级元素可设置width和height,而行内元素不可以
  • 最后是关于margin和padding的设置,块级元素完全支持这俩个属性,而行内元素表现为横向有效,纵向无效

inline-block

  • 这个东西叫行内块元素,可以通过display属性来设置。
  • 该元素本质上属于块级元素,设置之后,可以使块级元素从视觉上表现为行内元素

inline-table

  • 该属性可将取消table换行,将其表现设置为与行内元素一样

list-item

  • 将多个元素作为列表显示,同时可在开头设置列表标记
div{
  display:list-item;
  list-style-type:circle;
  margin-left:10px
}

table的各种类型

  • 这是一个MMP的类型

none

  • 元素的display被指定为none之后元素将不会显示

对盒子使用阴影

  • 通过box-shadow对盒子设置阴影,具体用法与text-shadow完全相同(见上一篇博客)

box-sizing

  • 该属性用于指定盒模型大小是否指定范围
  • 可指定为content-box,表示该盒子的长宽仅指定内容部分,为默认值
  • 也可指定为border-box,表示盒子长宽包括内边距和边框的厚度
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏...
    秦至阅读 4,145评论 0 3
  • text-align: center的作用,作用哪些元素,让哪些元素水平居中。 text-align作为HTML元...
    邢烽朔阅读 3,101评论 0 1
  • 1 元素尺寸(1)设置元素尺寸div {width: 200px;height : 200px;} (2)限制元...
    allenMun阅读 2,548评论 0 0
  • 元素 常用的块状元素有: 、 、 ... 、 、 、 、 、 、 、 常用的内联元素有: 、 、 、 、 、 、...
    Looog阅读 2,607评论 0 1

友情链接更多精彩内容