前端开发--CSS基础

1:标签选择器，标签名作为选择器，选择页面中所有类型的标签，统一设置样式

2: 以.类名作为选择器

.类名 {  属性：属性值 } <标签名 class='类名'>标签体 

• 要调用类选择器定义的样式，哪个标签需要添加标签clss属性，属性值是类名，类名是我们自己的

• 一个标签或多个标签可以设置相同的类名，并调用相同的样式

• 类名的设置

  • 使用英文字母设置，不使用纯数字和中文来定义类名，类名从英文字母开始

  • 长名或短语可以用中横线设置类名

  • 常见的命名规则。。。

  • 可通过标签class属性设置多个类名 ，多个类名之间用空间隔开

    <标签名 class='类名1 类名2'> 

    多种名称的优点是为标签设置公共风格，风格独特，节省代码，易于统一管理

  3：id选择器

  设置标签id属性，属性值是id名，css中id选择器通过#id名 来定义

  #id名{  属性名：属性值  } 

  id值就像人的身份证，id值不能重复

  像人的名字一样，人可以重名

  4: 使用通配符选择器*表示页面中的所有标签（元素）

  *{ 
             属性名：属性值 } 

父元素：直接含有子元素的元素是父元素

子元素：直接被父元素包含的就是子元素 （亲儿子）

祖先元素:直接或间接包含后代元素的是祖先元素

一个元素的父元素也是它的祖先元素

后代元素:被祖先元素直接或间接包含的元素是后代元素

子元素也是后代元素

兄弟元素:同父元素是兄弟元素

复合选择器的案例格式

     
         我是div标签         
             我是divP元素，我是div的亲儿子             我div>p标签中的span，我是div的孙子        
        我div中span标签，我是div的亲儿子
    

复合选择器就是将两个或多个基础选择器进行一些组合形成的选择器，其优点是可以更高效准确的选择出目标元素

复合选择器的分类

• 语法：

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

语义是：将元素1的后代元素，元素2选择出来，给元素2添加样式。

注意：

• 元素2只要是元素1的后代即可，无如是儿子，孙子，重孙子

• 元素1，元素2可以是任意的基础选择器

作用：选择父元素中直接子元素

语法：

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

语义：将某元素内(最近一级)的子元素选择来，添加样式。（将元素1的亲儿子元素2选择出来）

格式：选择器1选择器2选择器3{

}

div.class-name{ 
        
 color:red;
}

作用：选中同时符合多个条件的元素

交集选择器中如果有元素选择器，要以元素选择器开头

所用：并集选择器是将多组 符合条件的标签 都选择出来，给他们添加共同样式集体声明

语法：

元素1,元素2{
	样式声明
}
语义：给元素1和元素2添加样式，,相当于和的意思
  
例子：
p,
div,
ul li{
	color:red;
}

注意：并集选择器要竖着写，选择器之间使用英文逗号,分隔，且最后一个选择器后没有,

属性选择器格式

[属性名]{}   选择含有指定属性的元素，不论属性值是什么
[属性名="属性值"]{}  选择含有指定属性和属性值的元素，属性名和属性值必须都符合
[属性名^="属性值"]{} 选择含有指定属性并且属性值要以指定的值开头 的元素
[属性名$="属性值"]{} 选择含有指定属性并且属性值要以指定的值结尾 的元素 
[属性名*="属性值"]{} 选择含有指定属性并且属性值中只要包含指定的值即可 的元素

• 伪类选择器（常见）

  伪类（不存在的类，特殊的类），伪类用来描述一个元素的特殊状态，比如：第一个字元素，被点击的元素，鼠标移入的元素…

• 伪类的写法最大特点是用冒号（:）表示

  伪类的分类https://www.imooc.com/article/2799 https://www.cnblogs.com/1463069300limingzhi/p/11361709.html

1:ui伪类：作用是给某些标签的不同状态添加特殊效果

• ui伪类又分为了：静态伪类和动态伪类

  • 静态伪类 ，这两种伪类只能用于超链接

    • ：link a:link选择被没有访问的超链接（正常的链接）

  • ：visited a a:visited选择被访问之后超链接

    为了保护用户隐私。一般超链接的：visited伪类一般只修改字体颜色

• 动态伪类，针对所有标签都是可用的

  • ：hover a:hover鼠标放在标签上悬停

  • ：active a:active激活的意思，选择标签被 鼠标正在点击但是未弹起的状态

  • ：focus input:focus这个选择器主要用于获得焦点的表单元素。

    焦点就是光标 input:focus

  **注意点：**a链接有4种伪类即又加作链接伪类：link :visited :hover :active ,这4种伪类必须按照lvha的顺序写，否则会失效，即love hate爱恨原则，先爱后恨

  因为a链接有默认样式，所以在工作中我经常给链接指定样式

