小知识：个浏览器内核

css的注释

<!---->

引入css

行间样式

<div style="
      width:100px
      height:100px
      background-color:red;"
</div>

页面样式

<style type="text/css">
</style>

外部样式:在同一项目里建立一个css文件目录

<link rel="stylesheet" type="text/css" href="">

/【./】：表示在同一个路径里
../：表示在上一个路径里

选择器

--id选择器：id="box"--【选择方式：#box{...}】
--类选择器：class="box"--【选择方式：.box{...}】
--标签选择器【选择方式:例如P{...}也可以是span·h1...h6·img{不能写行内}】
--通配符选择器【选择方式：{...}】 ：表示对任何标签（全局）都有作用。
--属性选择器：
选择器的优先级
！important(加在属性后例如：background-color：：!important)>id选择器>类选择器>标签选择器>通配符选择器
=【在html行内样式中谁离的进谁起作用（就近原则）】

css权重

【Infinity:正无穷(计算机里面是可以计算的)】 【256进制】

复杂选择器

父子选择器

例如：
<div>                     
  <span></span>
</div>

div span{
background-color:red;
}
【空格使用父子选择器：只要是后代都可以选中】

接子元素选择器

div > span{...}
【>使用直接子元素选择器】

并列选择器
【用多个并列条件选择一个选择器】

分组选择器

【分开的组共用一个代码块】

css属性

设置字体大小 font-size:;【（默认字体大小16px）互联网页面字体大小一般都是12px/14px】
字体加粗 font-weight:bold;
字体斜体 font-style:italic;
字体类型 font-family:"微软雅黑"/arial; 字体颜色 colo:red;【1.纯英文单词2.颜色代码3.颜色函数】
【特殊颜色transparent:透明色】
缩写：font:1px bold italic "微软雅黑" red
border【div盒子的边框】

【height：300px；
 line-height：300px；（单行文本高度等于容器高度文本上下居中）】
border-left:...;盒子边框左边【：top right botton】
text-align：center；文本左右居中对齐方式【left right】
text-indent:2em;首行缩进【1em=1*16px】
text-decoration:line-through;删除线【none；删除下划线underline；下划线overline；上划线】
cursor：pointer；鼠标移入 显示手型【help问号】

css注释

/##/【css只有一种注释方式】

伪类选择器

超链接伪类

