1.选择器
1.标签选择器
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
2.类选择器
多类名
<p class="class-name1 class-name2"></p>
3.id选择器
4.复合选择器
- 后代选择器
元素1 元素2 { 样式声明; }
- 子选择器
子元素选择器(子选择器)只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。
元素1 > 元素2 { 样式声明; }
- 并集选择器
元素1, 元素2 { 样式声明; }
- 伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
a:focus 伪类选择器用于获取焦点的表单元素。
:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
ul li:nth-child(n) 所有兄弟元素中的第n个,n是个数字
2n偶数 2n+1奇数 n+5从第五个到最后 -n+5前五个
5.属性选择器
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 icon结尾的这些元素 */
section[class$=data] {
color: blue;
}
2.类命名规则
3.字体属性
body {
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700; 加粗
font-style: normal;
text-align: center;
text-decoration: underline;装饰文本
text-indet: 5px; 2em; 两个文字大小,定义段落首行缩进。
line-height: 5px; 行高
}
4.emmit语法
div{内容$}*5
5.块,行内,行内块
- 块:
h1-h6
、p
、div
、ul
、ol
、li
- 行内
a
、strong
、b
、em
、i
、del
、s
、ins
、u
、span
高、宽直接设置是无效的 - 行内块
img
,input
、td
元素模式转换
行内->块级
a {
display: block;
}
Copy to clipboardErrorCopied
块级->行内
div {
display: inline;
}
Copy to clipboardErrorCopied
行内/块级-> 行内块元素
span {
display: inline-block;
}
6.背景
background-color: 颜色值;
background-image: url(图片url);
background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;
background-position: x y;
参数 x 和 y 指 x 左边和 y 坐标或者top / center / bottom / left / center / right 方位名词
background-attachment: scroll | fixed; 背景图片固定
background: rgba(0, 0, 0, 0.3);设置透明度
7.盒子模型
1.边框
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位 px |
border-style | 边框样式 |
border-color | 边框颜色 |
/*习惯顺序*/
border: 5px solid pink;
/*注意层叠性*/
border-top: 1px solid red;
border-collapse
属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse;
2.内边距
box-sizing: border-box 盒子大小为 width
不会撑大盒子,在最后写
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
1 个值:上下左右
2 个值:上下,左右
3 个值:上,左右,下
4 个值:上,右,下,左,顺时针
3.外边距
margin
属性用于设置外边距,即控制盒子与盒子之间的距离。
margin-left
: 左外边距margin-right
: 右外边距margin-top
: 上外边距margin-bottotm
: 下外边距
margin
简写方式与 padding
一致。
margin: 100px auto;
外边距塌陷
- 为父元素添加
overflow:hidden
4.圆角边框
border-radius: length;
可以用百分比,50%是圆形
接四个值,左上,右上,右下,左下
5.盒子阴影
bxo-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值 |
v-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影改为内部阴影(默认是外部阴影) |
8.浮动
float: right;
浮动的盒子不再保存原有位置,浮动的元素具有行内块元素特点
1.清除浮动
1.额外标签法(不常用)
.clear {
clear: both;
}
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<!-- <div class="clear"></div> -->
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<span class="clear"></span>
</div>
2.在父盒子加overflow: hidden;
3.为父盒子增加类属性
.clearfix {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom: 1;
}
4.为父元素增加类名
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
9.CSS书写顺序
10.定位
定位后,行内元素也可以设置宽高
1.相对定位(占位置)
相对于自己定位
选择器 {
position: relative;
}
2.绝对定位(不占位置)
选择器 {
position: absolute;
top: ;
right: ;
}
相对于自己爹定位
3.固定定位
选择器 {
position: absolute;
}
4.定位次序,都是绝对定位,数值越大越上
选择器 {
z-index: 1;
}
-
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
overflow:hidden
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
CSS高级
1.精灵图
将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。background-position 属性来定位
左移图片和下移图片都是负值
2.vertical-align 属性应用
vertical-align : baseline | top | middle | bottom
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
1.给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
2.把图片转换为块级元素 display: block;
3.Flex布局
display:flex
1.原理
就是通过给父盒子添加flex属性,来控制子盒
子的位置和排列方式
2.给父亲添加的css属性
flex-direction:设置主轴的方向 row column
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex-flow:row wrap;
2.子属性
flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)