目录
表格的细线边框 border-collapse:collapse
盒子模型
1 什么是盒模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的 内容、内边距(padding)、边框(border)和外边距(margin)组成。
2 内容区(content)
显示文字/图片/视频等的区域,宽高确定内容区
3 盒子边框(border)
边框大小 border-width
数值+px
边框样式 border-style
实线 solid
虚线 dashed
点状线 dotted
双实线 double
边框颜色 border-color
默认情况下,边框颜色和字体颜色一样
颜色单词/rgb()/十六进制
边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定
单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;
表格的细线边框 border-collapse:collapse
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
border-radius: 左上角 右上角 右下角 左下角;
向右的三角
div {
height: 0;
width: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;
}
4 内边距/内填充(padding)
padding值的设置
一个值 padding:10px 四周
两个值 padding:10px 20px; 上下 左右
三个值 padding: 10px 20px 30px; 上 左右 下
四个值 padding: 10px 20px 30px 40px; 上 右 下 左
单方向 padding-方向(left/right/top/bottom): 数值+px;
padding值的特点
会撑大盒子,如果不想被撑大的话,要在原来宽高的基础上,减去对应方向的padding值
padding值不能设置负数
背景图/色可以在padding区域显示
可以用来调整内容区到盒子边缘的位置
5 外边距(margin)
margin取值
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
margin值的特点
margin值不会撑大盒子,但是会影响到旁边的元素
margin可以设置负数
背景图和背景色不在margin区域显示
调整自己和别的元素之间的距离
外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
-
必须是块级元素。
-
盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中 ,margin:auto; auto: 浏览器会根据当前窗口的宽,减去元素的宽,将剩余的空间进行一个自动的平均分配,实现左右的居中,垂直是不生效的
margin的bug
margin的传递
给元素的**第一个子元素**添加**上边距**的时候,边距会错误加在父元素的身上
1. 使用padding
2. 给父元素添加边框
3. 给父元素或者是该元素添加浮动
4. 给父元素添加overflow:hidden(溢出隐藏)
margin的重叠/外边距合并
给上面的元素设置下边距,给下面的元素设置了上边距,边距会产生重叠,并且以两个值的最大值显示,左右的间距是不会出现重叠的
1. 只给一个盒子添加外边距/避免掉
6 盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
-
前两个属性是必须写的。其余的可以省略。
-
外阴影 (outset) 但是不能写 默认 想要内阴影 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}