css之盒子模型box-sizing属性

一,box-sizing属性,自适应盒子元素的宽高的


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-盒子box-sizing.htmltitle>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: cyan;
            float: left;
        }
        .article{
            /*
                1,css3中新增了box-sizing 属性,这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽高不会发生变化
                2,box-sizing取值
                (1),border-box 元素的宽高恒等于width
                (2),content-box 默认属性,元素的宽高=边框*2+内边距*2+width
            */
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
            padding: 20px;
            /*border: 20px solid #000;*/
        }
    style>
head>
<body>
<div class="content">
    <div class="aside">div>
    <div class="article">div>
div>

body>
html>

二,盒子嵌套注意点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子模型练习.htmltitle>
    <style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            border: 5px solid #000;
            /*box-sizing: border-box;*/
            /*padding-top: 150px;*/
            /*padding-left: 150px;;*/
        }
        .little{
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*
                1,注意点:如果两个盒子是嵌套关系,那么设置了里面盒子的顶部外边距,外面的盒子也会被顶下来
                2,如果外面的盒子不被一起定下来,可以给外边的盒子添加边框属性
                3,在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,
                    应该首先考虑padding,本质上是控制父子关系之间的间隙的;
                    其次考虑margin,margin本质上是用于兄弟关系之间的间隙的,如果要用margin就得给父盒子添加边框属性
            */
            /*margin-top: 150px;*/
            /*margin-left: 150px;*/
            /*margin: 150px 150px;*/
            /*
                margin: 0 auto; 表示盒子水平居中,但是对垂直无效
                margin: 150px auto; 表示盒子水平居中,垂直也居中
            */
            margin:150px auto;
        }
    style>
head>
<body>

body>

<div class="big">
    <div class="little">div>
div>

html>

三,盒子居中和内容居中的区别


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-盒子的居中和内容的居中.htmltitle>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: red;
            text-align: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin:0 auto;
        }
    style>
head>
<body>

<div class="father">
    我是文字 <br>
    <img src="images/image.png" alt="">
    <div class="son">div>
div>
body>
html>

你可能感兴趣的:(前端基础语言从学习)