一、什么是盒子:
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.盒子模型
以上是css盒子模型说明以及实例的详细内容。更多信息请关注PHP中文网其他相关文章！
