1、颜色值及长度单位
1.1、颜色
- 英文单词: red green blue pink black white brown gold yellow purple
- 十六进制颜色表示法:#RRGGBB RR表示红色 00-ff GG 表示绿色 00-ff BB表示蓝色00-ff
- rgb()颜色:rgb(0-255,0-255,0-255); r:red,g:green,b:blue;
- rgba()颜色:rgba(0-255,0-255,0-255,0-1); a:alpha 透明度 0 完全透明 1不透明 0.x半透明
1.2、长度单位
- px : 像素
- em : 相对单位,表示当前标签的font-size大小
- % : 百分比
- rem : html的font-size值
盒模型(box modal)
在css当中,可以把标签看做一个盒子,这个盒子可以分为四个部分:内容区、内边距、边框、外边距。
1、内容区
width:100px; 内容区宽度
height:100px; 内容区高度
2、内边距
内边距是元素的边缘和内容(或者子元素)之间的距离
简写:
padding: 10px; 四个方向统一为10px
padding: 10px 20px; 上下 左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
四个方向分别设置:
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-right: -20px; /* padding不允许设置负值*/
3、边框
边框指内边距和外边距之间的线条
border: width style color;
border-width:2px; 边框宽度
border-style:solid; 边框风格
- solid 实线
- dashed 虚线
- dotted 点线
- double 双实线
border-color:red; 边框颜色
border-top:width style color;
border-top-width:2px;
border-top-style:solid;
border-top-color:solid;
去除边框:
border-top: 0;
border-bottom: none;
4、外边距
外边距表示盒子和父元素或者相邻元素之间的距离
简写:
margin: 10px; 四个方向统一为10px
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
四个方向分别设置:
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
特殊用法:
margin-bottom:-100px; 占位减少100px
固定宽盒子水平居中:
margin:0 auto;
2、标签分类及特点
2.1、块级标签
div 、h1-h6 、p 、ul 、 ol 、dl 、li、dt、dd
特点:
1、从上到下排列,独占一行
2、默认宽度自动占满父级 (width + 左右padding + 左右border + 左右margin = 父级宽度)
3、可以设置宽高及所有盒模型属性
2.2、行内标签
span 、 i 、em 、b 、strong 、sub 、sup 、del 、a
特点:
1、从左到右在一行排列
2、默认宽度由内容撑开
3、不可以设置宽高属性,水平方向盒模型属性有效,垂直方向无效
1.3、行内块标签
img
特点:
1、从左到右在一行排列
2、默认宽度由内容撑开
3、可以设置宽高及所有盒模型属性
2、标签类型转换
display:block; 转换成块级
display:inline; 转换成行内
display:inline-block; 转换成行内块
3、行内块标签一些特殊用法
3.1、居中
行内块居中需要给父元素添加text-align:center; 给自身添加margin:0 auto无效
3.2、行内块下方多出的空白
当父级没有设置固定高时,行内块会把父级多撑开4px的高度
解决方法:
1、 给行内块父级固定高度
2、 把图片转换成块级
3、 给行内块父级设置font-size:0;line-height:0;
4、 给行内块设置vertical-align:middle;
3.3、行内块之间的空白问题
因为标签之间的换行符会识别成一个空格
解决方法:
给父元素添加font-size:0;
4、背景样式
4.1、background-color 背景颜色
background-color:transparent; 默认透明色
4.2、background-image 背景图片
background-image:url("...");
4.3 、background-repeat 背景平铺
background-repeat:repeat; 水平和垂直都平铺
background-repeat:repeat-x; 水平平铺
background-repeat:repeat-y; 垂直平铺
background-repeat:no-repeat; 不平铺
4.4、background-position 背景定位
background-position: 水平 垂直;
background-position: left/center/right top/center/bottom;
background-position: 100px/-100px 100px/-100px; 水平:正值往右,负值往左 垂直:正值向下 ,负值向上
background-position:0%/50%/100% 0%/50%/100%;
//水平和垂直的位置只写了一个值,代表另一个值为center
background-position: top;
background-position: 100px;
4.5、background 简写
简写属性里面的各个值可以交换顺序,并且可以省略任何不需要设置的属性
background:lime url("...") no-repeat center;
5、复合选择器
5.1、后代选择器
selector1 selector2...
.box div{ ... } 选择.box 所有后代中的div标签(包含子级以及子级的子级)
.box p{ ... }
#head h3{ ... }
#head ul li{ ... }
5.2、子代选择器
selector1 > selector2 ...
.box > div{ ... } 选择.box 子级的div标签(不包含子级的子级)