选择器，emmet 语法，边距

文本属性

属性	表示	注意点
color	文字颜色	通常用16进制
text-align	文本对齐	可以设定水平的对齐方式
text-indent	文本缩进	通常段落首行缩进2个字的距离 text-indent：2em；
text-decoration	文本修饰	添加下划线 underline 取消下划线 none
line-height	行高	字的大小加上上下的空白等于行高

body{
           text-align: left;
           width: 760px;
           line-height: 25px;
           text-indent: 2em;
    }

CSS的引入方式

样式表	优点	缺点	范围
行内样式表	书写方便	结构样式混写	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底	控制一个页面
外部样式表	完全实现结构和样式分离	需要引入	控制多个页面

<link rel="stylesheet" href="a.css">
<!-- href="路径" -->

emmet 语法

快速生成HTML标签

• 生成多个标签：div*****10
• 有父子级关系的标签：ul > li
• 兄弟关系：div**+**p
• 带有类名或者标签名的：div**.**pink（class名）div#gray(id名)
• 生成的div的类名是有顺序的：p.demo**$***5
• 生成的标签默认显示几个文字：div{这里写文字}

注意：$是自增的符号

快速生成CSS样式

• width：100px; w100
• 可以用首字母快速生成样式

复合选择器

1. 后代选择器

可以选择父元素里的子元素

ul li{
    width: 300px;
}

注意：

1. 元素一和元素二必须用空格隔开
2. 只要有一层以上的关系就可以用，就像:

<ul>
    <li>
        <a href="#">aaa</a>
    </li>
</ul>

也可以通过后代选择器对“a”标签进行选择（ul li a）

2. 子选择器

只选择父元素最近一级的子元素

元素1>元素2{样式声明}

注意：

1. 元素1和元素2用大于号隔开

2. 元素1是父级，元素2是子级，最终选择元素2

3. 并集选择器

可以将多个标签用同一样式

元素1，元素2{样式声明}

注意：

1. 用逗号来实现
2. 任何选择器都可以作为并集选择器的一部分
3. 最后一个元素不需要加逗号

div,
p,
.pig li{样式声明}

4. 伪类选择器

链接伪类选择器

给某些选择器添加特殊效果，用“ : ”来实现

属性	定义
a:link	选择所有未被访问的链接
a：visited	选择所有已经被访问过的链接
a：hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起）

这个好好玩！

注意：按照 lvha的顺序！！！

focus伪类选择器

用于选取获得焦点的表单元素input：focus{样式声明}

选择器	作用	用法
后代选择器	用来选择后代元素	符号是空格 .nav a
子代选择器	选择最近一级元素	符号是大于号 .nav>p
并集选择器	选择某些相同样式的元素	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	a:hover{}
:focus 选择器	选择获得光标的表单	input：focus

CSS显示模式

块元素

1. 独占一行
2. 高度，宽度，外边距以及内边距都能控制
3. 宽度默认是100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

行内元素

1. 一行可以显示多个
2. 宽高无法设置
3. 默认高度是本身内容的宽度
4. 行内元素只能容纳文本或行内元素

行内块元素

1. 宽高可调
2. 一行多个
3. 默认高度是本身内容的宽度

CSS模式转化

行内元素转块级元素：display: block;

块元素转化为行内元素：display：inline;

转化为行内块元素：display：inline-biock;

简洁版小米侧边栏

（图就不放了）

注意：单行文字垂直居中，让行高等于盒子的高度

CSS背景

背景图片：background-image：url（地址）

注意：会默认铺满盒子

背景平铺（就是会不会铺满整个盒子）

用background-repeat来实现

参数值	类型
repeat	背景图像在x和y方向都平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在x方向上平铺
repeat-y	背景图像在y方向上平铺

注意：可以与背景颜色一起存在，背景颜色会被置于最底层

背景图片位置

用background-position属性来实现

left center等

为了让背景居中可以用background-position: center top;

背景位置-精确单位（background-position: x px y px;）

第一个参数一定对应x，第二个对应y

如果只写一个参数那就是x的值，y默认为垂直居中

背景位置-混合单位

background-position: 20px center

同样的第一个对应x的值，第二个对应y的值

背景固定

用background-attachment来实现

参数	作用
scroll	背景随对象内容滚动
fixed	背景图像固定

注意：默认值是scroll

背景属性的复合写法：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

背景颜色半透明

用 background: rgba（）; 来实现

background:rgba(0,0,0,0.3);

注意：

• "a"是alpha透明度的意思，取值在0到1之间
• 可以把0.3中的0省略掉，写出 .3
• 盒子的内容不受影响

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进值/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x，y坐标
background-attachment	背景固定	scroll/fixed
背景半透明	实现半透明	rgba（rgba代码）a为透明度

五彩导航栏

1. 模式转化
2. 后代选择器
3. 伪类选择器的使用

CSS三大特性

层叠性：解决样式冲突的问题

原则：

• 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式，可以理解为覆盖也就是层叠，第二个样式把第一个样式覆盖了
• 样式不冲突，不会层叠

继承性：子标签会继承父标签的某些样式，如文本颜色和色号

• 降低CSS样式的复杂性
• 部分样式（text-，font-，line- 这些开头的以及color属性）

行高的继承

注意：font: 12px/1.5 'Microsoft YaHei';

这里的行高“1.5”是字体大小的1.5倍，也就是12*1.5=18px

优先级：同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重表

选择器	选择器权重
继承或者 “*”	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1，0，0，0
!important 重要的	无穷大

注意：给**"a"标签指定样式时，只能用a{样式声明}，**不能通过父子级关系来指定样式，因为浏览器默认给"a"标签指定了样式，权重大于继承的

权重叠加:复合选择器会有权重叠加的问题

