CSS三大模块

ZzZzZz
258 阅读18分钟

盒子模型

  • 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成 image.png
  • 所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小，因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置

image.png

盒子属性

width 元素宽度

  • width用来给元素设置宽度，只有块(block)元素或者行内块(inline-block)元素才能设置

height 元素高度

  • height用来给元素设置高度，只有块(block)元素或者行内块(inline-block)元素才能设置

border 盒子边框

  • border: border-width || border-style || border-color
    • border-width：设置边框粗细
    • border-style：设置边框样式
      • none：无边框即忽略所有边框的宽度（默认值）
      • solid：边框为单实现（最为常用的）
      • dashed：边框为虚线
      • dotted：边框为点线
      • double：边框为双实线
  • 可以分开分别给上下左右设置边框
    • border-top-style、border-bottom-width、border-left-color...
  • 综合样式设置
    • border-style[width、color]：上 右 下 左

内边距

  • padding属性用于设置内边距，是指边框与内容之间的距离
  • padding-top：上内边距
  • padding-right:右内边距
  • padding-bottom:下内边距
  • padding-left:左内边距
  • 综合设置时，后面跟几个数值表示的意思是不一样的 值的个数 | 表达意思 | | -------- | ------------------------------------------------------------------------------------------ | | 1个值 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 | | 2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 | | 3个值 | padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 | | 4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针|
  • 内边距可以实现子盒子居中排列
    • 设置父盒子的左右padding为（父盒子原本的宽度减去子盒子本身的宽度）/2，再将父盒子的width设置为子盒子的width，就可以实现子盒子在父盒子里的水平居中。

外边距

  • margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放其他内容
  • margin-top:上外边距
  • margin-right:右外边距
  • margin-bottom:下外边距
  • margin-left:上外边距
  • margin:上外边距 右外边距 下外边距 左外边 （取值顺序跟内边距相同）
  • 外边距可以实现盒子水平居中，但是必须满足两个条件
    • 必须是块级元素
    • 盒子必须指定了宽度（width）
    • 然后就给左右的外边距都设置为auto，就可使块级元素水平居中
    • 实际工作中常用这种方式进行网页布局，.header{ width:960px; margin:0 auto;}
    外边距合并
  • 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
  • 左右外边距会直接相加
  • 相邻块元素垂直外边距的合并
    • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
    • 解决方案：改用padding或者添加一个空盒子，使该空盒子的高度为两者margin之和

image.png

  • 嵌套块元素垂直外边距的合并
    • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并
    • 解决方案：
      • 可以为父元素定义1像素的上边框或上内边距
      • 可以为父元素添加overflow:hidden属性

content宽高

  • 使用宽度属性width和高度属性height可以对盒子的大小进行控制
  • width和height的属性值可为不同单位的数值或相对于父元素的百分比%，工作中常用的是像素值
  • 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是
    • 外盒尺寸计算（元素空间尺寸）
      • Element空间高度 = content height + padding + border + margin
      • Element 空间宽度 = content width + padding + border + margin
    • 内盒尺寸计算（元素实际大小）
      • Element Height = content height + padding + border （Height为内容高度）
      • Element Width = content width + padding + border （Width为内容宽度）

标准盒模型

  • 标准盒模型设置的width=content的width

注意事项

  • 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）
  • 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
  • 如果一个盒子没有给定宽度，则会和父亲一样宽，占满父盒子，padding不会影响盒子的大小

标准盒子模型布局稳定性

  • margin和padding的使用
    • 根据稳定性来分，优先使用width，其次使用padding，最后使用margin
    • margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用
    • padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用
    • width 没有问题，我们经常使用宽度剩余法 高度剩余法来做

标准盒子模型使用技巧

  • 图片标签，设置了具体宽度后，可以给高度设置为auto（自动），让其实现等比例自动计算
  • 同行宽度问题：一行内如果多个元素占位宽度（margin+border+padding+width）相加之和大于容器的宽度，则无法完整地放入的元素会被挤进下一行显示
  • 内外边距问题：外边距垂直方向会合并，选最大值，水平方向会进行叠加，如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果子元素的外边距会穿透父元素生效，内外边距都只能设置为整数 不要设置带小数的边距和长宽
  • 行高：当文本的行高与盒子的高度相等时，文本可以实现垂直居中

