css基础

css选择器

css基础选择器

1. 标签选择器
标签名{
属性1：属性值；
属性2：属性值；
}
2. 类选择器
.类名{
属性1：属性值；
属性2：属性值；
}
配合class=”类名”使用
多类名 class=”类名1 类名2”中间用空格隔开
3. id选择器
#id名{
属性1：属性值；
属性2：属性值；
}
id是唯一的 不可以重复使用，一般用于页面唯一性的元素上
4. 通配符选择器
使用*定义，选取页面中所有元素
*{
margin：0；
padding：0；
}

复合选择器(关系选择器)

1. 后代选择器
用于选择某个父元素里面的子元素，用单个空格（” “）字符——组合两个选择器
父标签 他的子标签{ 属性名：属性值；}
如

<ol>
<li>西瓜真甜</li>
<li>今晚月亮真美</li>
</ol>
要选择ol里面的 li：
ol li { 属性名：属性值；}

2. 子元素选择器
选择某元素最近的一级子元素（亲儿子）
元素1>元素2{ 属性1：属性值；}
选择元素1里面的所有直接后代元素2
如想选中为

的直接子元素的带有“a”类的列表项

ul > li[class="a"] {
}

3. 并集选择器
选择多组标签，同时为他们定义相同的样式
元素1，
元素2，
元素3 { 属性名：属性值；}
4. 邻接兄弟选择器
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件
例如，选中所有紧随<p>元素之后的<img>元素：

p + img

5.通用兄弟选择器
通用兄弟关系选择器（~）
想选中一个元素的兄弟元素，即使它们不直接相邻，如要选中所有的<p>元素后任何地方的<img>元素

p ~ img

属性选择器

1. 存在与值选择器
基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素
使用li[class]，我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。
li[class=”a”]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
无值存在选择器 [attr]只要元素包含指定的属性，不论其值为何，都会被选中

/* 选择所有具有 title 属性的元素 */
[title] {
  color: red;
}

2. 包含词选择器
   选择属性值是一个以空格分隔的词列表，并且其中包含指定值的元素，如果类名包含“a”，即使它还有其他类名，此规则也会应用
   li[class~=”a”]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

   li[class] {
     font-size: 200%;
   }
   
   li[class="a"] {
     background-color: yellow;
   }
   
   li[class~="a"] {
     color: red;
   }

3. 子字符串匹配选择器
li[class^=”a”]匹配了任何值开头为a的属性，于是匹配了前两项。
li[class$=”a”]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。
li[class*=”a”]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。
[attribute~=”value”]匹配了任何值的属性值中包含指定单词的元素（单词以空格分隔）
4. 大小写敏感
HTML 中是大小写敏感的,想在大小写不敏感的情况下匹配属性值的话，可以在闭合括号之前使用i值,这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符

//第一个选择器将会匹配一个开头为a的值
li[class^="a"] {
  background-color: yellow;
}
//这个 选择器将会匹配开头为a或A的值
li[class^="a" i] {
  color: red;
}

伪类和伪元素选择器

伪类和伪元素像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护

伪类

伪类选择器用于选择处于特定状态的元素,以冒号（:）开头，后面跟一个关键字，表示某种状态或条件。

一些伪类：
a:link{} 选择没有被访问的链接
a:visited{} 选择已经被访问的链接
a:hover{} 选择鼠标指针放到上面的链接
a:active{} 选择活动链接（鼠标按下未弹起的链接）
input:focus{}选取获得焦点的表单元素
:first-child 和 :last-child：选择父元素的第一个或最后一个子元素
:nth-child() 和 :nth-of-type()：选择父元素的第n个子元素,实现隔行变色表格或轮播图中的图片切换
:not()：选择不符合特定条件的元素。
checked 和 :indeterminate：选择被选中或未确定状态的表单元素。
:before 和 :after：虽然它们看起来像伪元素选择器，但它们也可以作为伪类选择器使用，用于在元素内容前后插入内容

p:before {
    content: "Before: ";
}
p:after {
    content: " After";
}

