选择器

标签选择器

标签名{}

类选择器

.className{}

一个标签可以多个类名，以空格隔开

class="red size"

id选择器

#id{}

一个标签仅一个id

通配符选择器

*{}

会修改所有样式

后代选择器

选择器之间以空格隔开，可以搭配自己选择器以内的所有选择器

父选择器 后代选择器{}

子代选择器

只能搭配自己低一级的选择器

父选择器>子选择器{}

并集选择器

多个选择器共同的样式

选择器1,选择器2{}

交集选择器

同时满足的选择器，如果有标签选择器，标签在前

p.box{}既是标签又是box类

伪类选择器

鼠标悬停时的样式

a:hover{}

文字样式

• font-size:文字大小
• font-weight:文字粗细
• font-style:文字倾斜
• font-family:文字字体

font复合写法

font: style weight size family;
font: italic bold large 微软雅黑;

只可省略前两个，取默认值

文本

缩进

text-indent: 2em

水平对齐

可用于文本、span、a、img、input标签，给对应父级标签

text-align: center/left/right;

修饰线

text-decoration: underline下划线/line-through删除线/overline上划线/none无;

行高

组成：上间距+文字高度+下间距

line-height: px行高像素/倍数，文本高度的倍数:
line-height: 1 表示取消上下间距

颜色

• color 文字颜色
• background-color 背景颜色

标签居中

margin: 0 auto;

背景

背景颜色

background-color

背景图片

会按照图片真实大小进行裁剪或复制

background-image: url("活动.png")

背景平铺

background-repeat: no-repeat不平屁/repeat默认平铺/repeat-x/repeat-y

背景位置

background-position: center/left/right/top/bottom/(x,y);

显示模式

块级元素

• 独占一行
• 宽度默认父级宽度，高度由内容撑开
• 可自定义宽高

行内元素

• 一行可以显示多个
• 宽高默认由内容撑开
• 无法自定义宽高

行内块元素

• 一行可以显示多个
• 可以设置宽高

元素显示模式转换

display: inline行内/block块/inline-block行内块;

继承

子标签的文字样式可以继承父标签的文字样式，若自身自带属性则会覆盖父级样式

优先级

作用域越小优先级越高

继承<通配符<标签类<id<行内样式<!important

盒子模型

• 内容区域content
• 内边距区域padding
• 边框区域border
• 外边距区域margin

CSS3自动减边框宽度

box-sizing: border-box;

border

可以设置单方向边框

border（-top）: 1px像素 solid线类型 red颜色

padding

padding: 上 右 下 左/上 左右 下/上下 左右

margin

margin: 上 右 下 左/上 左右 下/上下 左右

版心居中

margin: 0 auto;

合并问题

垂直两个块级元素的上下外边距会合并，取最大值

塌陷问题

互相嵌套的块级元素，子元素的margin-top会使父元素一起往下移动

• 给父级元素加padding-top
• 给父元素设置overflow:hidden
• 子元素转为行内块元素
• 设置浮动

清除默认内外边距

* {
    margin: 0;
    padding: 0;
}

结构伪类选择器

• E:first-child{} 匹配E元素的第一个选择器
• E:last-child{} 匹配E元素的最后一个选择器
• E：nth-child(n){} 匹配E元素的第n个选择器
• E:nth-last-child(n){}匹配E元素的倒数第n个选择器

伪元素

在CSS中添加HTML内容，必须有content属性，是一个行内元素

• ::before 在父元素最前添加伪元素
• ::after 在父元素最后添加伪元素

浮动

不占用标准的位置，可以覆盖元素，浮动标签顶对齐 不能通过text-align:center;margin:0 auto居中

float: left/right/top/bottom;

清除浮动

子元素设置浮动后，父元素无法撑开高度，会导致其余块级元素影响布局

解决方法

父元素设置高度

额外标签法

给父元素内容的最后添加一个块级元素，设置clear:both清除左右浮动影响

单伪元素替代额外标签

.clearfix::after{
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

双伪元素清除

.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
}
.clearfix::after{
    clear:both;
}

overflow

给父元素这是overflow:hidden

项目

引入css

<link rel="stylesheet" href="/css/index.css">

定位

position: static静态/relative相对/absolute绝对/fixed固定
left: 100px;
top: 200px;

relative相对定位

相对于原本的位置进行移动，原有的位置依旧占有并具备原有的显示模式

absolute绝对定位

设置了绝对定位不占位置

改变标签的显示模式，具备行内块特点，需要设置宽度

先找最近已定位的父级元素，如果有这样的父级就以父级为参照物进行定位；如果父级没有定位就以浏览器为参照进行定位

绝对定位居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)

fixed固定定位

不占位置，参考浏览器窗口，具体行内块特点

层级显示顺序

标准流<浮动<定位

都是定位的盒子，根据代码顺序显示，可通过z-index调整

装饰

vertical-align: baseline默认，基线对齐/top顶部对齐/middle中部对齐/bottom底部对齐

光标类型

cursor: default箭头/pointer手/text工字性/move十字

边框圆角

• 一个值：四个角相同
• 两个值：左上右下 左下右上
• 三个值：左上 左下右上 右下
• 四个值：左上 右上 右下 左下

border-radius: 数字px/百分比

正圆

• 盒子必须正方形
• 边框角度设置宽高的一半：border-radius:50%

胶囊

• 长方形
• 边框角度设置高度的一半

overflow溢出显示

• visible：默认值，溢出可见
• hidden：隐藏
• scroll：无论是否溢出，都显示滚动条
• auto：根据溢出情况，自动显示或隐藏滚动条

元素隐藏

• visibility：hidden 占空间
• display：none

透明

opcaity: 0-1;