CSS学习笔记

css的介绍：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的

一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化及个性设置。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css层叠性：一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。

css的作用：美化页面 美化结构标签

html 语法组成：<p width="100"></p>

css的语法组成：选择器{声明}/选择器{属性：属性值}/p{width:100px;}

1. 选择器 修饰美化的对象
2. {属性：属性值} 属性和属性值之间要用冒号
3.  一个选择器有多个属性的时候  属性值后面需要加分号
4. 属性不区分前后顺序

样式的建立：行内样式、内部样式和外部样式 

• 行内样式表的创建方式

                需要在标签内创建

                在标签内书写一个style属性

                在style的属性值位置书写css语法即可 （选择器{声明}）

• 内部样式表的创建方式

                在head区域内创建一个style标签

                在style标签中书写规范的css语法组成即可

• 外部样式表的创建方式

                需要在当前文件的外面创建一个后缀名为.css的文件

                使用link标签引入外部样式表（建议写在head区域内）

拓展：第三种外部样式表还有一种引入方式

        在head区域内创建一个style标签

        @import url（“地址”）

区别：link和@import方式的区别

        使用link标签引入的时候 结构和样式同时加载

        使用@import方式引入的时候 先加载结构后加载样式  不推荐  了解  模块化开发

样式表的优先级的总结

        行内大于内部         大于外部           => 行内样式表的优先级最高

        行内样式表的优先级最高，内部和外部取决于书写顺序        就近原则

使用环境

        行内样式表 覆盖

        内部样式表 demo

        外部样式表 工作项目

浏览器的控制台中的一些提示

        声明 被黑色的线划掉 表示声明冲突

css的选择器（选择符）

选择器的定义：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.

常用的选择器：标签、id、class、群组、包含、通配符、伪类选择器

1、标签选择器

        所有的html结构标签都可以作为选择器出现的 p、div、span、ul、...

        语法：标签的名称{声明}

2、id选择器

        需要在当前标签内添加一个id属性和属性值

        在样式表中使用 #id的属性值{声明}

        id通常表示唯一性 表示一块最大的外围布局

3、class选择器（类选择器）

        需要在当前标签内添加一个class属性和属性值

        在样式表中使用 .class属性值{声明}

        class通常可以选中一类相同的进行修饰

4、群组选择器

        表示声明是一样的 选择器可以写到一起

        写法：选择器1，选择器2，选择器3...{声明}

5、包含选择器

        表示通过父级选择到子级元素 大的包含小的

        写法：父级选择器 子级选择器{声明}

6、通配符

        表示选中所有标签

        写法：*{margin:0;padding:0}

        浏览器及所有标签的默认内外边距

 7、动态伪类选择器

        a:link{color:red;}        未访问的链接状态

        a:visited{color:green;}        已访问的链接状态

        a:hover{color:blue;}        鼠标滑过的链接状态

        a:active{color:yellow;}        鼠标按下去时的状态

        注意：

        伪类选择器的写法        选择器伪类声明/选择器：hover{}

        如果要设置伪类就得按照以上顺序书写

        hover的使用

        hover表示鼠标滑过时候的状态

                鼠标移入改变自己的状态样式        自己的选择器：hover{}

                鼠标移入改变子级的状态样式        父级选择器：hover   子级选择器{}

常见选择器的权重总结{表示选择器的优先级，浏览器加载显示的优先} 0000

        行内样式表 1000

        id        0100

        class        0010

        标签        0001

        群组        各自计算

        包含        相加

        通配符        0000

        伪类        0010

---

CSS浮动属性

作用：元素默认是上下排列的，使用浮动后可以让元素在水平方向进行排列

属性值:left、right、none

1. 浮动属性只能控制元素在水平方向上进行移动
2. 浮动元素会脱离文档流（正常的网页布局）初始位置不存在 破坏正常的网页布局
3. 设置了浮动 浏览器会生成一个新的浮动层 排列方式也是从左到右的
4. 当子级元素宽度大于父级元素宽度的时候，最后一个浮动元素会往下移动直至找到足够的空间
5. 浮动元素停止浮动的条件

                碰到父级包含框(父级的边框)就会停止浮动

                碰到前面一个含有浮动属性的元素也会停止浮动

---

CSS盒模型

概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充、内边距）、边框、边界(外边距)这就是盒模型。

作用：设置元素与元素之间的位置关系

盒模型的组成：

        content 内容

        padding 内边距

        border 边框

        margin 外边距

学习路径：从内往外学习

1. content        内容 表示你自己设置的元素宽高大小
2. padding        设置父级和子级元素之间的间距
3. border         边框
4. margin        设置同级元素之间的间距      

padding属性

padding的别名：填充、补白 主要设置父子之间的间距

padding的设置位置

        1、通常添加在父级元素上 控制所有的子级与父级之间的间距 但是会撑大当前的父级元素，为了不影响布局 需要在父级元素减去相应的padding值的大小

        2、还可以给子级元素单独添加 控制每个子级与父级之间的间距

padding属性的属性值设置

        属性值为数值+单位

