CSS 基础

优先级很高的标签

h1-h6 标题

articel

p

nav

列表 ul>li ol>li

img

a

table tr td

form

label

input type=checkbox radio test password button submit reset number date select>option

textarea

required

---

层叠样式表 cascading style sheet  – CSS

1 内联样式   head 标签内的  style 标签内部

2  嵌套样式   写在标签之中。

3  外联样式   写在其他文件上，用 link 连接   也在 head 之内

**         link red=”stylesheet” href=”css 地址”**

4  外部导入 写在 head 标签内， style 标签内部  最前面。

@import“css 地址”；

后面的同种属性的样式会覆盖上面的样式

样式语法

选择器{

样式的名字：样式的值；

}

选择器类型

元素选择器   标签名

id 选择器       #id

类选择器       .class

通配符选择器      *全部

**    选择器的优先级：越能确定元素的选择器优先级就越高**

!important(加在样式值后面)>id 选择器>class 选择器>元素选择器>通配符选择器

复合选择器

**    ****   ** 并集选择器     用 **，**隔开 –h1,h2,p,div

交集选择器       每个选择器之间直接连接，元素选择器写在最前面

后代选择器   空格隔开 >子代选择器

**                         div>div>p**

颜色

**    英语单词**

**   ** 16 进制 0-9 a-f #000000 黑色 # ffffff 白色

rgb(0-255,0-255,0-255)

rgba(0-255,0-255,0-255,0-1)

背景

background  背景 （背景色，背景图）

background-color  背景色

background-image  背景图片   url(“图片路径”)

字体

**   ** 单位  **px**  像素

**em **一个字体的宽度。width 和 height 也可以用这个单位，

居中   text-align:center;

边距

**         外边框  margin  可以有负值**

一个值   四个方向

两个值   第一个值代表上下，第二值代表左右。

三个值   上，左右， 下（左边和右边值一样）

四个值   上，右，下 ，左 —从 12 点钟方向顺时针

单边设置

margin-top

margin-left

margin-right

margin-bottom

**        ****外边距的合并**

           1.兄弟的垂直方向的外边距相遇，会合并。以最大的外边距的值为准。

2.水平方向正常正常叠加

**        **

**        ****margin 的 bug**

第一个子元素的上部 margin，会应用到父元素上。

**  解决方法：**

**    ****    **    **   ** 1.给父元素设置 padding

2.给父元素设置边框

3.给父元素加 overflow：hidden。

内边距  padding  参考 margin

边框  border

第一个值   线条的粗细

第二个值   线条额类型

solid  实线

dashed  虚线

dotted  点线

double  双实线

第三个值     线条的颜色，默认和字体颜色一样

vertical-align:top

• 应用，图文(行内块级元素)对齐方式, 默认、是底部对齐
• 可修改图片的基线，垂直的居中,
• top  (顶部对齐)、middle（中部对齐）、bottom（底部对齐）
• 多用于 table 以及行内块级元素

多行文本

顶部对齐

给图片设置浮动。(图片在文字的前面)

float：left|right|none

文本的对齐

**    **** **   水平的对齐：text-algin:left|right|center

text-decoration:underline;  文本下划线

单行文本的垂直居中

**    ****   ** line-height:  行高(行高等于 height)

多行文本的垂直居中，单行文本也居中.

**    ****   ** 1.display:table-cell**;**** ** 设置为表格。**   –display: **该属性规定元素应该生成的框的类型。

**        vertical-align:middle;**

**        **

**       ** 2.display:flex;

**           align-items:center;**

**      **

**                    **

float

**           **

float:脱离文档流

**   ** 标准文档流：html 中的元素默认的排列方式，块级元素独占一行，行内元素行内排布，行满换行。

行内元素，块级元素,行内块级元素。

行内元素（内嵌元素）：行内排列，设置高宽无效。

块级元素：  独占一行，可以设置高宽。

**  行内块级元素：行内排列，可以设置高宽。（img）**

1.浮动的影响

1.1  元素变成行内块级元素

    1.2  浮动的元素会影响后面元素的位置。

    1.3  连续浮动元素，

        左浮动元素，从左到右，从上到下排

        右浮动元素，从右到左，从上到下排。

    1.4 浮动塌陷

        子元素浮动，父元素内就相当于没有内容了。所以父元素高度会变小（或直接没有高度）。

2.清除浮动的影响：

对不想被浮动影响的元素设置

clear：right\left**both**

3.浮动塌陷的影响的解决方式

1. 给父元素设置高度**

2.给父元素加一个假儿子，比如 div,高度为 0，给假儿子加  clear：both。（就是靠假儿子把宽度撑起来）

3.**给父元素设置  overflow:hidden;(超出父元素的子元素就隐藏，相当于绑定了父子关系。)

4.伪类，原理和 2 相似

div:after{ –after 在 div 后插入行内元素

content:’’; –添加任意的行内元素内容

clear:both; –清除浮动对该元素的影响

display:block;  –   转换为块级元素

}

4.浮动不会遮挡文本流   就是文字、图片、多媒体文件等。

*{ <!–  关闭全局的样式。list-style:none 是关闭 li  的前面的图标样式 –!>

margin:0;

pading:0;

list-style:none;

}

margin:auto

自动居中。但需要设置块级元素的宽度，因为**块级元素默认宽度是一整行**。**且该宽度必须小于父级元素的宽度**。不设置 width，就不存在居中

浏览器的一个字的宽度为 21px

** ** display**:table-cell;  设置为表格。**

**    ****    **    **    **    inline   —行内元素

**    ****    **    **    **    block  —块级元素

**    ****    **    **    **    inline-block  —行内块级元素