2：结构化伪类

• :first-child 伪类与指定的元素匹配：

  选取父元素中的第一个子元素，被选出来的元素是一组兄弟元素中的第一个

• ： last-child
  选取父元素中的最后一个子元素，即被选出来的元素是一组兄弟元素的最后一个元素

• :nth-child(n)

  选中第n个子元素

  特殊值：n 第n个 n的范围是0到正无穷

  ​ 2n 或even 选中偶数位的元素

  ​ 2n+1 或 odd 选择奇数位的元素

  ​ 3n的倍数

  ​ -n+3 前3个元素，从第一个到3元素

  ​ n+3 从3开始到后面的元素

  是根据所有的子元素进行排序

  • :first-of-type

  • :last-of-type

  • :nth-of-type

    这个伪类和nth-child组的伪类作用相似，只不过是它是在同类型的元素中进行排序

  • :not() 否定伪类

    将符合条件的元素从选择器中去除

（结构化伪类先不讲，可以等css3再讲）

• 等其他选择器

后代元素可以继承祖先元素的一些样式

可继承的样式一般是和文字有关的样式：text-开头的样式 font-开头的样式 line-开头的样式 以及color

不可以继承的样式：背景相关的，布局相关的样式 …

优点：我们可以一些标签都有的样式统一设置到它们共同的祖先元素上，这样只需要设置一次就可以让所有的后代元素具有该共同的样式

常见的使用方式：在body标签设置页面整体的字体样式等

**注意：**行高的继承性

• 行高可以跟单位也可以不写单位
• 如果子元素没有写行高则会继承父元素行高，如果继承来的行高没有单位（1.5）则行高是相对于当前子元素字体大小*行高
• 行高不写单位的写法的优点是子元素可以更具自身的字体大小计算行高

	
		
我脑子不好使
	
样式：body{	font:14px/1.5 "微软雅黑"；}p{	font-size:16px;}div和p都会继承body的字体大小和行高，但是p字体又重新赋值了，所以div最后的font-size是14px p的字体大小是16px ；div的行高是14*1.5；p的行高是16*1.5

当作用在一个元素上的样式发生冲突时应用哪个样式，由选择器的权重（优先级）决定

• 选择器的优先级：

  • 继承的样式： 没有优先级

  • 通配符选择器权重 ：0,0,0,0

  • 标签选择器权重：0,0,0,1

  • 类和伪类选择器权重是：0,0,1,0

  • id选择器权重是：0,1,0,0

  • 行内样式权重是：1,0,0,0

  • ！important权重：无穷大

    在一个样式后面添加!important ,此时此时该样式会获得最高的优先级，但是要慎用，因为后期不好修改，通过js也不好修改

• 复合选择器在比较优先级时，需要将选择器的优先级相加，谁的优先级高就显示谁声明的样式

  例如： .classname p选择器的权重是10+1=11

• 并集选择器（分组选择器）的权重是单独计算的 div,.class-name,#aa{}

• 选择器的累加不会超过其最大数量级，比如。再多的类选择器累加其权重也不会超过一个id选择器

• 选择器权重相同按就近原则，权重不同按权重高的样式

  案例可以讲一下继承的样式和通配符权重

• 样式的冲突： 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置了不同的样式值

  • 给一个元素通过相同的选择器（优先级相同）设置了相同的样式造成样式冲突，后面设置的样式会覆盖前的样式（遵循就近原则）

  • 由选择器的优先级决定起作用样式，优先级高的起作用

  • 选择器的权重(优先级)相同，遵循就近原则，后面设置的样式会覆盖前面设置的样式（css层叠）

• 样式没有冲突，则都会作用在元素上

• 像素其实就是屏幕上一个个小的方形的发光点，这次小方格的位置和颜色就决定了屏幕中显示的图像的样子

​ 像素是是整个图像中最小的单位，单位是px

• 屏幕分辨率是指在屏幕横向和纵向的像素个数，分辨率1920*1080，就是指在水平方向像素是1920个，垂直方向像素个数是1080个
• 对相同尺寸的屏幕而言，屏幕分辨率越低时（640*480），在屏幕上的像素就越少，单个像素的尺寸就越大，屏幕分辨率高时（1600 * 1200），在屏幕上的像素点就越多，屏幕显示的效果就越清晰，单个像素的尺寸就越小，所以同样的200px在不同的设备上显示的图像尺寸是不一样。（所以有些高清设备会对像显示的像素做一些加倍的处理。）