::first-line是会选择一个元素（下面的情况中是<p>）中的第一行

p::first-line {
}

• 用户行为伪类
  :hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
  :focus——只会在用户使用键盘控制，选定元素的时候激活。

  <p><a href="">悬停在我上方</a></p>

a:hover {
  color: hotpink;
}

伪元素

伪元素表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类
伪元素开头为双冒号 ::比如，::before 就是一个伪元素的示例

例如，如果你想选中一段的第一行，你可以把它用一个元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。
::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

常见伪元素

1. ::before和::after
   ::before 和 ::after 伪元素与 content 属性的共同使用
   在 CSS 中叫做生成内容,用这些插入一个文本字符串,需要结合 content 属性一起使用

   <p class="box">我是原本有的内容</p>

   .box::before {
     content: "这应该显示在box内容之前。";
   }
   .box::after {
     content: " ➥";
   }

2. ::first-letter
   选择块级元素的第一字母并对其应用样式

   选择块级元素的第一字母并对其应用样式

3. ::first-line
   选择块级元素的第一行文本并对其应用样式
4. ::selection
   改变用户选中文本时的背景色和文字颜色。

伪类和伪元素组合起来

如果想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

css的引入和css三大特性

css引入

<style>在这里面写css代码</style>
导入.css文件
<link rel="stylesheet" href="styles.css" />

css三大特性（层叠、优先级与继承）

层叠性：相同选择器设置相同的样式冲突时，哪个离html近（写在后面）用哪个
继承性：子标签会继承父标签的某些样式，如文本颜色和字号行高
优先级：当同一个元素指定多个选择器，会有优先级产生
!important>行内样式>id>类>元素选择器>继承和*

层叠

简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则

h1 {
  color: red;
}
h1 {
  color: blue;
}
比如这两个，最后会用Blue

优先级

1. 理解:
   有些规则在最后出现，但是却应用了前面的具有冲突的规则。这是因为前面的有更高的优先级——它范围更小，因此浏览器就把它选择为元素的样式
2. 优先级规则：
• !important
  覆盖所有上面所有优先级计算，强烈建议除了非常情况不要使用它
  覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级而且顺序靠后，或者更高优先级。
• 内联样式
  内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其他任何优先级的权重都要高
• 一个选择器的优先级可以说是由三个不同的值（分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：
  最终数字大的优先
  ID：选择器中包含 ID 选择器则百位得一分 1-0-0
  类：选择器中包含类选择器、属性选择器或者伪类则十位得一分 0-1-0
  元素：选择器中包含元素、伪元素选择器则个位得一分 0-0-1

通用选择器（*）、组合符（+、>、~、’ ‘）和调整优先级的选择器（:where()）不会影响优先级
否定（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：
一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点

继承

一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能
例如：如果你设置一个元素的 color 和 font-family，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性
一些属性是不能继承的——举个例子如果你在一个元素上设置 width 为 50% ，所有的后代不会是父元素的宽度的 50%。同理还有margin、padding 和 border

控制继承

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值，
1. inherit
设置该属性会使子元素属性和父元素相同，“开启继承”，即使该属性通常不是继承的
它对于想要确保样式一致性或特定情况下需要显式地继承父级样式时非常有用

如，你希望一个按钮的颜色与父容器的颜色一致：
.parent {
  color: blue;
}
.button {
  color: inherit; /* 按钮颜色继承自父容器 */
}

2. initial
将应用于选定元素的属性值设置为该属性的初始值
当想完全重置某个属性到默认状态时的一个强有力工具

如，将某个元素的 margin 重置为默认值
.element {
  margin: initial; /* margin 重置为默认值 0 */
}

