CSS学习（二）
一、CSS三大模型之盒子模型
1.盒子模型
每个矩形元素都由元素的内容，内边距，边框，和外边距
边框：盒子的厚度Border，如手机包装盒的厚度
内边距：内容与边框之间的距离，如填充泡沫的厚度Padding
外边距：与其他盒子的距离Margin2.边框样式格式：border-style: solid;
solid 单实线用的最多
dashed 虚线
dotted 点线
double 双实线3.边框综合写法
写法一：
border-width: 1px;
border-color: pink;
border-style: solid;
写法二推荐使用：
border:1px solid blue;综合性写法 宽度 样式 颜色
border-top: 1px solid blue;改上边框的属性4.表格细线边框
border-collapse: collapse;合并相邻的边框，相邻表格边框会出现叠加的形式，如1px+1px=2px，使用该方法可以
合并，使边框粗细一致，都为1px
复习：cellspacing="0" 表格中去除表格之间的内边距 ，cellpadding="0" 5.圆角边框
border-radius：apx bpx cpx dpx;
1个值表示4个角都是相同的10px的弧度*
2个值左上角和右下角10px 右上角 左下角 40px对角线
3个值左上角一个值,右上角，左下角一个值 右下角 一个值
4个值表示 左上，右上， 右下，左下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
div:first-child{
/*结构伪类选择器 选亲兄弟*/
border-radius: 10px;/*一个数值表示4个角都是相同的10px的弧度*/
}
div:nth-child(2){
/*border-radius: 100px;取跨度和高度的一半 则会变成一个圆形*/
border-radius: 50%;/*100 px 50%则会变成一个圆形*/
}
div:nth-child(3){
border-radius: 20px 40px;
/*左上角和右下角10px 右上角 左下角 40px对角线*/
}
div:nth-child(4){
border-radius: 20px 40px 80px;
/*左上角20px,右上角，左下角40px 右下角 80px对角线*/
}
div:nth-child(5){
border-radius: 10px 20px 40px 80px;
/*顺时针 左上 右上 右下 左下*/
}
div:nth-child(6){
border-radius: 100px;
height: 100px;
}
div:nth-child(7){
border-radius: 100px 0;
}
</style>
</head>
<body>
<div>20px</div>
<div>50%或者100px</div>
<div>10px 40px</div>
<div>20px 40px 80px</div>
<div>10px 20px 40px 80px</div>
<div>123</div>
<div>柠檬</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
6.内边距(padding)
内边距就是内容距离边框的距离 ,值也为顺时针传递
4个值 顺时针 上 右 下 左
padding 写两个个值 上下10px 左右30px
3个值 10 px 30 px 50px 上10 左右30 下50
1个值 上下左右都是一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
/*padding-top: 20px;*/
/*padding-left: 10px;*/
padding: 70px 90px 40px 50px;
/*4个值 顺时针 上 右 下 左*/
/*padding 写两个个值 上下10px 左右30px
3个值 10 px 30 px 50px 上10 左右30 下50
1个值 上下左右都是一样*/
}
</style>
</head>
<body>
<div>内边距就是内容距离边框的距离</div>
</body>
</html>
7.外边距 margin
margin-top 盒子距离上的边距
margin-left 盒子距离左的边距
margin:30px auto 左右自动 这样可以块级带有宽度的盒子水平居中对齐,只有块级元素有效，其余元素无效
文字水平居中与盒子水平居中：
文字水平居中：text-align: center;
盒子水平居中：margin: 10px auto;
文字垂直居中:
行高等于盒子高度
height: 42px;盒子高
line-height: 42px;行高
插入图片更改大小 用width和height，同时插入图片也是一个盒子，可以通过margin与padding 盒模型更改位置
背景图片background: #fff url(图片/刘德华3.jpg) 30px 50px
背景图片的大小只能用 backgroud-size
背景图片的位置更改用background-position8.内外边距清洁
margin: 0;清除外边距
padding:0;清除内边距9.行内元素，只有左右外边距，没有上下外边距，内边距。
10.外边距合并
垂直方向：如果上面的盒子下外边距给20px（margin-bottom:20px;），下面的盒子上外边距给10px(margin-top:
10px;),最终会以大的边距为准,不会出现上下30px;
内嵌式合并：父亲盒子中，镶嵌了一个孩子盒子，如果要使孩子盒子相对与父亲盒子下移动，使用margin-top 20px;
会使两个盒子都同时下移，不能达到我们想要的效果解决方法：
1.可以为父元素定义1像素的上边框(border: 1px solid red)或上内边距(padding: 1px;)
2.可以为父元素添加
overflow: hidden;溢出隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background-color: pink;
/*border: 1px solid red上边框;/*解决外边距合并的问题*/
/*padding: 1px;上内边距*/
overflow: hidden;
/*
1可以为父元素定义1像素的上边框或上内边距
2可以为父元素添加overflow: hidden;
*/
}
.son{
height: 200px;
width: 200px;
background-color: purple;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
11.盒子尺寸计算
外盒尺寸空间尺寸：width+border+padding+margin
内盒尺寸：width+border+padding 130 可以看见的
如果要使盒子内的内容往右移动，用padding-left,最终的盒子大小通过修改外盒子宽度就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 73px;
height: 42px;
line-height: 42px;
border:1px solid #C1C1C1;
margin: 200px;
font-size: 16px;
color: #666;
border-radius: 5px 0 0 5px;
padding-left: 20px;
}
</style>
</head>
<body>
<div>
新闻
</div>
</body>
</html>
**如果没有宽度属性，使用padding则不会影响
**如果父亲没有指定宽度 则盒子会默认和父亲一样宽 块级元素 则会默认和父亲一样宽
复习列表：list-style:none;去除列表默认中的小黑点
12.宽度剩余法
width 经常使用宽度剩余法或者高度剩余法
padding 会影响盒子大小，需要进行加减计算
margin 会有外边距合并 还有ie6下面的margin加倍BUG最后使用13.盒模型
CSSS3新属性box-sizing: border-box;
padding border 不撑开盒子
盒子大小为width 就是说 padding 和border包含到width里面的
border: 15px solid red;14.阴影
文字阴影
text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
text-shadow: 水平距离 垂直距离 模糊 阴影颜色盒子阴影
box-shadow:5px 5px 3px 4px rgba(0,0,0,4);
水平 垂直 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
前两个属性必须写 内阴影inset ,外阴影不用写 默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.SJ {
width: 249px;
height: 249px;
background-color: pink;
margin: 100px;
background: url(图片/u=1428090269,1082431195&fm=27&gp=0.jpg) 0 0 no-repeat;
font-size: 30px;
text-align: center;
line-height: 249px;
border-radius: 50%;
color: rgba(255,255,255,0.5);
box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.5) inset/*内阴影*/,4px 5px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="SJ">水晶图片</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
