四大部分
-
实际内容
-
内边距
-
边框
-
外边距
-
盒子模型 内减模式 常用!!!
-
box-sizing: border-box;
: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 50%;
height: 400px;
float: left;
/* 盒子模型 内减模式 => 内容减少的模式 */
/*
它的宽度 等于 width:50%;
50% = 内容 + padding + border
*/
box-sizing: border-box;
}
div:nth-child(1){
background-color: aqua;
border: 111px solid #000;
padding: 30px;
}
div:nth-child(2){
background-color: yellow;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
-
边框 border
-
border-width 边框宽度
- 边框粗细,单位是 px
-
border-style 边框样式
- solid 实现 常用
- dashed 虚线 少用
- none 没有边框
-
border-color 边框颜色
-
transparent 背景透明
-
边框可单独设置
border-top(right,bottom,left): 1px solid #000; -
边框圆角
border-radiuis: 20px;
border-radiuis: 50%;
- 长方形 都是用
px
单位 - 想要实现胶囊效果 那么就设置为 高度的一半
-
相邻块级元素 垂直外边距合并
-
现象
相邻块级元素 垂直外边距合并
-
解决方法
只给一个盒子添加外边距就可以了 也就是合理的编写代码即可
或者给父级盒子加上overflow:hidder;
(推荐)
-
嵌套元素外边距塌陷
-
现象
- 如果父子两个元素都是添加了上外边距 那么以最大的为准
-
解决
- 给父元素添加了 上边框(给父元素添加上外边距和上内边距 推荐 最符合语义)
- border:1px solid transparent 给父元素加外边框(会增加盒子大小)
- 给父元素加内边距 padding (会改变内边距)
- 给父元素添加
overflow:hidden;
(推荐)
控制 内容和边框之间的距离
div{
padding:10px; /* 上 右 下 左 */
padding:10px 20px; /* 上下 左右 */
padding:10px 20px 30px; /* 上 左右 下 */
padding:10px 20px 30px 40px; /* 上 右 下 左 */
padding-top(right,bottom,left,):20px;
}
控制盒子于盒子之间的距离
div {
margin:30px;
margin:30px 40px 50px 60px;
}
注意:外边距 margin 书写方式跟内边距 padding 同理。
行内元素或者行内块元素
只需要给他们的父元素
添加一行代码
text-align:center;
块级元素
给它 自己
添加代码
margin: 0 auto;
精灵图的使用
<title>Document</title>
<style>
div{
background-color: aqua;
width: 42px;
height: 42px;
background-image: url(图片路径);
/* 设置背景图片位置 */
background-position: 0px 0px;
background-repeat: no-repeat;
(background:url(图片路径) no-repeat 0px 0px;)此处复合写法
/*
步骤:
1 先设置好 盒子的大小 42 * 42
2 要设置好 背景图片位置
1 自己用量图工具去测量
2 使用谷歌浏览器去调试
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
步骤
- 先设置好 盒子的大小 0px * 0px
- 要设置好 背景图片位置
- 自己用量图工具去测量
- 使用谷歌浏览器去调试
分为两种
实际开发当中,可以利用谷歌浏览器工具来调试页面
值 | 描述 |
---|---|
h-shadow | 必须,x 偏移量,允许负值 |
v-shadow | 必须,y 偏移量,允许负值 |
blur | 可选,阴影模糊半径 |
spread | 可选,阴影扩散半径 |
color | 可选,阴影颜色 |
inset | 可选,内部阴影,直接写单词即 少用 |
div {
box-shadow: 2px 2px 2px 1px red;
/* x偏移 y偏移值 模糊值 外延值 颜色 */
}
值 | 描述 |
---|---|
h-shadow | 必须,x 偏移量,允许负值 |
v-shadow | 必须,y 偏移量,允许负值 |
blur | 可选,阴影模糊半径 |
color | 可选,阴影颜色 |
div {
text-shadow: 5px 5px 5px red;
水平偏移 垂直偏移 模糊值 颜色
}
/ / / / / / / 分割线/
<title>Document</title>
<style>
body{
background-color: #999;
}
div {
color:#999;
font-size: 100px;
/*
墓碑上的文字 有点凹凸
*/
text-shadow: -1px -1px 1px #333,
1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>凹凸曼</div>
</body>
</html>