3. revert
   将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset
   4. unset
   将属性重置为自然值
   如果一个属性是可继承的，那么它将被设置为 inherit；如果是不可继承的，则会被设置为 initial。这对于快速清除或复位属性来说非常方便。

   如，希望某个元素的 font-size 继承自父元素，而 margin 使用默认值
   .element {
     font-size: unset; /* 继承父元素的 font-size */
     margin: unset; /* 使用 margin 的默认值 */
   }

   5.revert-layer
   将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
   6. 重设所有属性值all
   CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是上述（inherit、initial、unset 或 revert）任意一个
   这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点
   如：下面的示例中有两个块级引用元素。第一个用元素本身的样式，第二个设置 all 为 unset

   <blockquote>
     <p>当前块引用设置了样式</p>
   </blockquote>
   
   <blockquote class="fix-this">
     <p>当前块引用未设置样式</p>
   </blockquote>

blockquote {
  background-color: orange;
  border: 2px solid blue;
}

.fix-this {
  all: unset;
}

css背景，字体文本属性

css字体属性

• 字体系列 font-family 值：字体类型
  font-family:Arial,”Microsoft Tahei”,”微软雅黑”;
  如果英文单词之间有空格，要加引号；汉字要加引号；之间分割要逗号
• 字体大小 font-size 值：16px
• 字体粗细 font-weight 值：normal boid bolder lighter 100~900**
  normal=400 默认值 bold=700 加粗 数字后面不跟单位
• 字体样式 font-style 值：normal默认值 italic斜体（很少给文字加斜体）
• 字体符合属性写法font: font-style font-weight font-size font-style family

css文本属性

• 文本颜色 color 值：颜色单词或16进制或RGB rgb(0,0,0)
• 文本对齐 text-align 值：left左对齐（默认）；righr右对齐；center居中
• 文本装饰 text-decoration
  值：none默认没有；underline下划线；overline上划线；line-throuth删除线
• 文本缩进 text-indent 值：20px；2em；文本的第一行首行缩进多少距离
• 行间距 line-height 行间距=文本高度+上间距+下间距
• 单行文字垂直居中：让文字的行高等于合资的高度
  行高小于盒子高度文字偏上，反之文字偏下

css背景

• 背景颜色 background-color 值transprent透明；color指定颜色
• 背景颜色半透明rgba(0,0,0,0.3) 最后a的值靠近0变淡，靠近1变不透
• 背景图片 background-image 值none没有图；url地址
  通常放在一个盒子里面，放logo图片或者大的背景图
• 背景平铺 background-repeat 值repeat平铺；no-repeat不平铺；repeat-x平铺x轴；repeat-y平铺y轴
• 背景图位置 background-position:x y
  值length写百分数或长度值；
  值position写top.center,botton,left,right方位名词
  如果方位词或数值只写了一个，那么第二个默认居中对齐；方位词和数值可以混用
• 背景图像固定 background-attachment 值scroll背景随内容滚动；fixed背景固定
• 背景符合写法：没有特定，一般习惯
• background：背景颜色 背景图地址 背景平铺 背景是否固定 背景图位置

css元素显示模式

块元素

常见：h1~h6,p,div,ul,ol,li
特点：独占一行；宽高边距都能控制，是一个容器（盒子），里面可以放行内或块级元素
应用：块元素水平居中：设置宽度同时盒子左右外边距设为auto

行内元素

默认使用 inline 作为外部显示类型
常见：a,strong,b,em,i,del,s,ins,u,span
特点：
一行可以有多个行内元素；
width 和 height 属性将不起作用宽高无法修改由自身撑开，只能容纳文本或其他行内元素；
盒子不会产生换行；
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开；
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开；
应用：行内元素水平居中：给父元素添加text-align:center

行内块元素

img,input,td
特点：一行可以显示多个，之间有空白缝隙；宽度无法修改由自身撑开，高度和边距可以修改
应用：行内块元素水平居中：给父元素添加text-align:center

元素显示模式转换

把元素转换为块级元素 display:block
把元素转化为行内元素 display:inline
把元素转换为行内块元素 display:inline-block

css盒子模型

一个盒子从外到内：外边距，边框，内边距，内容

内容

在盒子上设置了 inline-size 和 block-size（或 width 和 height）属性值，这些值就定义了内容盒子的 inline-size 和 block-size

CSS替代盒模型

在css中添加 box-sizing: border-box;