移动端时讲

像素：

屏幕是由一个个的发光小点构成，这一个个的小点就是像素

在前段开发中像素分为两种情况讨论，css像素 和 物理像素

物理像素 就是屏幕上的小发光点，是真实存在的，是厂商的出场设备的时候就设置好的 比如iphone6/7/8的是750*1334

css像素，就是我们css中写的多少像素 10px

浏览器在显示网页时是将css像素转换为物理像素然后再呈现的的

一个css像素最终由几个物理像素显示，由浏览器决定，默认情况下pc端的一个css像素对应一个物理像素，但是移动端设备就不尽相同了，1px的css像素和其能显示的物理像素的个数的比值，称为物理像素比或者屏幕像素比

视口：

视口就是屏幕中用来显示网页的区域，就是浏览器的窗口，视口的大小随着浏览器的拖拽可以改变，我们的网页就是在视口显示的

可以通过查看视口的大小，来观察css像素和物理像素的比值。（方法是：将浏览器全屏显示，没有滚动条的情况下，html标签在盒模型中widht就是视口的大小）看视口一般只看宽度不看高度，因为网页的高度是不固定的

在默认情况下（浏览器没有进行缩放的情况下）：

​ 视口宽度 1920px（css像素）1920（物理像素） 此时css像素和物理像素的比例是1:1

就浏览器放大两倍的情况下 放大的原理是将以前的一个css像素变为2个css像素

​ 视口的宽度 960（css像素）1920（物理像素，即屏幕上的小发光点的个数是不会改变的） 此时css和物理像素的比是1:2

我们可以通过改变视口的大小，来改变css像素和物理像素的比值

在不同的屏幕下，单位像素的大小是不同的，像素越小屏幕越清晰

智能手机的像素点 远远小于计算机的像素点

问题：一个宽度为900px的网页在

默认情况下，移动端的网页都会将视口设置为980像素（css像素）以确保pc端的网页可以在移动端正常访问，但是如过网页宽度超过了980px

移动端的浏览器会自动对网页缩放以完整显示网页

移动端默认的视口大小为980px（css像素）

默认情况下，移动端的像素比就是 980/移动端的宽度

编写移动端页面的时候，必须要确保一个比较合理的像素比

1css像素 对应 2个物理像素 1css像素 对应 3个物理像素

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为最佳像素比，就可以得到一个最佳的效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口

将样式的属性值设置为相对于父元素属性的百分比

有点是：子元素可以随着父元素的改变而改变

em是相对于元素自身的字体大小（font-size）来计算的

元素自身没有设置font-size的话，会继承父元素的font-size

1em=1font-size

em会随着字体的大小改变而改变

div{ 
        
font-size:30px;
width:10em;  //300px
height:20em; //600px
}

rem是相对于跟元素的字体大小来计算的

根元素是html标签

作用：推荐文本使用的字体系列(字体的格式)

语法：

body{
	font-family:"微软雅黑"；
}
p{
	font-family:Arialy,'Micosoft yahei','微软雅黑'；
}

注意点：

作用：定义字体的大小

• 字体框就是字体所在的框子，设置font-size实际就是设置字体框的大小

• px（像素）是网页常用的单位

• 每个浏览器的默认字体大小是不一致的，我们尽量明确指定字体大小值，chrome浏览器默认文字的大小是16px

• 可以在body标签中指定页面文字的统一字体大小，但是h系标签需要单独指定字体大小

• 作用：字重，设置字体的粗细效果

• font-weight取值：

  normal：默认值，正常字体不加粗，相当于400

  blod：粗体，相当于数字700

  bloder：特粗体

  lighter：细体

  数字：100至900（没什么用）

  font-weight其实就是看用户的电脑中，有没有相对应的字体组的粗细版本，比如说，100字重的微软雅黑，200字重的微软雅黑，300字重的微软雅黑…一般用户的电脑上不会有这么多的字重版本，所以，有时设置font-weight没有效果

作用：设置文本的风格，倾斜

取值：normal 常用来给em，i标签改为不倾斜

​ italic：设置为斜体

• 设置字体相关的所有属性

  font:font-style font-weight font-size/line-height font-family; 各属性之间使用空格分开

