css的盒子模型及其它

CSS 专栏收录该内容
8 篇文章 0 订阅

盒子模型

盒子模型的概念

  • 在html中,把每一个元素都当做成一个盒子,拥有盒子的平面外形和空间
  • 盒模型由内容(content)+内边距(padding)+边框(border)+外边距(margin)4部分构成
    • 内容区域:你书写的内容或者子元素能够显示的区域
    • 内边距:撑开内容与边框的距离
    • 边框:元素的边框
    • 外边距:撑开元素和其他元素之间的距离

margin 0 auto居中

  • 在正常的布局中,块级元素具有满屏的属性,也就是在水平方向上占满父级的宽度
  • 满屏以后,内部元素的内容+内边距+边框+外边距 刚好是等于 父级的 内容区域的大小
  • 所以当水平方向上的 宽度 边框 内边距都是固定值的时候,在水平方向上margin设置auto的时候,默认左右平分剩余空间,达到水平居中效果
  • 当水平方向出现auto的时候,剩余空间会进行分配,当某一边不要 另外一边出现auto, 剩余空间就会直接给另外一边

垂直方向上的 margin : auto 0 为什么不行

  • 相对于水平方向来说,块元素在垂直方向上并没有满屏的属性,margin默认在上下的值都是0
  • 无论是否设置垂直方向的auto,表现出来的都是元素多高就占用多少,并没有剩余空间去平分

margin的父级塌陷

  • margin垂直方向叠加,父级塌陷

  • 当一个父级中 第一个元素的margin-top会塌陷给父级

  • 最后一个元素的margin-bottom会塌陷给父级

    防止父级和其他元素之间的间隙过大,当第一个和最后一个子元素的margn塌陷给父级以后 父级就可以和兄弟元素在垂直方向上进行叠加

  • 避免父级塌陷

    1. 给父级设置一个边框 边框的宽度不能为0

      防止影响视觉,可以设置透明(transparent)颜色

    2. 开启BFC(块级格式化上下文)

对行标签:

  • margin在垂直方向上不生效
  • 水平方向:margin-left:元素右移动,margin-right:如果右边有元素 后边的元素右移动

边框的设置

  • border-width:边框宽度
  • border-style:边框样式 solid 实现 dashed 虚线 dotted 点线
  • border-color:边框颜色
  • 合写:border:border-width border-style border-color
  • 注意:
    • 边框是在margin里边
    • 背景颜色在边框中显示(实线的时候,我们看不到)
    • 背景图片原点没有从边框开始 而是从padding开始的,但是可能会平铺到边框中

盒子模型概念总结

将一个元素设置盒模型显示

  • box-sizing属性:

    content-box:标准盒模型

    border-box:怪异盒模型

  • 在html中,把每一个元素都当做成一个盒子,拥有盒子的平面外形和空间

  • 盒子模型由 内容(content)、内边距(padding)、边框(border)、外边距(margin)四个构成

  • 盒子模型分为怪异盒子模型和标准盒子模型

  • 标准盒子模型的所占用空间的计算方式是 content+padding+border+margin

  • 怪异盒子模型所占的的空间计算方式是 content+margin(content内容是包含内容内边距和边框的)

  • 使用box-sizing属性可以切换盒子模型的方式

其它

a标签的4个伪类

  • 四个伪类

    link:当有链接属性时

    visited:当连接被访问过以后

    hover:当连接被鼠标悬浮的时候

    active:当连接在激活状态的时候

  • 位置不能互换

    这4个选择器 优先级是一样的。

    顺序改变就可能后边覆盖前边的

    比如visited写在最后,那么当连接被访问过后,访问过后的颜色就会覆盖hover和active

  • 记忆:爱恨法则 love-hate

  • hover适用于多数其他元素,并且伪元素也可以使用

常用伪元素

  • 伪元素可以理解为“虚假的元素”,他们虽然会在内容元素的前后插入额外的元素,但并不会在文档中生成,在文档的源代码当中并不能够找到它们。

  • 虽然在结构上是虚假元素,但是在表现上和普通元素没有什么区别,能为它们添加任何样式,比如改变文字颜色、添加背景、调整字体大小等等

  • after:

    /*在当前元素的最后边插入一个伪元素*/
    .box:after{
            content:"必须有";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
    }
    

    before:

    /*在当前元素的最前边插入一个伪元素*/
    .box:before{
            content:"hahahah";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 300px;
            top: 80px;
    }
    
  • 伪元素必须拥有content属性 ,才能生效,伪元素默认是一个行内元素,伪元素对其他属性基本都是支持的

css hack(浏览器兼容)

  • 由于不同的厂商的浏览器,或者是同一个浏览器不同的版本(ie),对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器,去写不同的样式,让代码能够兼容所有的浏览器

  • 比如:

    after伪元素清浮动,只有ie8及以上支持,所以要针对ie6、7书写一个开启haslayout

    *代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom:1;

    那么这个代码只有ie 6 7 认识

  • 为什么使用css hack

    第一种理解:让我们css 的代码兼容不同的浏览器

    第二种理解:我们可以为不同的浏览器定制不同的样式

  • css hack有3种表现方式:

    1、css属性前缀法 2、选择器前缀法 3、IE条件注释法

    空元素和替换元素

    空元素

    • 在html中 ,一个不可能存在子节点(注释节点,文本节点,元素节点)的元素就叫做空元素

    • 通常在空元素上使用 闭合标签 是无效的

      <input type="text"></input> :闭合标签无效

      br、hr、img、input、link、meta、source

    替换元素

    • 浏览器根据元素的标签和属性,来决定元素具体显示的内容
    • img、input、textarea、select、video、iframe是替换元素
    • audio、canvas标签在某些时候也是替换元素

BFC(块级格式化上下文)

它是页面 CSS 视觉渲染的一部分,用于决定块级盒的布局及浮动相互影响范围的一个区域

BFC 的创建

以下元素会创建 BFC

  • 根元素(html

  • 浮动元素(float 不为 none

  • 绝对固定定位元素(positionabsolutefixed

  • 表格的标题和单元格(displaytable-captiontable-cell

  • 匿名表格单元格元素(displaytableinline-table

  • 行内块元素(displayinline-block

  • overflow 的值不为 visible 的元素

    BFC 的范围

  • 简单来说,子元素如果又创建了一个新的 BFC,那么它里面的内容就不属于上一个 BFC 了,这体现了 BFC 隔离 的思想

  • 也就是所说,一个元素不能同时存在于两个 BFC 中

BFC 的应用

  • 自适应多栏布局

中间栏创建 BFC,左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触,同时浮动盒的区域不会和 BFC 重叠,所以中间栏的宽度会自适应

  • 防止外边距折叠

    创建新的 BFC ,让相邻的块级盒位于不同 BFC 下可以防止外边距折叠

  • 清除浮动

    BFC 内部的浮动元素也会参与高度计算,可以清除 BFC 内部的浮动

  • 1
    点赞
  • 3
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值