[Java小工匠]CSS盒子模型-概述

1、盒子型简介

  在HTML文档中任何元素,都可以看作是一个盒子,因此理解盒子模型非常重要。一个盒子包含 盒子的内容、盒子内边距、盒子的边框、盒子的外边距。

image.png

最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2、浏览器兼容性

  W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。   IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。 解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

3、内联元素与块元素

  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。如果让行内元素变成块元素,通过将 display 属性设置为 block。还可以通过把 display 设置为 none,隐藏元素,不在文档流中占据空间。

4、CSS3 box-sizing

属性值content-box width=内容区宽度 height=内容区高度

 .test1{
     box-sizing:content-box; 
     width:200px;  
     padding:10px; 
     border:15px solid #eee; 
}

image.png

属性值border-box width=内容宽度+左填充+右填充+左边框+右边框 height=高度+顶部填充+底部填充+上边框+下边框

.test2{ 
    box-sizing:border-box; 
    width:200px;
    padding:10px; 
    border:15px solid #eee; 
}

原文发布于微信公众号 - 小工匠技术圈(xgn177971793771)

原文发表时间:2018-07-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏欧阳大哥的轮子

UIButton实现各种图文结合的效果以及原理

iOS的UIButton是一个非常常见而且常用的控件,我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只有文字的Button,也可以建立只有图片的Bu...

27410
来自专栏吾爱乐享

php学习之div+css盒子模型(二)

13820
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

20550
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

12040
来自专栏calmound

CSS元素分类

快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。                设置display:block...

30150
来自专栏康怀帅的专栏

CSS

CSS <style type="text/css"> </style> 注释 /*注释*/ 内联式 <p style="color:red"> </p> 嵌...

29440
来自专栏十月梦想

框模型

     元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

14630
来自专栏欧阳大哥的轮子

iOS的MyLayout布局系列-流式布局MyFlowLayout

     在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父...

27030
来自专栏CaiRui

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px...

19370
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

365100

扫码关注云+社区

领取腾讯云代金券