• font属性是组合属性，是有严格的顺序的，不能颠倒顺序。font-size和font-family不能省略且必须是后两位，且必须同时出现，其他的属性省略的话有采用默认的样式，默认属性值会覆盖之前的设置的属性值，比如说行高如果不写会采用其默认值

body{
	font:font-style font-weight font-size/line-height font-family
}

用来定义文本的外观，比如文本的颜色，对齐方式，装饰文本，文本缩进，行间距等

(color，text-diraction，text-align，line-height)

网页中常见的颜色取值方式：预定义颜色（颜色的名称），16进制（#fff），rgb（255,255,255）

• rgb是根据三种颜色的不同浓度调配出来的颜色

  格式：rgb(red,green,blue)

  red green blue 这个是光的三原色，绘画的三原色是红黄蓝

  red 代表颜色中红色成分 取值范围0-255或者（0%-100%）

  green 代表颜色中绿色成分 取值范围0-255或者（0%-100%）

  blue 代表颜色中蓝色成分 取值范围0-255或者（0%-100%）

  注意：当三种颜色值都为0时是黑色，当三种颜色值都是255或100%时是白色

  rgba(red, green,blue,alpha)

• rgba(red,green,blue,alpha) 就是在rgb的基础上增加了通明度

  alpha表示不透明度，取值是0(完全透明)-1(完全不透明) 0.5半透明

• 十六进制的rgb值

  • 十六进制是计算机中常用的计数方式。他的规则是 逢十六进一

    123456789ABCDEF 用英文字母A到F表示10进制中的10到15

    如果计数到15时需要再加1，就进位

    js中十六进制数的表示方式为0x开头

  • 在css中使用十六进制的rgb值

    语法：#红色绿色蓝色

    颜色的浓度通过 00-ff。比如：#ff0000

    如果颜色两位重复可以只写一个 #f00

• HSL值 HSLA值（可以不讲）
  • H 色相（0-360）工业设计中常用色相
  • S 饱和度 ，颜色的浓度 0%–100%
  • L亮度，颜色的亮度 0%-100%

作用：设置元素内文本的水平对齐方式

取值：left/right/center/justify （两端对齐）

父元素添加text-align：center，可以使内部的行内元素和行内块元素水平居中

作用：给文本添加上划线，下划线，删除线

取值：none 默认，没有装饰线 ,给a链接删除默认的下划线

​ underline 下划线

​ overline 上划线（几乎不用）

​ line-through 删除线

text-decoration:underline red dotted;  //后面的值可以指定装饰线的颜色和装饰线的样式，但是有浏览器的兼容问题，chrom浏览器支持，ie浏览器不支持

作用：指定文本的第一行的缩进一个给定的长度，这个长度也可以设置负值。（通常是段落首行缩进。）

p{
	text-index:2em;//缩进两个字体大小
	或
	text-index:20px;
}

• em是一个相对单位，是相对于当前需缩进文字的字体大小而言的（字体大小是通过font-size设置的），如果当前文字没有设置大小，则相对于父元素的文字大小进行缩进

• 行高是文字在页面中占有的实际高度，通过line-height属性来控制行高即而控制了文字行与行之间的间距。

• 行高组成：文字本身的高度加上 上空隙和下空隙，文字的行间距=行高-字体大小

• 行高可以直接指定一个带单位大小，如果 10px 10em rem 长度单位在此之前讲

  也可以为行高设置一个数值（不带单位），行高会是字体大小的指定倍数

  line-height省略不写的话会采用默认值 1.3333333…

行高等于高度 可以控制单行文字 行内元素 行内块元素垂直方向居中 ，多行文字则不行

单行文字垂直居中的原理：设置行高等于盒子的height，行高的上空隙和下空系把文字挤到中间，如果行高小于盒子高度文字会偏上，如果行高大于盒子高度文字会偏下

作用：设置网页如何处理空白（如何换行）

取值：normal 正常显示

​ nowrap 不换行

​ pre 保留，在默认情况下网页会把多个空格和换行解析成一个空格，pre会以预处理的格式会保留所有的空 白（空格和换行），代码写成什么样就显示什么样

常有的方式是对溢出的内容显示省略号

div{
		width:300px;   定宽
		white-space:nowrap;   不换行
		over-flow:hidden;  溢出的显示隐藏
		text-overflow:ellipsls;  溢出的文字显示省略号	
}

单行显示省略号，这几个属性缺一不可

多行显示省略号：

设置宽度
text-overflow: ellipsis;
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden;  /** 隐藏超出的内容 **/

作用：规定元素内容溢出元素框时发生的事情

取值：visible 默认值 不剪切内容，无滚动条

