Rumah >hujung hadapan web >tutorial css >css盒子模型说明以及实例
css盒子模型说明以及实例
- 无忌哥哥asal
- 2018-06-28 17:23:442893semak imbas
一、什么是盒子:
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>Atas ialah kandungan terperinci css盒子模型说明以及实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!