伪类名称	含义	示例
a:link	未点击访问时超链接样式	a:link{color:#gef5fg;}
a:visited	单击访问后超链接样式	a:visited{color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#4444;}
a:active	鼠标点击未释放的超链接样式	a:active{color:#000;}

总结元素类型

盒子模型

盒子模型的三大部分
盒子模型的组成部分：
宽：width	高：height
边框：border
外边距：margin
内边距：padding
盒子内容：content
盒子模型构成原理：margin + border + padding + (content = width + height)

boder-width/height: ;【对盒子的边框宽高进行操作】
padding-width/height: ;【对盒子的内边距宽高进行操作】

边距取值方向

边距类型	取值方向
用边框操作举例：
border-top: 10px 20px 30px 40px ;	上 · 右 · 下 · 左
border-top: 10px 20px 30px ;	上 · 左右 · 下
border-top: 10px 20px ;	上下 · 左右
border-top: 10px ;	上下左右

定位

先：去除默认样式【很多浏览器的默认margin值为8px】
*{
  margin：0；
  padding：0；
}

定位position语法:

                                <!--abaolute-->
<--脱离原来位置进行定位-->
div{
  position:abaolute;
  left:100px（/right）
  top:100px（/bottom）
  }
【让这个div距离页面上边100px。左边100px】
                                <--relative-->
【保留原来位置进行定位】
div{
  position:relative;
  left:100px（/right）
  top:100px（/bottom）
  }
 【让这个div距离页面上边100px。左边100px】
                                 <--fixed-->
 [固定定位,一般用于制作广告]
 div{
  position:fixed;
  left:100px（/right）
  top:100px（/bottom）
  }

层模型：当一个元素成为了绝对定位元素的时候他就脱离一个层（脱离文档流）在原来的那块正空，在两个div且另一个div没有给定位的情况下没有定位的div占据设置定位的div位置

div居中
margin-top/bottom:50%;
margin-right/left:50%; [margin=距离浏览器边框]
(根据,距离上外边距50%,距离右边距50%.由此实现居中)
z-index:1;(层度.正常元素默认层度为0,但设置为1可以覆盖在正常元素上面)
border-radius:;(边框圆角)
边框塌陷
两个嵌套的div里垂直的margin-top值取最大值(当父元素变为定位元素时,父子外边距不会进行合并)

bfc                  
(block firmat context)块级格式化上下文                       
作用:可以通过一些特定手段让其中的几个盒子或者一个盒子渲染规则发生改变.
如何触发bfc
position:absolite;[]
display:inline-block;[转为行块级元素](display:block;转为块级元素)
float:left/right;[左/右浮动](clear:bith;清除左右两侧浮动)
overflow:hidden;[溢出部分被隐藏]
(  overflow:visible;[默认值子元素会从父元素中溢出,在父元素外部位置显示]
overflow:scroll;[生成滚动条查看完整内容  )

两个垂直上下排列的块元素之间的外边距取最大值,两个左右排列的块元素之间值叠加

浮动

<--float-->
float:left/right;

语法: 输出结果:

浮动使元素产生的问题

浮动元素产生了浮动流=所有产生了浮动的元素,块级元素看不到他们.
产生了bfc的元素和文本属性的元素以及文本都能看到浮动元素

解决浮动流方法=clear:bith;[清除左右两边浮动]
解决流程图（参考）：

伪元素

（被css正常操作，但没有写在html里面。可以当元素操作但是没有元素结构因此叫做伪元素）
标签选择器例如span::befor{把标签里面的最前面的元素选出来}
span::after{把标签里面的最后面的元素选出来}
伪元素是个行级元素：需要用display:inline-block;转为块级元素

::befor/after{
      content:"";
}伪元素必须有的一个属性：content

文字溢出处理

1.单行文本

white-space:nowrp;【设置文字溢出不折行】
overflow:hidden;【文字溢出隐藏】
text-overflow:ellipsis;【文字溢出用···表示】

2.多行文本

overflow:hidden;【文字溢出隐藏】
多行只做截断，不做打点

背景图片处理

background-size:100px 100px;【图片大小】
background-repeat:no-repeat;【图片不重复】
background-position:50% 50%;【图片居中】

图片代替文字

第一种方法： text-indent：；【首行文本缩进】
将文字首行文本缩进到比原本设定的宽大【text-indent：200px；】
设置文本溢出不换行【white-space：nowrap；】
设置文本溢出隐藏【overflow：hidden；】
第二种方法：

因为padding里面不能有内容，但可以有背景颜色或背景图片，所以将height高度改为0将padding-top设置高度用内边距将里面的内容撑到盒子下面并且将内容隐藏.

注意！

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
特殊因素：
p标签虽然独占一行但它不能嵌套块级元素
a标签里不能嵌套a标签

补充

自适应

给父元素设置高度，宽度自适应（铺满整个屏幕）
给子元素设置宽高后加margin：0 auto；【auto（自动）】这样可以使子元素居中并且缩小屏幕时开始缩小的是父元素多出的宽，子元素宽度不变。
文字类属性 文本类属性分三种【文本类元素会被文本分隔符（回车/空格键）分割】
inline行级元素 block块级元素 inline-block行级块元素
行级元素和行级块元素都叫文本类元素【凡是带有inline的元素都有文本类特点所以都叫文本类元数】
position:absolute;
fooat:left/right;
这两个属性一旦设置其中一个那么就会在系统内部转换为inline-blick