​ hidden 将溢出的内容隐藏掉，内容实际依旧存在结构中，只是隐藏掉了

​ scroll 无论内容是否溢出，显示水平和垂直方向两个滚动条

​ auto 根据内容来决得是否显示滚动条及显示哪个方向的滚动条

overflow-x 属性

overflow-y 属性

over-flow只作用在定高的块状元素上

作用：通过css的背景属性给元素添加背景样式，如背景颜色，背景图片，背景平铺，背景图片位置，背景图像的固定

• 默认值是transparent（透明）
• 设置背景颜色
  • 预定义颜色
  • 16进制（#fff）
  • rgb
  • rgba 设置背景颜色半透明，a是值alpha透明度取值是0到1，1是不透明(有兼容性问题但一般不考虑)

作用：给元素设置背景图片，多用于设置logo，一些小图片，超大的图片

优点：便于控制背景图片的位置（精灵图）

取值：none（默认）｜url

background-image:url(图片地址);
图片地址可以加引号也可以不加引号，加引号可以避免一些特殊符号引起的问题，所以推荐加引号

注意：

• 元素可以同时添加背景颜色和背景图片，只不过背景图片会压住背景颜色，背影颜色会成为背景图片的背景色

• 如果背景图片小于元素，则背景图片会自动在元素之中平铺，将元素铺满

• 如果背景图片大于元素，则背景图片会有一部分无法完全显示

• 如果背景图片和元素一样大，则会正常显示

作用：用来设置背景图片的平铺方式

取值：repeat 默认值 在水平方向和垂直方向双向平铺

​ no-repeat 不平铺

​ repeat-x 水平平铺

​ repeat-y 纵向平铺

background-positon：x y；

x坐标 y坐标 ，可以使用方位名词或精确单位

• 方位名词：top center bottom left center right；

  • 两个值都是方位名词：没有顺序之分 即background-position：center right和right center是等效的

  通过方位名词是可以区分出是水平方向还是垂直方向的

  • 如果只指定一个方位名词，另一个省略的方位名词默认是center

    方位名词的方式像是一个九宫格，案例展示，画九宫格

• 通过偏移量来指定背景图片的位置

  百分数 或 数字和单位标识符组成的长度值（10px）

  • 如果参数是精确单位则两个值的顺序是固定的，即第一个是x轴，第二个是y轴

  • 如果只设置一个数值，则该数值是x轴，另一个默认是center

    background-position:-50px 300px;
    

  注意：background-position取值为百分比的时候，正值是向左走，负值是向右走

• 参数是混合单位 (可以不讲)

  方位名词和精确单位混合使用，则第一个是x轴，第二个是y轴

**案例：**雪碧图··

取值：

• 宽度值 高度值；第一个是宽度 第二个是高度。 background-size:100px 200px

  可以采用精确数字加单位，也可以采用百分百，百分比是计算相对于背景定位区域的百分比

  若写一个数字的话，则默认是宽度，第二个默认是auto（自动）

• cover 是将背景图片按照图片比例进行缩放，只到可以将背景定位区域全部覆盖的最小尺寸（图片比例不变，将元素铺满）

• contain（包含）是将背景图片按照图片比例进行缩放，直到背景图片可以在背景定位区域完全展示的最大尺寸(图片比例不变，图片在元素中完整显示)

精确的尺寸，一般是数字加单位

作用：设置背景图片是否跟随元素移动

background-attachment：取值

​ scroll 背景跟随元素滚动

​ fixed 背景图片固定在页面中，不会随元素移动，此时再定位（background-position）就是相对于整个浏览器窗口定位（设置偏移量）

案例：https://im.qq.com

作用：设置背景的范围。clip修剪

取值：border-box 默认值，背景会出现在边框的下面

​ paddding-box 背景不会出现在border下面，只会出现在内容区和内边距

​ content-box 背景只会出现在内容区

（有一点点的兼容性问题，可以忽略不计，ie浏览器的ie8不支持）

作用：背景图片偏移量开始计算的原点。（注意是背景图片，不是背景颜色）

取值：padding-box 默认值，background-position从元素的的左上角 内边距处开始计算

​ content-box 背景图片的偏移量从元素的左上角 内容区处开始计算

​ border-box 背景图片的偏移量从元素的左上角 边框处开始计算

所有背景相关的样式都可以通过该属性设置

样式书写没有固定顺序，但一般习惯顺序是：背景的颜色 图片地址 平铺 滚动 位置

bg-color bg-image bg-repeat bg-position/bg-size bg-attachment background-origin background-clip