• ul li {
    color: green;
  }
  li{
  	color:red;
  }
  

  "li"中的文字将会是绿色，权重值为元素选择器ul+元素选择器li = 0,0,0,2

• 以四组为一个单位，权重会有叠加但不会进位

盒子模型

组成：边框、外边距、内边距、内容

边框（border）：三部分组成“ 边框粗细、边框样式、边框颜色 ”

属性	作用
border-width	定义边框的粗细，单位是px
border-style	边框的样式 solid（实线） dashed（虚线）dotted（点线）
border-color	边框颜色

简写border:1px solid red;没有顺序！！！

边框的每一条边都能定义样式（ border-top / bottom / left / right ）

注意：这里在定义不同边的时候一定要注意层叠性！！！

表格的细线边框：解决表格边框粗细叠加的问题

border-collapse： collapse; 表示把相邻的边框合并在一起

内边距（padding）：设置内边距，即边框与内容之间的距离

padding-left / right / top / bottom 分别定义四边的内边距

简写方式

值的个数	表达意思
padding: 5px;	代表4边的内边距都是5px
padding: 5px 10px ;	代表上下内边距是5px，左右内边距是10px
padding: 5px 10px 20px ;	代表上内边距是5px，左右内边距是10px，下内边距是20px
padding: 5px 10px 20px 30px ;	代表上内边距是5px，右10px，下20px，左30px，顺时针

注意：

• 边框会影响盒子的实际大小！！
• 盒子本身没有写 width或者height属性时，不会撑开盒子

外边距：用于控制盒子与盒子之间的距离

margin-left / right / top / bottom 分别定义四边的外边距

和padding语法基本相同

块级盒子水平居中

• 保证左右的外边距为"auto"
• 盒子必须指定宽度
• 常用写法：margin: 0 auto;

行内元素或者行内块元素水平居中给其父元素添加 text-align:center;即可

外边距合并：在使用margin定义块元素的垂直外边距时，可能会出现外边距合并

嵌套块元素塌陷解决方法：

1. 可以为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加overflow：hidden;

清除内外边距：网页元素很多都会带有默认的内外边距，而不同浏览器的默认值不一致，所以我们在布局前，首先要清楚内外边距

*{
	margin:0;
    padding:0;
}

注意：行内元素尽量只设置左右内外边距

清除无序列表的小圆点

li{
            list-style: none;
        }

很常用！加上这行代码可以去掉小圆点

圆角边框:把盒子变成圆角的

border-radius: 10px;

通过设定radius（半径）的值来确定圆弧的大小，用该半径的圆去与盒子的两条相邻边切

所以数值越大弧度越明显

要想要做出圆形的盒子，先设置一个正方形盒子，在让半径等于边长的一半

 width: 200px;
 height: 200px;
 border-radius: 50%;

圆角矩形：把半径设为盒子高度的一半

注意：border-radius可以设置多个值，4个数值是从左上角开始，顺时针的4个角的弧度

盒子阴影：用box-shadow来给盒子添加阴影

值	描述
h-shadow	必写，水平阴影的距离
v-shadow	必写，垂直阴影的距离
blur	模糊距离（虚实）
spread	阴影的尺寸
color	阴影颜色，一般用半透明的
inset	内阴影还是外阴影

注意：盒子阴影不占用空间，不影响其他盒子的排列

文字阴影：用text-shadow来添加阴影

值	描述
h-shadow	必写，水平阴影的距离
v-shadow	必写，垂直阴影的距离
blur	模糊距离（虚实）
color	阴影颜色，一般用半透明的

和盒子阴影写法一样

浮动（float）

标准流：就是标签按照规定好默认方式排列

1. 块级元素独占一行，从上向下顺序排列
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

• 一个标准的网页基本都包含这三种布局方式：标准流 浮动 定位

有很多的布局效果，标准流无法完成，比如把三个div放在一行，通过模式转化来做的话，他们之间会有空隙，而这个空隙有无法调整，所以需要利用浮动。因为浮动可以改变元素标签默认的排序方式。

网页布局第一准则：竖向排列用标准流，横向排列用浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一浮动框的边缘

语法选择器{float：属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

重要：

• 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
• 浮动的盒子不再保留原先的位置
• 如果多个盒子设置了浮动，浮动元素在一行内显示并且顶端对齐排列
• 如果装不下，则会在下一行显示
• 浮动元素具有行内块元素的特性
• 如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小由内容来决定

浮动元素经常搭配标准流的父元素

作用：可以先确定父元素摆放的位置，再在父元素的盒子里放浮动元素，可以约束浮动元素在页面中显示的位置

**Question！**这里遇到了一些问题，当使用无序列表来做侧边栏的时候，把小圆点取消了，但是它还占着位置

**A！**发现了bug，原来是没有清除内外边距导致的

网页布局第二准则：先设置盒子的大小，之后设置盒子的位置

注意点：

1. 浮动和标准流的父盒子搭配
2. 一个元素浮动了，理论上其余的兄弟元素也要浮动
3. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

因为父盒子很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动后，父级盒子高度就能由子级盒子决定，父级有了高度就不会影响下面的标准流了

语法

选择器{clear：属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右浮动的影响

额外标签法

在浮动元素末尾加上一个空标签（块级元素)，然后给这个标签清除浮动（关门）

父级添加 overflow

注意：是给父元素添加overflow:hidden;

属性值为：hidden、auto、scroll

:after 伪元素法

添加一串代码

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
.clearfix {
            /* 用来兼容低版本浏览器 */
            *zoom: 1;
        }

相当于额外标签法的升级版，这个是通过css在末尾生成了一个盒子，在末尾加墙

也可以通过选择器：before{}给盒子前面添加元素，在开头加墙

---