怪异盒模型

  • 怪异盒子模型又称IE盒子模型，可以通过CSS样式box-sizing来进行切换
    • box-sizing: border-box; /* 怪异盒子模型 */
    • box-sizing: content-box; /* 标准盒子模型 */
  • 怪异盒子模型的宽度高度计算和标准盒子模型的计算方式不同，怪异盒子模型的content内容宽度会把padding和border算入其中，是由外而内的计算宽度

两种盒子模型的区别

  • 主要区别在于盒子的整体宽度高度的计算方式不同
  • 用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端
  • 原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的
  • 可以同时设置 box-sizing属性来使用这一特性，使其改变border宽度也不影响其他元素
  • 实际使用场景：设置父盒子的padding来使得子盒子居中显示时，可以设置父盒子为怪异盒模型
  • 行内元素是只有左右外边距的，是没有上下外边距的，内边距在ie6等低版本浏览器也会有问题

清除内外边距

  • 为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距

浮动

常规文档流(普通流)

  • normal flow
  • 网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置
  • CSS的定位机制有3种：普通流（标准流）、浮动和定位
  • 普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局

浮动定义

  • 元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程
  • 最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果

image.png

  • 后面发现浮动可以让任意盒子一行排列，产生了浮动布局

image.png

浮动实现

  • 在CSS中，通过float属性来定义浮动
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）

浮动特性

  • 浮动脱离标准流，脱标即不占位置，会影响标准流。浮动只有左右浮动
  • 浮动首先创建包含块的概念（包裹）。浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围

image.png

  • 一个父盒子里面的子盒子，如果需要所有子元素一行对齐显示，就需要所有子元素都进行浮动
  • 元素添加浮动后，元素会变为块元素（display：block）。元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动
  • 浮动的目的就是为了让多个块级元素同一行上显示。 核心的关键点就是怎么排列的， 是否占有位置
  • 浮动脱离文档流的，原来还在文档流的元素，会向上移动，进行占位
  • 元素浮动以后，会尽量向页面的左上或是右上漂浮，直到遇到父元素的内边距或者其他的浮动元素
  • 如果浮动的元素上边是一个没有浮动的块级元素，则浮动的元素不会超过块级元素，占位覆盖
  • 浮动的元素不会超过上边的兄弟元素
  • 浮动会更改元素的显示方式 :block

浮动元素盒子高度问题

  • 一般不给父元素设置高度，让父元素根据内容撑开，否则会导致子元素高度超出被后面的文档流拦腰斩的问题
  • 但是父元素不设置高度，子元素进行浮动，会让父元素的高度塌陷

清除浮动

原因

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动，准确地说，并不是清除浮动，而是清除浮动后造成的影响

本质

  • 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

image.png

image.png

方法

  • 本质叫做闭合浮动更好一些, 清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素

css的clear属性

  • 在CSS中，clear属性用于清除浮动，其基本语法格式如下
    • 选择器{clear:属性值;} clear 清除
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

方法一：额外空标签

  • W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可
  • 优点：通俗易懂，书写方便
  • 缺点： 添加许多无意义的标签，结构化较差

方法二：父级添加overflow属性

  • 可以通过触发BFC的方式，可以实现清除浮动效果(BFC详细介绍在BFC篇)
  • 给父级添加： overflow为 hidden|auto|scroll 都可以实现
  • 优点： 代码简洁
  • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
  • 原理：父元素会遍历子元素的高度然后计算父元素应该展示的高度

方法三：使用afer伪元素清除浮动

  • 伪元素添加在浮动元素的父级元素上
  • :after 方式为空元素的升级版，好处是不用单独加标签了
 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 优点： 符合闭合浮动思想 结构语义化正确
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
  • haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。）
  • 注意： content:"" 尽量不带点

方法四：使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

方法五：进阶安全版（标准写法，推荐）