background:red url() no-reapt fixed right top;

注意点

• 样式没有顺序之分，但是background-size必须再background- position的后面，且用/隔开（ 即bg-position/bg-size）
• bg-orign和bg-clip的取值相同但是表示的含义不同，为了区分开，这两个样式书写顺序得是bg-origin要在bg-clip的前面

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载

浏览器加载图片时是按需加载，即需要的时候再加载，不需要9⃣️先不加载

:line :hover :active伪类中添加的背景图片是在指定状态出发时才会加载，第一次在没有缓存的情况下会有空白间隙

css渐变

作用：可以让两个或多个指定的颜色之间显示平稳的过渡

css有来两种渐变 - 线性渐变 line-gradient -颈向渐变 radial -gradient

background-image：line-gradient（方向，颜色1，颜色2…）

background-image：line-gradient（颜色1，颜色2…）方向默认是从上到下

background-image：line-gradient（to right，颜色1，颜色2…）从左到下右

background-image：line-gradient（to bottom right，颜色1，颜色2…）从左上角到下右下角

css将所有的页面元素设计为了一个个矩形的盒子，页面布局实际上就是在页面上摆放这一个个的盒子（看其他网站比划出一个个盒子）

看礼盒的图片

html页面中的元素本质就是一个的矩形盒子，用来封装周围的html元素，它包括实际内容 填充 边框 边距

看盒模型图片：标准盒模型

元素的内容区域使用width和height设置的，元素的子元素文本等内容都在内容区中排列

• 作用：border可以定义元素的边框，边框就是盒子的边缘，边框里面属于盒子内部，边框外面属于盒子的外部

• 设置border要通过三个样式设置

  • Border-width:设置边框的宽度，单位一般都是px

    • border-width 有默认值，默认值是3px，所以border-width可以不写，不设置时采用默认值

    • border-width取值方式：

      • 四个值：上 右 下 左

        三个值：上 左右 下

        二个值：上下 左右

        一个值：设置四个方向的值相同

    • 只设置一个方向的宽度

      border-top-width border-right-width border-bottom-width border-left-width

  • border-style：设置边框的样式

    取值方式同上border-widht和border-color一样

    可去的值有：solid 实线边框

    ​ dashed 虚线边框

    ​ dotted 点线边框

    ​ double 双线

  • border-color：设置边框的颜色

    同样可以分别指定四个方向的边框颜色，取值方式和border-width一样

    ​ 四个值 border：red green blue yellow；

    ​ 三个值

    ​ 二个值

    ​ 一个值

    • 只设置一个方向的颜色

      border-top-style border-right-style border-bottom-style border-left-style

    • boder-color也可以省略不写，采用默认值为黑色

      默认颜色是透明 tansparent？？？

  • border简写属性，所有边框相关的样式都可以通过该样式设置，没有固定顺序

    border：border-width border-style border-color; 这种方式是设置了四个方向的边框是一样

    borer：1px solid red；

    还可以单独设置一个方向的边框样式：

    border-top border-right border-bottom border-left

    borer-top：1px solid red；

• 注意：在标准盒模型中boder会加大盒子的宽高

• 案例：css三角形

  div { 
            
    width: 0px;
    height: 0px;
    border-top: 150px solid red;
    border-right: 100px solid blue;
    border-left: 100px solid yellow;
    border-bottom: 100px solid green;
  }
  

  表格的细线边框

  border-spacing：0px； 这个属性设置单元格的外边距

  border-collapse：collapse； collapse：折叠 设置表格的边框合并成一个边框

  设置了border-collapse：collapse后border-spacing将不在起作用

  table{ 
            
    width:500px;
    height:500px;  表格可以不设置宽高由内容撑开尺寸
    border:1px solid  red;
    border-spacing:0px; 
    border-collapse:collapse;
  }
  td{ 
            
  	border:1px solid  red;
  }
  

padding设置元素的内边距，即盒子的边框和内容之间的距离（填充）

​ 可以单独设置： padding-top 上内边距 padding- right 右内边距 padding-bottom 下内边距 * padding-left 左内边距

• 可以简写，使用padding属性设置：（用法和border-width一样有四种取值方式）

​ 4个值padding：3px 2px 8px 8px; 上右下左

​ 1个值padding：3px; 四个方向的内边距值一样时的写法

​ 2个值padding：3px 2px； 第一个值表示上下内边距是3px 第二个值表示左右内边距是2px

