首页 > 其他分享 >CSS盒子模型与定位

CSS盒子模型与定位

时间:2022-10-24 22:01:37浏览次数:39  
标签:box 定位 盒子 块级 元素 content 内联 CSS

盒子模型与定位

元素简单分三大类:块级元素,内联元素(行级),内联块级元素

块级元素:元素宽度在不设置的情况下,是它本身父容器的100%
常见的块级元素有:< div>,< p>,< h1>~< h6>,< ul>,< ol>,< dl>,< table>,等等

常见内联元素有:< span>,< a>

常见的内联块级元素有:< img>

盒子模型(所有html元素都可以看做盒子)

margin+border+padding+content=盒子

盒子的两种类型

  • box-sizing:content-box(默认的):元素的width=content宽度
  • box-sizing:border-box:元素的width=content+border+padding

对于行级元素,margin上下无效

建议优先级:width>padding>margin

标签:box,定位,盒子,块级,元素,content,内联,CSS
From: https://www.cnblogs.com/face-every/p/16823165.html

相关文章

  • CSS `@font-face` & font-family All In One
    CSS@font-face&font-familyAllInOne@font-face&font-family@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Regular-webfont.woff2")......
  • css-常用布局-圣杯
    双飞翼布局body<body><divclass="header">header</div><divclass="container"><divclass="middle">middle</div><divclass="left">lef......
  • CSS定位布局
    CSS定位布局static静态定位,也是position的默认值relative.box2{position:relative;Left:15px;top:15px;}相对定位,但是元素所占空间仍在原位absoluteposi......
  • css边框样式(css边框样式属性使用的是)
    CSS列表样式属性list是怎样的?  若list-style-image属性值为none或指定url地址的图片不能被显示时,此属性将发生作用。disc:CSS1实心圆circle:CSS1空心圆squ......
  • css颜色(css颜色表示方法)
    css如何改变按钮的背景颜色和文字颜色?ys{border:1solid#FFCC00;color:#FFCCFF;font-size:9pt;font-style:normal;font-variant:normal;font-weight:normal;height:1......
  • css-常用布局-基础的五种
    三栏布局:如果不考虑高度,即用内容填充高度的话,是可以用inline-block和calc()实现布局的。但适用性差。float和position的兼容性好,但float会用到calc属性影响兼容性。calc和......
  • 测试中发现Bug,如何定位分析原因
    当我们在测试过程中,遇到了Bug:我们应检查下是否环境问题、操作问题,如是,则一般不是Bug判断是前端还是后端的问题,可使用抓包工具看我们的数据传的是否有问题,如无问题则是后......
  • 【前端】总结一下前端css样式规范
    (总结一下前端css样式规范)前端样式CSS规范通用规范//badpadding-bottom:0px;margin:0em;//goodpadding-bottom:0;margin:0;如果CSS可以做到,就不要使用......
  • css 背景渐变
    1.渐变从左到右background:linear-gradient(toright,#000,#fff); 2.渐变从上到下background:linear-gradient(tobottom,#000,#fff); 3.角度渐变(60°)background......
  • Java-JVM调优jstack找出最耗cpu的线程&定位问题代码
    Java-JVM调优jstack找出最耗cpu的线程&定位问题代码 https://blog.csdn.net/shasiqq/article/details/109801683   JVM调优jstack找出最耗cpu的线程&定位问题代码......