1. 理解代替盒模型
   代替盒模型指在标准的W3C CSS盒模型之外，使用box-sizing属性来改变元素尺寸计算的方式。
   标准的CSS盒模型中，一个元素的总宽度和高度由内容区、内边距（padding）、边框（border）以及外边距（margin）共同构成。而通过box-sizing属性，可以改变这一默认行为，使得width和height属性包括了内容区域、内边距和边框的总和

2. 开发中的应用
   实际开发中，为了统一布局风格并简化尺寸计算，开发者通常会将所有元素的盒模型统一设置为 border-box。这样可以避免因盒模型差异导致的布局问题

   //官方文档提供的代码
   html {
     box-sizing: border-box;
   }
   *, *::before, *::after {
     box-sizing: inherit;
   }

   或者

   *, *::before, *::after {
     box-sizing: border-box;
   }

   这样做的好处：
   简化布局计算：在 border-box 模式下，你不再需要担心内边距和边框会增加元素的总宽度或高度。例如，你可以直接设置一个宽度为 100% 的容器，而不用担心它因为内边距或边框超出父容器的宽度。
   提高一致性：通过全局设置，所有元素的盒模型行为一致，减少了因盒模型差异导致的布局问题。
   减少调试时间：统一的盒模型可以减少因尺寸计算错误导致的调试时间，特别是在复杂的布局或响应式设计中。

3. box-sizing有三个值：
   content-box: 这是默认的盒模型，指定了元素的宽度和高度只适用于元素的内容区域。任何内边距和边框都将在内容区域之外添加。
   border-box: 使用这个值时，元素的宽度和高度包括了内容、内边距和边框。这意味着如果你给定一个宽度为200px的元素，并且设置了内边距或边框，那么这些内边距和边框将从这200px中扣除，而不是额外增加到元素的总尺寸上。
   inherit: 该值表示子元素将继承父元素的box-sizing属性。

行内盒子display: inline-block

如果不希望项目换行，但又希望它使用 width 和 height 值并避免出现上述重叠现象，使用它
效果：设置 width 和height 属性会生效；
padding、margin 和 border 会推开其他元素；
不会换行，只有在明确添加 width 和 height 属性后，才会变得比其内容大

边框border

• border-width边框粗细 值px
• border-style边框样式 值：
  • none无边框；solid实线边框；double双边框
  • 如果一个参数那么作用四个边；
  • 两个参数一个作用上下一个左右；
  • 三个参数第一个作用上，第二个左右，第三个下
• border-color边框颜色
• 表格的细线边框：
  • border-collapse用于合并相邻的边框 值collapse
• border-radius:length圆角边框
• 值px 或% ；
• 一个值四个角，四个值分别左上、右上、右下、左下
• 设置圆形：如果是矩形，设置为高度或宽度的一般或直接写50%
• 注意：边框会影响盒子的实际大小
  欲设置单条边的宽度、样式或颜色，可以如：
  border-top-width
  border-top-style
  border-top-color

创建三角形：

通过设置元素的width、height为0，并利用border属性来创建。

内边距padding 边框和内容之间的距离

• padding
• -left左内边距 -right右内边距 -top上内边距 -bottom下内边距
  值：px 一个值作用四个方向；两个值一个作用上下一个作用左右；三个参数第一个作用域上，第二个左右，第三个下
  注意：内边框会影响盒子的实际大小，解决办法：让盒子的宽高减去内边距
  如果盒子没有指定宽高，那么padding不会撑开盒子

外边距margin 上下左右同内边距

典型应用：让块级盒子水平居中

• 盒子必须指定了宽度width；盒子的左右外边距都设置为auto 如margin:0 auto
• 外边距合并-嵌套合并外边距塌陷：两个父子关系的块元素同一方向都有margin，会合并导致塌陷
  -解决：为父元素设置上边框；或为父元素设置内边距；或为父元素添加overflow:hidden

盒子阴影和文字阴影

• box-shadow盒子阴影
  值：h-shadow水平阴影的位置（必有）；v-shadow垂直阴影的位置（必有）；blur模糊距离，spread阴影尺寸，color阴影颜色