​ 3个值padding：3px 2px 3px； 第一个值表示上内边距是3px 第二个值表示左右内边距是2px 第三个值表 示下内边距是3px

• padding取值：length｜百分比

百分比是按照父元素的宽度的百分比，无论父元素有没有设置padding值，子元素的padding采用百分比都是相对于父元素宽度width来计算的padding值

注意：

• 在标准盒子模型中如果盒子已经设定了宽高，padding会加大盒子的尺寸，背景颜色会延伸到内边距
• 如果元素没有指定宽高属性，则此时padding不会撑开盒子所以说当元素和父元素是一样宽时不用给子元素设置宽度值了，它会自己默认时父元素的100%

注意：一个盒子可见框的大小由内容，内边距，边框相加决定

margin设置元素与其他元素之间的间距

外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置

• 有四个方向的取值，可取的值：length｜百分比|auto

  margin-top 上边距，设置正值，盒子会向下移动，设置负值盒子会向上移动

  margin-right 默认情况下margin-right不会产生任何效果

  margin-bottom 设置正值会使其下面的元素向下移动，设置负值会使下面的元素向上移动

  margin-left。 左边距设置正值元素会向右移动，设置负值元素会向左移动

• margin的简写属性，可以同时设置四个方向上的margin，用法和padding和border-width一样

百分比是按照父元素的宽度的百分比，无论父元素有没有设置margin值，子元素的margin采用百分比都是相对于父元素宽度width来计算的margin值

auto是由浏览器自动计算的值

• margin会影响盒子实际的占用空间

元素在器父元素中水平方向的位置由以下几个属性共同决定，且必须满足这个等式

margin-left + border-left + padding-left + contern + padding-right + border-right + margin-right=其父元素的内容区的宽度

这七个值中，有三个值可以设置为auto； width margin-left margin-right

原则是：如果这三个值中某个值设置为auto，则会自动调整为auto的那个值是以使等式成立

• 如果将一个宽度和一个外边距设置为auto，则宽度会调到最大，设置为auto的那个外边距会自动为0

  • 如果将三个值都设置为auto，则宽度最大，外边距都是0

  • 如果将两个外边距设置为auto，宽度固定值，则会将两遍的外边距设置为相同的值，所以利用这个特点使定宽的块状元素水平居中

    注意：1:巧用外边距使定宽块级元素水平居中，必须是设置了宽度的块级元素

​ 方法：盒子左右边距都设置为auto；

margin：0 auto;
margin：auto auto；
margin：10px auto；

margin-left：auto；
margin-right：auto；

​ 2:行内元素，行内块元素水平居中是给父元素设置：text-align：center；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfzV1IdT-1658490110152)(/Users/wei/Desktop/markdown/css备课/WechatIMG46.jpeg)]

