HTML-CSS复习巩固

蓝_月亮
118 阅读4分钟

1、 CSS的盒子模型？两种盒子模型的区别？浏览器如何解析盒子的模型类别？

标准盒模型： 宽度/高度=内容的宽度/高度（content）+ border + padding + margin
怪异盒模型（低版本IE盒子模型）： 宽度/高度=内容宽度/高度（content+border+padding）+ margin

区别： 标准盒模型的宽（width）高（height）就只是内容（content）宽高；怪异盒模型的宽高包含了内容宽高、边框、填充（padding）三者在内。

浏览器解析：通过程序员设置box-sizing属性来区别标准盒模型与怪异盒模型。

box-sizing: context-box; W3C的标准盒模型,

box-sizing: border-box; 怪异盒模型,

2 、CSS选择器有哪些？哪些属性可以继承？

CSS选择符： id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

3、div盒子水平垂直居中的方法？

  1. flex 布局实现 （div元素已知宽高）
    <div class="fatherBox">
        <div class="childBox">蓝月亮</div>
    </div>
    <style>
        .fatherBox {
            width: 300px;
            height: 300px;
            display: flex;
            /* 让子块水平居中 */
            justify-content: center;
            /* 让子块垂直居中 */
            align-items: center;
            background-color: rgb(100, 200, 255);
        }
        .childBox {
            width: 100px;
            height: 100px;
            background-color: rgb(80, 241, 134);
        }
    </style>
  1. position（子div元素以知宽高）
    <div class="fatherBox">
        <div class="childBox">蓝月亮</div>
    </div>
    <style>
        .fatherBox {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(100, 200, 255);
        }
        .childBox {
            width: 100px;
            height: 100px;
            /* 子块绝对定位，父块相对定位；子绝父相 */
            position: absolute;
            /* 向右移动父盒子宽度的一半，向下移动父盒子高度的一半 */
            left: 50%;
            top: 50%;
            /* 减去自身宽高的一半，可分开写也可合并写 */
            /* margin-top: -50px;
            margin-left: -50px; */
            margin: -50px 0 0 -50px;
            background-color: rgb(80, 241, 134);
        }
    </style>
  1. position + transform （子div元素未知宽度）
    <div class="fatherBox">
        <div class="childBox">蓝月亮</div>
    </div>
    <style>
        .fatherBox {
            width: 300px;
            height: 300px;
            display: flex;
            position: relative;
            background-color: rgb(100, 200, 255);
        }
        .childBox {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 子盒子没有宽高，由内容文本撑开，使用平移使其居中 */
            transform: translate(-50%, -50%);
            background-color: rgb(80, 241, 134);
        }
    </style>
  1. position（子div元素已知宽度）（left，right，top，bottom为0，maigin：auto ）
    <div class="fatherBox">
        <div class="childBox">蓝月亮</div>
    </div>
    <style>
        .fatherBox {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(100, 200, 255);
        }
        .childBox {
            width: 100px;
            height: 100px;
            /* 子块绝对定位，父块相对定位；子绝父相 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: rgb(80, 241, 134);
        }
    </style>
  1. table-cell 布局实现

上面种方案的水平垂直居中效果图：

  • 方案4中如果子元素不设置宽度和高度，将会铺满整个父级（应用：模态框）
    <div class="fatherBox">
        <div class="childBox">蓝月亮</div>
    </div>
    <style>
        .fatherBox {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(100, 200, 255);
        }
        .childBox {
            /* 子块绝对定位，父块相对定位；子绝父相 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: rgb(80, 241, 134);
        }
    </style>

效果图：子元素设置的颜色为绿色

4、文字，图片水平垂直居中?

    <div class="box">蓝月亮</div>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: rgb(80, 241, 134);
            /* 水平方向居中 */
            text-align: center;
            /* 垂直方向居中 display为inline-block和block*/
            display: inline-block;
            line-height: 150px;
            /* 垂直方向居中 display为table-cell */
            /* display: table-cell;
            vertical-align: middle; */
        }
    </style>

效果图：

5、弹性布局（flex布局）？

含义：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

详情参考：flex布局

6、传统网页布局方式？

  1. 普通流（标准流、文档流）：标签按照规定好默认方式排列，最基本的布局方式。
  • 块级元素： display: block; 块级元素从上到下独占一行按顺序排列。div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等；
  • 独占一行，按顺序排列；
  • 高度、宽度、外边距（margin）、内边距（padding）都可以控制；
  • 宽度默认是容器宽度的100%（父级元素的100%）;
  • 里面是一个容器，可以放置其他块元素，行内元素，注意：文字字类标签里面不能放
    ,比如

    标签里面不能放

    ；
  • 块级元素水平居中：首先盒子必须设置宽度，其次 ：margin:  0 auto;
  • 嵌套块级元素给外边距时父级高度会塌陷，解决方案；1、父元素设置边框将其边框设置透明色：border: 1px solid transparent; 2、父元素设置内边距padding； 3、父元素设置overflow: hidden;
  • 行内元素： display: inline; 行内元素按照顺序排成一行，达到父元素边缘自动换行排列。span、img、a、input、textarea、select、strong、lable、button（默认display：inline-block）、abbr（缩写）、em（强调）、cite（引用）、i（斜体）、q（短引用）、small、big、sub、sup、u（下划线）。
  • 行内块元素： display: inline-block; <select><img>具备行内元素，块级元素的特性；
  • 相邻元素在一行排列，但是它们之间有间隙；
  • 默认宽度为本身内容的宽度（行内元素特性）；
  • 高度、行高、外边距、内边距都可以控制（块元素特性）；
  • 行内块元素水平居中：给父元素添加 text-align: center;

总结：

  1. 浮动（float）：多个块级元素横向排列；float: left || right || none（默认值）;添加浮动后该元素会脱离文档流， 浮动元素具有行内块元素特性 。
  • 如果是块级盒子没有设置宽度，其宽度为父级宽度的100%，但是如果设置了浮动其宽度由内容撑开决定。
  • 多个元素浮动后依次排列中间无间隙，区别于行内元素和行内块元素排列；
  1. 定位（position） *子绝父相

HTML基础精选文章：点击查看。

CSS基础精选文章：点击查看。

HTML5-CSS3:精选文章：点击查看。

avatar
文章
阅读
粉丝