padding的方向值

        padding一个属性值：上下左右

        padding两个属性值：上下、左右

        padding三个属性值：上、左右、下

        padding四个属性值：上右下左

前端中默认的方向（顺时针）：top、right、bottom、left

设置padding-方向值 表示单个方向上的间距

注意：padding值能不能取负值？不可以

margin属性

1. 对应快递盒子中多个快递盒子之间的间距
2. 表示margin是用来设置同级元素之间的位置关系
3. 哪个元素需要调用间距就给哪个元素添加即可
4. 使用margin不会撑大当前元素的大小 不需要减去相应的margin值

margin属性的属性值设置

        属性值为数值+单位

margin的方向值

        margin一个属性值：上下左右

        margin两个属性值：上下、左右

        margin三个属性值：上、左右、下

        margin四个属性值：上右下左

前端中默认的方向（顺时针）：top、right、bottom、left

设置margin-方向值 表示单个方向上的间距

注意：margin值能不能取负值？可以

内外边距可不可以换着用？可以

总结：内外边距的常见固定用法

*{margin：0；padding：0} 清除浏览器中默认边距

版心区域{margin：0  auto}

常见的margin bug

1、给子级元素添加margin值的时候会错误的解析到父级元素

处理方法：

• 设置padding
• 给父级区域添加边框
• 浮动
• 重点：overflow：hidden  文本溢出属性         可以解决99%的布局bug

2、同级元素上下排列 ，上下之间的间距由margin控制 ，margin-bottom/top 错误解析之间的最大值

处理方法：

• margin只设置一个方向即可

border属性

1. border-width 边框宽度
2. border-style 边框样式
3. border-color 边框颜色

属性值

1. 数值+单位
2. solid（实线）dashed（虚线）dotted（点线）double（双实线）
3. 默认是黑色的

复合属性/简写方式

属性：border

属性值：border-width border-style border-color

border：5px solid green;

需求

改变顶部边框的颜色 border-top/border-top-color

清除顶部边框 border-top：none/0

盒模型的总结：

宽度/高度=content（width/height）+border+padding

盒模型的组成部分

content         对应的就是width/height

padding        对应的是缓冲物品

border           对应的是快递盒子

margin           对应的是多个快递之间的间距

盒模型的计算方式

        计算自身大小 content+border+padding

        计算真实大小 content+border+padding+margin

文本大小属性 font-size

属性值：常规的属性值（数值+单位）

        font-size：100px（像素是web中常用的绝对单位）当数值为0的时候单位可以省略

        在浏览器中默认的字体大小是16px，最小的字体是12px

        由于市面上的浏览器较多存在差异 规定了12px是最小字体显示

        除了像素单位 还有一些常见的单位

                常用 em 相对于父级计算的单位 首行缩进

                了解   pt 磅      用在硬件设备上

                重要  rem  相对单位    相对于根元素html进行计算 移动端布局

字体类型的属性 font-family

属性值：法定属性值

        中文的属性值   建议添加引号

        英文的属性值   属性值只有一个英文单词可以不加引号  多个必须添加引号

        在浏览器中字体默认的类型是微软雅黑  win下面的中文默认字体是宋体/新宋体  英文Arial

加粗和倾斜属性

• 加粗属性        font-weight

                属性值：

                        数字  整百数（100~900）100~500表示正常字体  600~900表示加粗字体

                        bold  加粗的

                        bolder 更粗的

                        normal  正常的      清除默认的加粗字体

• 倾斜属性        font-style

                属性值：

                        italic 倾斜的

                        oblique  更倾斜的

                        normal  清除默认的倾斜样式

文本行高属性

属性：line-height

属性值：

        重要：文本行高 = 容器高度  文本会在垂直方向居中   原理：基线对齐

        文本行高>容器高度  文本会在垂直方向向下移动

        文本行高<容器高度  文本会在垂直方向向上移动

文本属性的简写方式/复合写法

属性：font

属性值：fony-weight font-style font-size/line-height font-family

注意：

        fony-weight font-style  可以互换位置并且可以不写

        font-size/line-height   固定的不可改

        font-family   即使没有需求设置  也要写上微软雅黑

文本水平对齐方式

属性text-align

属性值

left、right、center、justify（两端对齐）        

文本颜色属性

属性：color

属性值

        英文单词 red、green、blue...

        十六进制：

                以#开头，后面接6位字符（0123456789abcdef)

                获取设计图上的颜色  ps中的吸管工具

                当后面的六位字符相同的时候可以简写成三位（#fff  #000 #ccc）

        常见重要写法

                rgb(red,green,blue)   取值为0~255

                rgba(red,green,blue,alpha)   alpha 透明度取值范围0~1

文本修饰属性text-decration

属性值

underline  下划线

overline     上划线

line-through 删除线     del标签相同的效果

none  清除默认下划线

透明

        rgba()   0~1    单个元素

        opacity  0~1    所有元素

        transparent

首行缩进属性  text-indent

属性值

        数值+单位   10px/em

        可以使用正值也可以使用负值

        首行缩进只针对第一行文本

字间距  letter-spacing

