css 进阶

盒模型

  1. 网页就是多个盒子嵌套排列的结果
  2. 内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也将出现在内边距中
  3. 外边距是该元素与相邻元素之间的距离
  4. 如果给元素定义边框属性,边框将出现在内边距和外边距之间

IE 6背景色不能穿透边框,非标准的盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

去边框写法

IE 6中image标签默认有边框

    img {
            border: 0 none;/*去掉默认的边框*/
        }

外边距

顺序:上右下左

可以是负值,重叠

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 盒子模型的概念 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素...
    显然2017阅读 603评论 0 1
  • 1.CSS盒模型 border+margin+padding+content 网页由多个盒子组成。 IE...
    兔子爱上猪阅读 238评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,042评论 1 4
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 4,328评论 9 85