• text-shadow文字阴影
  值：h-shadow水平阴影的位置（必有）；v-shadow垂直阴影的位置（必有）；blur模糊距离，spread阴影尺寸，color阴影颜色

css布局（排版）

display属性

display属性属性允许我们更改默认的显示方式
在css显示模式中已经详细记录过display:block和display:inline
还有两个经常用在布局中的 display: flex 和 display: grid

flex弹性盒子布局(详细看flex文章)

必须有父盒子，给父元素设置 display :flex 弹性容器为块级元素（或 inline-flex弹性容器为行内元素）
子元素会自动按照一定规则挤压或拉伸

• 弹性盒子由弹性容器(父亲)和弹性盒子(子元素)，主轴和侧轴组成
• 主轴默认在水平方向，侧轴默认在垂直方向
• 弹性容器内包含了一个或多个弹性子元素。
• 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
• 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
• 默认情况主轴内容撑开，侧轴拉伸填充

  CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

父元素常见属性

1. 属性名justify-content: 设置主轴上的子元素排列方式
   属性值：
   • flex-start 默认值
   • • 从起点开始依次排列，如果主轴是x轴，则从左到右放子元素
   • center
   • • 让子盒子在主轴居中对齐，如果主轴是x轴则水平居中
   • space-between
   • • 先两边贴边再平分剩余空间
   • space-evenly
   • • 左右两边和中间的空隙都相等
   • space-around
   • • 每个子元素的两侧空隙相等，注意是每个的两侧，所以俩个子盒子中间的空隙是最左和最有空隙的两倍
   • flex-end
   • • 从尾部开始排列
       记忆：两侧没缝隙between ；缝隙一样大evenly；两倍缝隙around
2. align-content:设置侧轴上的子元素的排列方式(多行)
   • flex-start 默认值在侧轴的头部开始排列
   • flex-end：在侧轴的尾部开始排列
   • center：在侧轴中间显示
   • space-around：子项在侧轴平分剩余空间
   • space-between：子项在侧轴先分布在两头,再平分剩余空间
   • stretch：设置子项元素高度平分父元素高度，沿侧轴线拉伸至填满容器（父元素没有设置高度时默认拉伸）
3. flex-direction :设置主轴的方向
   • row默认值从左到右
   • row-reverse 从右到左
   • column从上到下，把主轴改成垂直方向，常用
   • column-reverse 从下到上
4. flex-wrap:设置子元素是否换行
   • flex 在浏览器宽度缩小后里面的最后一个盒子不会被挤下去到下面一行，而是他们都会自动缩小
   • flex-wrap 默认子元素不换行，默认都是排在一条轴线上，相当于隐含了这个代码 flex-wrap:nowrap；
   • 如果想要最后的元素换行，那么flex-wrap:wrap；
5. align-items :设置侧轴上的子元素排列方式(单行)
   该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用
6. flex-flow : 复合属性，相当于同时设置了flex-direction和flex-wrap

子元素常见属性

1. flex属性
• 定义子项目分配剩余空间！，用flex来表示占多少份数！
• flex:数字;默认是0.，表示占用父级默认尺寸的份数
2. align-self 控制子项自己在侧轴上的对齐方式
   • 这个属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
   • 默认值为auto，表示继承父元素的align-items属性，如果没有父元素就等同于stretch
3. order属性定义项目的排列顺序
   • 数值越小，排列月考i按，默认0
   • 注意，和z-index不一样

gird布局（详细看gird文章）

flex布局用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整
把display: gird 添加到父元素，子元素会自动按照一定规则排列
父元素属性

.container {
  display: grid;
  grid-template-columns: 1fr 200px; /* 列定义 */
  grid-template-rows: 100px auto;   /* 行定义 */
  gap: 10px;                        /* 间距 */
}

子元素属性

.item {
  grid-column: 1 / 3;               /* 跨越两列 */
  grid-row: 1;                      /* 定位到第一行 */
}

css浮动 float

float值：left或;right;none默认值，不浮动;inherit继承父元素的浮动属性

