css盒子模型说明以及实例-css教程-PHP中文网

css盒子模型说明以及实例

无忌哥哥

发布： 2018-06-28 17:23:44

原创

2653人浏览过

一、什么是盒子:

1.盒子模型也叫框模型,页面上的一切元素,都可以看作是盒子

2.盒子是元素的容器,也是元素的载体,说人话就是,盒子是元素的家

二、盒子的种类与功能:

1.元素有二种:块级元素和行内元素,所以他们对应的家:盒子,当然也有二种:块级盒子,行内盒子

2.块级盒子通常当作其它元素的容器,行内盒子中总是放内容,通常行内盒子放在块级盒子中

三、盒子的排列方式:

1.盒子是页面上的排列顺序,由总调度师:文档流说了算,除非盒子离家出走,脱离了文档流

2.文档流既是元素排列的方式,又是排列的动作,所以既是名词也是动词

四、盒子模型的组成部分:

1.因为盒子大多做元素容器使用,所以我们主要以块级盒子为例进行介绍

2.盒子的四大组成部分:content(内容),padding(内边距),border(边框),margin(外边距)

五、我们用四大美女来快速记忆盒子模型:

1.content内容: 我们自己的老婆或者女朋友,这是看得见,摸得着的东西

2.padding内边距:它是透明的,就像你老婆的闺蜜,时刻影响着你和老婆的关系

3.border边框:它是可见的,它变化多端,风情万种,最撩人最风骚,就像你的红颜知己,梦中情人或小情人

4.margin外边距:和padding内边距一样也是透明的,就像老大的女人,哥们的老婆,永远活在你的想像中

六、content内容:

1.支持宽度width和高度height设置

2.内部可以是块元素,也可以是行内元素

3.支持背景设置

七、padding内边距:

1.支持四个方向设置大小,按顺时针排列:上、右、下、左

2.也可以单独设置

padding-top: 上边距

padding-right: 右边距

padding-bottom: 下边距

padding-left: 左边距

3.支持简写:

padding: 10px 5px 10px 5px; 上10px,右5px,下10px,下5px

padding: 10px 20px 30px; 上10px,左右20px,下30px

padding: 10px 20px; 上下10px, 左右20px

padding: 10px; 上,右,下,左全部为10px

八、margin外边距:

1.支持四个方向设置大小,按顺时针排列:上、右、下、左

2.也可以单独设置

margin-top: 上边距

margin-right: 右边距

margin-bottom: 下边距

margin-left: 左边距

3.支持简写:

margin: 10px 5px 10px 5px; 上10px,右5px,下10px,下5px

margin: 10px 20px 30px; 上10px,左右20px,下30px

margin: 10px 20px; 上下10px, 左右20px

margin: 10px; 上,右,下,左全部为10px

九、border边框:

1.内外边距是透明不可见的,所以只有宽度可以设置

2.边框是可见的,所以他有三个子属性可以设置: 宽度,样式,颜色

3.设置顺序: 上、右、下、左

设置上边框:

border-top-width: 5px; //设置宽度

border-top-style: solid; //设置样式

border-top-color: #f60; //设置前景色/颜色

border-top: 5px solid #f60; //简写

设置右边框:

border-right-width: 10px;

border-right-style: dashed;

border-right-color: #888;

border-right: 10px dashed #888;

设置下边框:

border-bottom-width: 10px;

border-bottom-style: solid;

border-bottom-color: #555;

border-bottom: 10px solid #555;

设置左边框:

border-left-width: 8px;

border-left-style: dotted;

border-left-color: #333;

border-left: 8px dotted #333;

所有边框使用统一设置:

border-width: 10px; //四条边框统一设置宽度

border-style: solid; //四条边框统一设置样式

border-color: gray; //四条边框统一设置颜色

border: 10px solid gray; //四条边框统一设置的简写

十、圆角盒子的设置技巧:

1:设置圆角:之前都是通过图片方式来实现,现在通过代码就可以

2:边框有四个顶点,可以针对每个顶点进行设置

2.1:左上角 border-top-left-radius:20px;

2.2:右上角 border-top-right-radius:20px;

2.1:右下角 border-bottom-right-radius:20px;

2.1:左下角 border-bottom-left-radius:20px;

注意:老外与我们思维不一样,属性中是把上top下bottom写在左右之前

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.盒子模型</title>
    <style>
        .box1 {
            /*在父级盒子.box已经设置过了*/
            /*width: 200px;*/
            /*height:200px;*/
            /*background-color: #f89;*/
            border: 2px solid #363636;
            /*通过计算,设置内边距40px,可实现图片居中*/
            padding:40px;
            /*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/
            /*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/
            /*第一种方案:修改当前盒子大小*/
            /*width: 120px;*/
            /*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/
            /*height:120px;*/
        }
        /*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/
        /*我这里忽略了边框宽度的影响*/
        .box {
            width: 200px;
            height:200px;
        }
        .box2{
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            borer: 2px solid #333;
            margin-bottom: 20px;
        }
        .box3{
            width: 200px;
            height:200px;
            background-color: lightgreen;
            borer: 2px solid #333;
            /*margin-top: 20px;*/
            /*上下外边距的二个特征:*/
            /*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/
            /*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/
            margin-top: 30px;
            /*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/
        }
        /*边框设置*/
        .box4 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置上边框:*/
            /*设置宽度*/
            /*border-top-width: 5px;*/
            /*设置样式*/
            /*border-top-style: solid;*/
            /*设置前景色/颜色*/
            /*border-top-color: #f60;*/
            /*简写*/
            /*border-top: 5px solid #f60;*/
            /*设置右边框:*/
            /*border-right-width: 10px;*/
            /*border-right-style: dashed;*/
            /*border-right-color: #888;*/
            /*border-right: 10px dashed #888;*/
            /*设置下边框:*/
            /*border-bottom-width: 10px;*/
            /*border-bottom-style: solid;*/
            /*border-bottom-color: #555;*/
            /*border-bottom: 10px solid #555;*/
            /*设置左边框:*/
            /*border-left-width: 8px;*/
            /*border-left-style: dotted;*/
            /*border-left-color: #333;*/
            /*border-left: 8px dotted #333;*/
            /*所有边框使用统一设置:*/
            /*统一设置宽度*/
            /*border-width: 10px;*/
            /*统一设置样式*/
            /*border-style: solid;*/
            /*统一设置颜色*/
            /*border-color: gray;*/
            /*统一设置的简写*/
            /*border: 10px solid gray;*/
        }
        /*圆角盒子设置技巧*/
        .box5 {
            width: 200px;
            height:200px;
            background-color: #f89;
            border-top-left-radius: 20px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 80px;
            /*如果每个角的圆度是一样的,可以简化*/
            border-radius: 20px;
            /*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/
            border-radius: 100px;
            /*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/
            /*border-radius: 50%;*/
        }
        /*创建有阴影盒子的技巧*/
        .box6 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置圆角*/
            border-radius:50%;
            /*设置内边距并重新调整盒子大小*/
            padding: 10px;
            width: 180px;
            height: 180px;
            /*设置盒子的阴影*/
            /*box-shadow:  X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/
            /*外发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888;
            /*内发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888 inset;
            /*向右下投影*/
            box-shadow:8px 8px 8px 3px #888;
            /*向左上投影*/
            box-shadow:-8px -8px 8px 3px #888 ;
        }
    </style>
</head>
<body>

登录后复制

以上就是css盒子模型说明以及实例的详细内容，更多请关注php中文网其它相关文章！