一、什么是盒子:
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写在左右之前
1.盒子模型 .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 ; }
以上就是css盒子模型说明以及实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610772.html
微信扫一扫 
支付宝扫一扫 