• 浮动特性：
  浮动元素会脱离标准流；
  会一行内显示并且元素顶部对齐；
  福哦的那个元素有行内块元素的特性：宽度无法修改由自身撑开，高度和边距可以修改
  要之间有空隙用margin
• 注意：
  浮动的元素会互相贴靠在一起没有缝隙，如果宽度装不下，多余的盒子会跑到下一行
• 浮动元素常搭配标准流父级使用
  先用标准流的父元素排列上下位置，之后内部的子元素采取浮动排列左右位置

清除浮动

浮动的盒子只会影响浮动盒子后面的标准流，前面的不影响
清除浮动：不让对后面元素的排版产生影。

• clear 值left左侧;right右侧;both左右两侧不允许有浮动
  如果父级盒子本身有高度，那么不需要清除浮动；
  父级盒子没有高度，清除浮动后父级会根据浮动的盒子自动检测高度
• 额外标签法:在浮动元素末尾添加一个空的块级标签，如
  div style=”clear:both” /div
  br style=”clear:both” /
• 清除浮动–父级添加overflow
  值：hidden（常用）auto ;scroll
  缺点：无法显示溢出的部分
• 清除浮动–:after伪元素法（额外标签法的升级优化）
  给父元素添加 .clearfix:after{
  content:””; 这个是伪元素必写的属性
  display:block; 插入的伪元素默认是行内元素，要转化为块级元素
  height:0; 不要看见这个元素
  clear:both;
  visibility:hidden; 不要看见这个元素
  }
• 清除浮动–双伪元素法（额外标签法的升级优化）
  .clearfix:before,.clearfix:after{
  content:””; 这个是伪元素必写的属性
  display:table; 转化为块级元素并且一行显示
  }
  .clearfix:after{
  clear:both;
  }

常见应用：实现文字环绕box(浮动元素)效果

巧妙利用浮动元素不会压住文字的特性
在一个盒子里面放一个图片，给图片添加左浮动，盒子里的文字自动跑到右边围绕图片

.box {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}

定位

让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，可以压住其他盒子
将盒子定在某个位置，摆盒子
定位=定位模式+边偏移
定位用来管理和微调页面中的一个特殊项的位置，依赖于position属性

定位类型

position: static：默认定位，不脱离文档流。
position: relative：相对自身定位，不脱离文档流。
position: absolute：相对于最近的定位祖先元素定位，脱离文档流。
position: fixed：相对于视口定位，脱离文档流。
position: sticky：滚动时固定在指定位置（如导航栏）

• 静态定位 position: static;
  是每个元素默认的属性
• 相对定位 position: relative;
  允许我们相对于元素在正常的文档流中的位置移动它(从它的默认位置按坐标进行相对移动)
• 绝对定位 position: absolute;
  类似将它单独放在一个图层中
  相对于它最近的一级有定位的祖先的元素来说，没有父级或父级没有定位的情况，没有自选那么以浏览器为准定位
  绝对定位会脱标，不再占有原来的位置
• 固定定位 position: fixed;
  固定在浏览器可视区，相当于粘在了屏幕上不随页面滚动而滚动
  以窗口为参照点，和父元素没有任何关系（元素一直在浏览器的某个位置上滚不走）
• 粘性定位 position: sticky;
  它会先让元素先保持和 position: static 一样的定位，当它的相对视口位置达到某一个预设值时，它就会像 position: fixed 一样定位
  （滚动到元素要离开页面的时候元素会卡在页面上不会消失）
  占有原先的位置
  必须添加上下左右其中一个才有效

注意：子绝父相：子元素是绝对定位的话，父级要用相对定位
原因：子级决定定位不会占有位置，父盒子需要添加定位显示子盒子在父盒子内显示
边偏移
定义元素相对于其参考元素某边线的距离
四个属性top.botton,left,right
每个属性的值是npx

• 定位叠放次序 z-index
  选择器{z-index:n;} 数值可以说正整数，0，负整数，默认auto，数值越大盒子越靠上