.clearfix{
	zoom:1;
}
.clearfix:after,.clearfix:before{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    visibility:hidden;
    font-size:0;
    height:0;
}

定位

  • 定位原理上可以帮助你快速精准 脱离文档流束缚的情况下将元素放在你想放置的位置。就跟精确制导定位系统一样，输入坐标就可以轻松搞定
  • 元素的定位属性主要包括定位模式和边偏移两部分

定位模式

  • 在CSS中，position属性用于定义元素的定位模式，选择器 { position: 属性值} 值 | 描述 | | -------- | ------------------------ | | static | 自动定位（默认定位方式） | | relative | 相对定位，相对于其原文档流的位置进行定位 | | absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 | | fixed | 固定定位，相对于浏览器窗口进行定位

边偏移

边偏移属性描述
top顶端偏移量，定义元素相对于其父元素上边线的距离（保留自身外边距）
bottom底部偏移量，定义元素相对于其父元素下边线的距离（保留自身外边距）
left左侧偏移量，定义元素相对于其父元素左边线的距离（保留自身外边距）
right右侧偏移量，定义元素相对于其父元素右边线的距离（保留自身外边距）
  • 定位要和边偏移搭配使用

静态定位

  • 是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置
  • 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置
  • 静态定位唯一的用处： 就是 取消定位。 position: static

相对定位

  • 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置
  • 对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留

image.png

  • 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有
  • 相对定位每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它（相对定位不脱标）如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置， 让盒子到我们想要的位置上去（可能会覆盖掉原来位置上的元素）。

绝对定位

  • 绝对定位的位置参考为相对定位父级的左上角顶点
  • 绝对定位和相对定位设置left和right时，都会保留自身外边距
  • 绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。
  • 绝对定位元素的宽度高度100% 是相对于定位父级来的 不是结构父级
  • 与相对定位的区别：
    • 绝对定位完全脱离标准文档流相当于自建一个新的层级
    • 绝对定位的移动相对坐标原点为相对定位父级的左上角原点
    • 没有相对定位父级的情况下 以浏览器窗口显示区域(window view)左上角为定位原点
    • 有相对定位父级(绝对、固定或相对定位)的父元素/祖先的情况下 以相对定位父级的左上角为定位原点
  • 绝对定位的宽度百分比继承自相对定位父级并不继承于结构父级
  • 当没有设置边偏移的时候，默认是自己位置，而不是top:0;left:0

子绝父相

  • 布局中最常见的就是 结构父级为相对定位(relative)，需要定位的子元素为绝对定位（absolute） 。 因为一般父元素需要在常规文档流中占据位置，子元素又需要将其作为定位父级来确定原点参考系（绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位）。所以用的最多的就是父级为relative子元素为 absolute的子绝父相组合形式

绝对定位的盒子水平/垂直居中

  • 普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了，定位的盒子也可以水平或者垂直居中，有一个算法
    • 首先设置子盒子left:50%;top:50%，偏移父盒子的一半大小
    • 然后子盒子的margin-left和margin-top分别设置成自身宽高一半的负值
  • 方法二（省事儿）
    • 设置子盒子的margin为 auto，top left right bottom 四个方向设置为0 让外边距自动拉扯元素位置进行平衡

固定定位

  • 固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位
  • 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置
  • 固定定位的元素跟父亲没有任何关系，只认浏览器(window view)
  • 固定定位完全脱标，不占有位置，不随着滚动条滚动
  • ie6等低版本浏览器不支持固定定位

叠放次序

  • 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠

image.png

  • 在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0
  • z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上
  • 如果取值相同，则根据书写顺序，后来居上
  • 后面数字一定不能加单位
  • 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性
  • absolute的叠放次序拼爹
    • 父级的次序相同，根据自己的次序确定在上的层级
    • 父级的次序不同，父级次序越大的在上面，不论自己的层级有多高

总结

定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标，正常模式不可以正常模式
相对定位relative不脱标，占有位置可以相对自身位置移动（自恋型）
绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置（拼爹型）
固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置（认死理型）
avatar
文章
阅读
粉丝