WEB前端第十二课——CSS盒子

1.盒子模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin) 2.border,设置元素的边框,属性(边框三要素):宽度、样式、颜色,这也是通常border属...

1.盒子模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)

2.border,设置元素的边框,属性(边框三要素):宽度、样式、颜色,这也是通常border属性值的书写顺序(非严格要求)

  单独书写:border-width(宽度,默认3px)、border-style(样式,默认none)、border-color(颜色,默认黑色)

  border-style属性值:dotted(点状)、solid(实线)、double(双实线)、dashed(虚线)、无边框(none)

3.padding,设置元素内容与边框之间的距离,增加内边距会扩大元素边框所占用的区域

  书写格式:padding:value(四边设置,可多值)、padding-top/right/bottom/left:value(单边设置),value取值可以为像素、百分比,但不能为负数

4.margin,设置元素边框外周围的空白区域,外边距是透明的

  书写格式:margin:value(四边设置、可多值)、margin-top/right/bottom/left:value(单边设置),value取值可以为像素、百分比、auto、负数

  外边距合并,当两个垂直外边距相遇时,他们将形成一个外边距,即外边距合并

        合并后的外边距的高度等于发生合并的两个外边距中高度较大者

        两个块级元素是包含关系时,要设置被包含元素的相对边距,需要增加父元素border(边框)或使用“ overflow:hidden”或“ padding”

  外边距特点:① 块级元素的垂直相邻外边距外边距会合并,② 行内元素不占上下外边距,且左右外边距不会合并,③ 浮动元素的外边距也不会合并,④ 允许指定负数外边距值

5.怪异盒子,盒子模型分为两种,一种是符合W3C规范的标准盒子模型,另一种是IE的盒子模型,也被叫做怪异盒子

  IE盒子模型也包括margin、border、padding、content,不过IE盒子模型的宽(width)包含了border和padding

6.box-sizing,该属性用于指定当前元素使用哪种盒子模型,标准(W3C)或 怪异(IE)

  属性值:

     content-box(标准),padding和border不会被包含在width和height内

     border-box(怪异),padding和border被包含在width和height内,即元素实际大小只与width和height有关

7.flexbox,伸缩盒子模型(也叫弹性盒子)

  它决定一个盒子在其他盒子中的分布,以及如何处理可用的空间。

  该模型可以轻松的创建“自适应”浏览器窗口的流动布局。

  传统盒子模型基于HTML文档流排列,弹性盒子模型可以规定特定的顺序。

  通过设置 display属性值为 flex开启弹性盒子模型。

  设置了弹性盒子模型后,float、clear、vertical-align在 flex中不起作用。

8.flex

  基本结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        .d0 {
            width: 100%;
            height: 600px;
            background-color: aliceblue;
            display: flex;
        }
        .d1 {flex-grow: 1; background-color: blue;}
        .d2 {flex-grow: 2; background-color: aquamarine;}
        .d3 {flex-grow: 1; background-color: coral;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>
</html>

  display:flex,定义外层父容器 d0为弹性布局,默认为水平布局

  flex-grow:value,该属性表示当前子项目在父容器中的占比,默认值为0

  flex-direction,定义灵活项目的布局方向,属性值:row(默认值,灵活项目水平排列)、row-reverse(灵活项目以相反的顺序水平排列)

                          column(灵活项目垂直排列)、column-reverse(灵活项目以相反的顺序垂直排列)

  justify-content,设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,使用该属性之前必须先声明父元素为弹性盒子

     属性值:flex-start(默认值,子项目位于容器的开头)、flex-end(子项目位于容器的结尾)、center(子项目位于容器的中心)、

         space-between(子项目位于各行之间留有空白的容器内)、space-around(子项目位于各行之前、之间、之后都留有空白的容器内)

  align-items,该属性定义灵活子项目在flex父容器的侧轴(纵轴)方向上的对齐方式

     属性值:stretch(默认值,拉伸子项目以适应容器)、center(子项目在容器中心)、flex-start(子项目在容器开头)、flex-end(子项目在容器末端)、baseline(子项目在容器基线)

    

  • 发表于 2020-07-26 17:40
  • 阅读 ( 74 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除