• 让绝对定位的盒子居中
  绝对定位的盒子不能通过margin:0 auto水平居中，用下面的计算方法可以实现水平和垂直居中
  left:50%；让盒子的左侧移动到父元素的水平中心位置
  margin-left:-100px；让盒子向左移动自身宽度的一半
• 行内元素添加绝对定位或者固定定位可以直接设置宽度和高度
• 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容大小
• 浮动和绝对定位（固定定位）元素都不会出发外边距合并塌陷的问题
• 浮动的元素不会压住标准流的文字，定位会

margin负值妙用

• 清除浮动盒子之间边框贴在一起双边框的问题
  margin-left=-1px; 1为border的宽度
• 鼠标经过某个盒子时，提高当前盒子的层级，让这个盒子的边框完整展示出来
  ul li:hover{
  如果li都有定位，那么利用z-index提高层级
  z-index:1;;
  border:1px solid blue;
  }
  ul li:hover{
  如果盒子没有定位，则鼠标经过添加相对定位即可
  position:rekative;
  border:1px solid blue;
  }

图形样式相关

常见图片格式

• .jpg格式：对色彩信息保留较好，高清，颜色较多，铲平类的图片经常用jpg格式
• .gif可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
• .png格式能够保持图片透明背景
• psd格式：PS专用，可以直接从上面复制文字，测量大小和距离

修改图片尺寸

图片放到一个盒子里，改盒子，图片100%
.pic{width=300px;height=200px;}
.pic img{width：100%；}
div class=”pic”
img src=”img.png”
/div

精灵图 sprties

目的：减少服务器接收和发送请求的次数，提高页面加载速度
核心：主要针对背景图片使用，把多个小背景图片整合到一张大图片中，这个大突破叫精灵图
移动背景图片位置此时用background-position 移动的距离就是目标图片的x和y坐标，注意一般都是负值

字体图标 iconfont

优点：轻量，灵活，兼容性高
推荐下载网站 http://icomoon.io http://www.iconfint.cn

css三角制作

div{
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:red;
}

鼠标样式cousor

cursor: 值default 小白鼠标（默认）；pointer 小手；move 移动 text 文本 not-allowed 禁止

其他

元素的显示与隐藏与溢出

• display 属性用于设置元素如何显示
  display:none 隐藏对象（不再占有原来的位置）
  display:bolck 转换为块级元素并显示元素
• visibility
  visiblity:hidden 元素隐藏（继续占有原来的位置）
  visiblity:visible 元素可视
• overflaw 溢出 如果内容溢出一个元素的框时会发生什么
  值：visible 不见且内容也不添加滚动条
  hidden 溢出的部分隐藏
  scroll 总是显示滚动条
  auto 超出显示滚动条，不超出不显示滚动条
• 溢出的文字省略号显示
• • 单行文本溢出显示省略号
    先强制一行内显示文本 white-space:nowrap;
    超出的部分隐藏overflow:hidden;
    文字用省略号替代超出的部分 text-overflow:ellipsis;
• • 多行文本溢出显示省略号
    overflow:hidden;
    text-overflow:ellipsis;
    弹性伸缩盒子模型显示 display:-wekit-box;
    限制在一个块元素显示的文本的行数 -webkit-line-clamp:2;
    设置或检索伸缩盒对象的子元素的排列方式-verkit-box-orient:vertical;

小技巧

• 用户表单
• 取消表单轮廓
  轮廓线outline online:0或online:none 去掉默认的蓝色边框
• 防止拖拽文本域
  textarea{reseze:none}
• 设置图片或表单（行内块元素）或文字垂直对齐
  vertical-align: 值baseline默认，元素放在父元素的基线上;top元素顶端与行中最高元素的顶端对齐;middle放在父元素的中部;bottom元素底端与行中最高元素的底端对齐
• 图片底部白边怎么取消
  img{ vertical-align:bottom; }
  或把图片转换为块级元素

css属性书写顺序

建议遵循一下顺序：
1.布局定位顺序：display/position/float/clear/visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/tect-decoration/text-align/vertical-align/white-space/break-word
4其他属性：content/cursor/border-radius/box-shadow