• 外边距合并（边距重叠）

  外边距合并指的是相邻的垂直方向的外边距会发生重叠的现象

  • 兄弟元素

    当两个兄弟元素之间的相邻垂直外边距相遇时会合并为一个外边距，取两者之间的较大值（两者都是正值）

    • 特殊情况

      如果相邻的外边距一正一负，取两者之和

      如果相邻的外边距都是负值，则取两者中的绝对值较大的那一个的值

  两个普通的元素margin如果都是正值，合并后的实际边距取他们之间的最大值。？如果有负值则就把两个margin值相加
  

  只有标准流中块状元素才会发生垂直外边距合并的问题，行内块元素，浮动元素，绝对定位元素之间的外边距不会发生合并

  解决方法：1给{第二个}盒子浮动,2给第二个盒子绝对定位3给任意一个盒子加display:inline-block;

  （但是这种兄弟之间相邻的垂直外边距合并的现象是有利于开发的（防止元素之间间距太大），可以不解决）

  • 父子元素

    对两个嵌套关系的块级元素，第一个字元素的margin回传给父元素

    即第一个子元素的margin会顶开父元素与父元素相邻元素的间距，或者父元素和子元素都有margin值，margin会重叠为一个margin值，谁大显示谁

    html：
    <div class="top">div>
    <div class="middle">
      <div class="firstChild">我其实只是想和我的父元素隔开点距离。div>
      <div class="secondChild">div>
    div>
    css：
    .top{width:160px; height:50px; background:#ccf;}
    .middle{width:160px; background:#cfc;}
    .middle .firstChild{margin-top:20px;}
    

    （这种父子元素的相邻的垂直外边距重叠问题会影响页面布局，必须解决）

    解决方法：1:给父元素设置上边框 即border-top 但是注意这种方式会影响父元素的尺寸

    ​ 2:给父元素设置上内边距 padding-top 但是注意这种方式会影响父元素的尺寸

    ​ 3:给父元素设置overflow：hidden；

    还有其他的解决方法，浮动，固定，绝对定位的元素不会有塌陷问题（后讲）

• 行内元素不支持直接设置宽高属性
• 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局（行内元素会变大但是在垂直方向不会挤开其他元素）
• 行内元素可以设置border，垂直方向border不会影响页面的布局
• 行内元素可以设置margin，垂直方向margin不会影响页面布局

通常情况下，浏览器会为元素设置默认样式，但是不同的浏览器设置的默认样式会有些不同

默认样式会影响我们的页面布局，所以在编写网页之前要清楚一下或者统一一下默认样式（特别是pc端）

页面中很多元素都有默认的内外边距，页面样式初始化，清除内外边距

*{ 
        
	margin:0;
	padding:0;
}
ul{ 
        
	list-style:none;
}

推荐用于清除修改默认样式的css文件：normalize.css

css3新增属性：border-radius box-shadow text-shadow

默认情况下盒子可见区域的大小内容，内边距和边框共同决定

• box-sizing用来设置盒子尺寸的计算方式，用来设置width和height的作用，

  取值：content-box 默认值，width和height用来表示内容区

  ​ border-box width和height表示盒子可见框的尺寸，即包含内容，内边距和边框，定了可见框的总尺寸后再设置border和内边距会调整（减小）内容区的尺寸，我们不用再单独计算content的尺寸了

作用：设置元素的轮廓线,用法和border一样 outline:1px solid red;

不同的是，border会影响盒子可见框的尺寸，outline不会影响盒子可见框的尺寸，对页面布局没有影响

• 作用：设置元素边框为圆角 radius（半径）

• 原理：圆形和元素边框的交集形成的圆角效果（原理展示）

  取值： 精确数值加单位 20px ｜百分比

• 单独设置一个角的 ：

  border-top-left-radius ：水平方向圆角的半径 垂直方向圆角的半径；

  border-top-left-radius ：50px 60px； 两个值不一样是椭圆，两个值一样是正圆可以简写只写一个值

  border-top-right-radius

  border- bottom-right-radius

  border-bottom-left-radius

• border-radius是一个简写属性可以分别设置4个值

  border-radius：左上角 右上角 右下角 左下角；

  border-radius：左上角 右上角和左下角 右下角；

  border-radius：左上角和右下角 右上角和左下角； 对角

  border-radius：四个角一样；

  border-radius:10px 20px 30px 40px;
  border-radius:10px;
  

  以上是设置了正圆相切

  还可以设置椭圆形的圆角

  border-radius:10px 20px 30px 40px/20px 30px 40px 50px；

  /前的四个值是圆角的水平半径，/后的值是圆角的垂直半径

常见的使用：

​ 将元素设置为正圆：元素的宽高值一样（正方系），border-radius设置为宽高值的一半 或50%

​ 圆角矩形：border-radius设置为矩形短边的一半

box-shadow：阴影的水平偏移量 垂直偏移量 模糊距离 阴影尺寸 阴影颜色 将外部阴影改为内部阴影；

• 默认情况下阴影在元素的正下方和元素大小一样，所以看不到

• 水平和垂直方向的阴影便宜量这两个值是必须的

• 默认的阴影是outset（外阴影）但是不能写这个值，否则阴影无效。设置为外阴影时直接省略即可

  Inset是设置阴影为内阴影

.shadow-show{ 
        
  width:400px;
  height:200px;
  background:red;
  box-shadow: 20px 20px 10px 10px;
}

"shadow-show">

案例演示：在浏览器控制台调试看效果

**注意：**盒子的阴影不占据位置，不会对其他元素产生影响，不会影响页面布局

作用：为文本设置颜色

text-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色；

其中水平阴影和垂直阴影位置是必须的，不可以省略

网页是一个多层结构，一层摞着一层，css可以分别为每一层设置样式，用户只能看见最上面一层的，这些层中，最底下的一层被称为文档流，文档流是网页的基础。我们所创建的元素默认是在文档流中排列的。

对于我们元素而言有两个状态在文档流中和不在文档流中（即 脱离文档流）

元素在文档流中的特点：块状元素和行内元素的特点

块级元素在标准流中：独占一行 ，宽度默认是父元素的100%，可以直接设置宽高，从在垂直方向上上向下依次排列

行内元素在标准流中的特点:可以和其他元素在一行显示，从左向右依次排列，一行放不下另起一行