词间距   word-spacing

列表属性的使用

1、定义列表的符号样式

        属性：list-style-type

        属性值：dsic(实心圆) circle（空心圆）square（实心方块）none（无）

        注意：列表的默认样式是有兼容问题的 在ie低版本中符号是不显示的

2、使用图片作为列表符号

        属性:list-style-image

        属性值：url()

3、定义列表符号位置

        属性：list-style-position

        属性值：inside  outside

4、列表属性最重要的是记住下面这个即可

        属性：list-style

        属性值：none  清除列表默认样式

背景属性的使用

1、背景颜色

属性：background-color/background

属性值：英文单词、十六进制、rgb/rgba

2、背景图片

属性：background-image

属性值：url()

        当背景图片小于容器的时候 默认平铺

        当背景图片等于容器的时候 默认占满

        当背景图片小于容器的时候 默认显示一部分

注意：背景图片和image的区别

        img图片只会显示一张 并且这个图片是占位置的

        背景图片是默认占满容器并且平铺 背景图片是不占位置的

3、背景平铺属性

属性：background-repeat

属性值

        no-repeat 不平铺

        repeat  平铺

        repeat-x/y  沿着x/y轴进行平铺

4、背景定位属性

属性：background-position

属性值

        x 轴：数值、left、right、center

        y 轴：数值、top、bottom、center

5、背景固定属性

属性：background-attachment

属性值

        scroll 滚动

        fixed 固定

6、简写方式

属性：background

属性值：颜色 图片 平铺 定位 固定

文本属性-文本溢出属性

属性：overflow

属性值

        visible 默认值

        hidden 超出隐藏

        scrool 不管超不超出都会显示滚动条的样式，当内容超出的时候会显示滚动条的作用

        auto 自动

拓展属性

        overflow-x

        overflow-y

隐藏的部分显示省略号

        容器要有固定的宽高大小                        width/height

        强制性的让文本在一行内显示                white-spacing：nowrap

        超出的文本隐藏起来                              overflow：hidden

        让隐藏的文本变成省略号                        text-overflow：ellipsis

元素类型的分类：块级元素/块状元素/块元素、行内元素/内联元素、行内块元素

1、块级元素（常见的块级元素：div、ul、li、p、h、form）

        可以直接设置宽高大小 在浏览器中以矩形盒子的方式显示出来

        块级元素默认独占一行 排列方式从上到下

        作用：块级元素可以用来嵌套行内元素或者其他元素类型作为盒子实现网页布局

2、行内元素（常见的行内元素：a、span、i、em、b、strong）

        行内元素不可以直接设置宽高大小，宽高由自身的内容决定

        行内元素在一行内逐个显示

        重点：给行内元素设置margin-top/bottom会失效 依然遵循盒模型的布局方式

3、行内块元素（常见的行内块：input、img）

        可以直接设置宽高大小 => 块级元素

        可以在一行内逐个显示 => 行内元素

        注意：所有行内块元素都是以基线对齐的

        解决基线对齐：vertical-align：top/buttom/middle

改变元素类型的属性：display

属性值

        block 块 将其他元素类型转换为块级元素 使其具有块级元素的特点

        inline 行内元素 将其他元素类型转换为行内元素 使其具有行内元素的特点

        inline-block 行内块元素 将其他元素类型转换为行内块元素 使其具有行内块元素的特点

                拓展：使用了浮动属性 也会将元素类型转换为行内块

list-item 列表项目  了解  转换成块元素

none 无 隐藏

        list-style：none

        border:none 

        background:none

        outline:none

        texet-decoration:none

重点：none和block是一对应用 表示隐藏和显示

居中方法

1、表格

        水平方向 align:left、right、center

        垂直方向 valign：top、bottom、middle

2、文本居中

        水平方向 text-align：center

        垂直方向 line-height =height

3、版心居中

        水平方向 margin：0 auto

4、背景图片

        水平垂直 background-position：center center

        背景图片是不占位置的

5、img元素结构居中（麻烦）

6、定位居中（两种）

7、位移居中

8、css3计算属性（calc）

9、弹性盒居中

10、网格布局居中

图片居中（原理：基线对齐）

1、给图片的父级盒子添加 text-align：center 控制图片水平方向居中

2、在图片后面添加任意标签（不要空格换行）

3、给这个标签转换行内块元素 => 基线对齐

4、解决基线对齐问题 给当前这个标签和图片都设置vertical-align：middle解决基线对齐

5、优化代码

相对定位的使用

属性：position

属性值：relative

        相对定位相对与初始位置进行移动

        定位属性中的方向值可以使用负值

        相对定位不会脱离文档流，初始位置还存在 不会破坏正常的网页布局

        作用：为了给绝对定位提供参照物

绝对定位的使用

属性：position

属性值：absolute

绝对定位的参照物

        如果父级没有定位属性的时候往上级查找 直至找到浏览器 相对于浏览器进行位置偏移

        如果父级有定位属性的时候 就像对于父级元素位置进行偏移

绝对定位是脱离文档流的 初始位置不存在 会破坏网页布局