标签：有一个 合并 像素 gre 才有 ant 隐藏 html元素 ble
font-size：属性用于设置字号，该属性的值可以使用相对长度单位，也可以是使用绝对长度。相对长度单位比较常用，
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体 |
| px | 像素，最常用 |
font-family：属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
font-weight：属性用与定义字体的粗细，其可用属性值：normal(正常 400 )、bold(粗 700 )、bolder、lighter、100-900（100的倍数）
font-style： 属性用于定义字体风格，如设置斜体、倾斜或正常字体
normal：正常字体（默认值） italic：字体为斜体 oblique：为倾斜字体
选择器{font：font-style font-weight font-size/line-height font-family}不能更换顺序，必须保留font-size和font-family属性，其余可省略
/* 取消默认小圆点 */
list-style:noneinput { /* 去除边框 */
border: none;
outline: none; /* 取消轮廓边框 */
}标签名{属性1：属性值1; 属性2：属性值2;}
元素名{属性1：属性值1; 属性2：属性值2;}
div {color: skyblue;}类选择器使用“.”(英文点号)后面加类名，标签调用的时候要用class=“类名” ；定义
.类名{属性1：属性值1; 属性2：属性值2;}
类的命名：不建议使用“_”下划线来命名。不要用纯数字、中文等命名。
可以给标签指定多个类名用空格分隔。如：class=“类名1 类名2”
<div class="one two">id选择器使用“#”进行标识。后面加id名
#id名{属性1：属性值1; 属性2：属性值2;}通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，匹配所有元素
*{
margin：0;
padding：0;}color属于用于定义文本的颜色，其取值方式有如下3种
文本中各行之间的垂直间距离。般称为行高。常用的属性值单位有三种，分别为像素px,相对值em,和百分比%
使用技巧：在一行内的盒子内，我们设定行高等于盒子高度，就可以使文字垂直居中
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
left：左对齐(默认值)
right：右对齐
center：居中对齐
text-indent属性用于设置首航文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值。允许使用负值，默认为normal。
text-decoration：通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本 |
| underline | 定义文本下的一条线，下划线也是我们链接自带的 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
文字颜色到了css3我们可以采取半透明的格式了
语法格式如下：
color:rgba(r,g,b,a) a 是alpha 透明的意思 取值范围0-1之间
color:rgba(0,0,0,0.3)以后可以给我们的文字添加阴影效果了shadow影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
text-shadow：2px 11px 3px rgba(0,0,0,0.5); 前两项是必须写的。后两项可以选写
复合选择器是由两个或多个基础选择器。通过不同的方式组合而成，目的是为了可以选择更准确更精细的目标元素标签
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
记忆技巧：
交集选择器是并且的意思。即。。又。。的意思
比如： p.one 选择的是 类名为 .one 的段落标签
用的相对比较少
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，就可以利用并集选择器为他们定义相同的css样式
记忆技巧：
并集选择器是 和 的意思，就是用逗号隔开，所有选择器都会执行后面的样式。
比如 .one,p,div {color: #F00;}表示.one和p和div这三个选择器都会执行颜色为红色后代选择器又称为包含选择器。用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面。子级标签写在后面。中间跟一个>进行连接，注意符号左右两侧各保留一个空格
比如： .demo > h3 {color: red;} 说明 h3一定是demo 亲儿子。demo元素包含h3选取标签带有某些特殊属性的选择器，我们成为属性选择器（权重跟类同级）
| ****选择器 | 含义 |
|---|---|
| E[attr] | 存在attr属性即可 |
| E[attr=var] | 属性值完成等于val |
| E[attr*=val] | 属性值里包含val字符并且在任意位置 |
| E[attr^=val] | 属性值里包含val字符并且在开始位置 |
| E[attr$=val] | 属性值里包含val字符并且在结束位置 |
div::before {
content: "开始";
}
div::after {
content: "结束";
}“：”与“：：”区别在于区分伪类和伪元素
严格按照顺序排序
? E：link 为访问的链接
? E：visited 已访问的链接
? E：hover 鼠标停留到链接上（最常用）
? E：active 选定的链接
? E：first-child ：选取属于其父元素的首个子元素的指定选择器
? E：last-child ：选取属于其父元素的最后一个子元素的指定选择器
? E：nth-child(n) :匹配属于其父元素的第n个子元素，不论元素的类型。even偶数 odd 奇数 n从0开始,n可用公式
? E：nth-last-child(n) :选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。N可以是数字、关键词或公式
? E：first-of-type：选取指定类型的第一个
? E：last-of-type ：选取指定类型的最后一个
? E：nth-of-type(n) : 选取指定类型的第n个
搭配input使用
input:focus ：获得焦点选择器
HTML标签一般分为块标签和内标签两种类型，它们分别称块元素和行内元素。
常见的块元素有<h1><h6>、<p>、<div>、<ul>、<ol>、<li>等。<div>是最典型的块元素行内元素(内联元素)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
常见的行内元素有<a><strong><em><ins><span>等，其中<span>标签最典型的行内元素链接里面不能再放链接
可以容纳内联元素和其他块元素
1）和相邻行内元素在一行上
2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
3）默认宽度就是它本身内容的宽度
4）行内元素只能容纳文本或则其他行内元素。（a特殊）
在行内元素中有几个特殊的标签 <img />、<input />、<td>,<textarea>，可以对它们设置宽度和对齐属性，称它们为行内块元素行内块元素的特点：
块转行内：display：inline
行内转块：display：block
块、行内元素转为行内块。display：inline-block
CSS可以添加背景颜色和背景图片，以及来进行图片设置
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
背景的合写（复合属性）
Background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置语法：
background-image: url(图片地址)语法：
background-repeat: repeat
默认的平铺为repeat、不平埔：no-repeat、横向平铺：repeat-x、纵向平铺：repeat-y语法：
background-position: length || position
参数：
length：百分数 | 由浮点数和单位标识符组成的长度值
position：top | center | bottom | left | center | right注意：
例子：
background-position: left top; /* 默认的是左上角 方位名词没有顺序*/
background-position: left; /* 如果方位名词只有一个，则另外一个默认为center */
background-position: 10px 30px; /* 第一个值是X坐标，第二个值是Y坐标*/
background-position: center 10px; /* 水平居中的垂直距离是10px */语法：
background-attachment: scroll | fixed参数：
scroll：背景图像是随对象内容滚动
fixed：背景图像固定
设置或检索背景图像是岁对象内容滚动还是固定的
Css3支持背景半透明的写法语法格式是：
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度 取值范围0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
同样，可以给文字和边框透明 都是rgba的格式来写
通过background-size这只背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕适配器应用非常广泛
语法： background-size： 100px 100px;
background-size：cover
background-size：contain参数：
以逗号分隔可以设置多背景，可用于自适应布局
background-image： url(图片地址)，url(图片地址)
? 一个元素可以设置多重背景图像
? 每组属性间使用逗号分隔
? 如果设置的多重背景之间存在着交集(重叠)，前面的背景图会覆盖在后面的背景图之上
? 为了避免背景色将图像盖住，背景色通常都定义在最后一组上
background: url(图片地址1) no-repeat left top, url(图片地址2) no-repeat right bottom blue;
文字阴影
div {
text-shadow: 1px 1px 1px #000,-1px -1px -1px #fff; 凸起效果
text-shadow: -1px -1px -1px #000,1px 1px 1px #fff; 下凹效果
}
```
# CSS三大特性
层叠、继承、优先级是我们学习css必须掌握的三个特性
## CSS层叠性
所谓的层叠性是指多种CSS样式的叠加。如出现冲突，则按照csss书写顺序，以最后的样式为准。
1. 样式冲突，遵循的原则是就近原则。那个样式离结构近，就执行那个样式。
2. 样式不冲突，不会层叠，个执行自己的。
## CSS继承性
恰当地使用继承可以简化代码，降低CSS样式的复杂性，减少代码的冗余。子元素可以继承父元素的样式（ <font color='red'>**text-、font-、line-这些元素开头的都可以继承，以及color属性**</font>）
## ***CSS优先级（权重）***
定义CSS样式时，经常出现两个更多规则应用在同一个元素上，这时就会出现优先级的问题，需要考虑权重问题特殊性：具体规则如下：
这是一个衡量CSS值优先级的一个标准，规范如下：
用一个四位的输字串来表示，从左到右，左面的最大，一级大于一级，数位之间不能进位，,数值越大，优先级越高
类型 | 对应值
------|----:
继承或者*的贡献值 |0，0，0，0
每个元素（标签）贡献值为| 0，0，0，1
每个类class，伪类贡献值为 |0，0，1，0
每个id贡献值为 |0，1，0，0
每个行内式贡献值 |1，0，0，0
每个!important |无穷大
继承的权重为|0
总结优先级：
1. 使用了！important声明的规则
2. 内嵌在HTML元素的style属性里面的生命
3. 使用了ID选择器的规则
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则
5. 使用了元素选择器的规则
6. 只包含一个通用选择器的规则
7. 同一个类则遵循就近原则
**总结：权重是优先级的算法，层叠是优先级的表现**
# 盒子模型（CSS重点）
CSS就三大模型：盒子模型、浮动、定位，其余的嗾使细节，要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)、和外边距(margin)组成
## 盒子边框（border）边框语法：
border: border-width || border-style || border-color
```
边框属性一设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常营属性值如下：
| 属性 | 描述 |
|---|---|
| none | 没有边框即忽略所有边框高度（默认值） |
| solid | 边框为单实线（常用） |
| dashed | 边框为虚线 |
| datted | 边框为点线 |
| double | 边框为双实线 |
样式综合设置 border-style:上边 [右边 下边 左边]
宽度综合设置 border-width:上边 [右边 下边 左边]
颜色综合设置 border-color:上边 [右边 下边 左边]
边框综合设置 border：四边宽度 四边样式 四边颜色table{border-collapse: collapse;} collapse ：合并的意思
border-collapse: collapse; 表示边框合并在一起语法格式：
border-radius：左上角 右上角 右下角 左下角
/* 圆形 */
/* border-radius: 50%; */
/* 左上右下10px 右上左下50px */
/* border-radius: 10px 50px; */
/* 左上5px 右上左下20px 右下50px */
/* border-radius: 5px 20px 50px; */
/* 左上5px 右上20px 右下30px 左下50px*/
/* border-radius: 5px 20px 30px 50px; */padding属性用于设置内边距。是指边框与内容之间的距离
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距注意：
| 值的个数 | 表达意思 |
|---|---|
| 1个值 Padding： | 上下左右边距 |
| 2个值 Padding： | 上下边距 左右边距 |
| 3个值 Padding： | 上边距 左右边距 下边距 |
| 4个值 Padding： | 上边距 右边距 下边距 左边距 |
margin属性用于设置外边距，设置外边距会在元素之间创建“空白”，这段空白不能放其他内容。
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距 右外边距 下外边距 左外边距
取值顺序跟内边距相同可以让一个盒子实现水平居中，需要满足一下两个条件
div { width：600px;
margin： auto;}如下代码清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。
*号为通配符
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。左右相邻的两个元素外边距会相加
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
注意：
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
box-sizing: border-box 盒子大小为 width（默认）
box-sizing: content-box 盒子大小为 width + padding + border注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸(大小) 阴影颜色 内/外阴影；元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，语法如下：
选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少
浮动得目的就是为了让块级元素在一行内显示
特别注意，首先浮动得盒子需要和标准流得父级搭配使用，其次特别得注意浮动可以使元素显示模式体现为行内块特性
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:both;}| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清楚左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清楚右侧浮动的影响） |
| both | 同时清楚左右两侧的浮动的影响 |
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>，或则其他标签br等亦可。可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
:after方式为空格元素的升级版，好处是不用单独加标签了
使用方法：
css .clearfix:after { content: ""; display: block; height: 0; /* 隐藏元素 */ visibility: hidden; /* 清除浮动 */ clear: both; } /* 兼容低版本ie浏览器 */ .clearfix {*zoom: 1;}
使用方法：
.clearfix:before,.clearfix:after {
content:".";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}元素的定位属性主要包括定位模式和边偏移两部分。
| 边移量属性 | 描述 |
|---|---|
| Top | 顶端偏移量，元素距离父元素上边线的距离 |
| bottom | 底部偏移量，元素距离父元素下边线的距离 |
| left | 左侧偏移量，元素距离父元素左边线的距离 |
| right | 右侧偏移量，元素距离父元素右边线的距离 |
以后 定位要和这边偏移搭配使用，
选择器{position:属性值;}position属性值
| 值 | 描述 |
|---|---|
| static | 静态定位（默认定位方式） |
| relative | 相对定位，相对于原先自己的位置进行定位 |
| absolute | 绝对定位，相对于最近已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器可视窗口进行定位 |
| sticky | 粘性定位，具有相对定位和固定定位的特点 |
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的 位置仍然保留。
注意：
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意：
绝对定位的元素改变行内元素的显示方式（可以直接给宽高）
在父元素都没有定位的情况下，以浏览器可视区域为准对齐。
绝对定位是将元素依据最近的已经定位（非静态）的父元素进行定位。
当对元素设置固定定位后，它将脱离标准流，始终以浏览器可视窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有三点：
普通的盒子是左右margin改为auto即可，但是对于绝对定位就无效了
定位的盒子也可以水平或垂直居中，有一个算法
对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
注意：
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 想对自身位置移动 |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
粘性定位的特点：
跟浮动一样， 元素添加了绝对定位和固定定位之后，元素模式也会发生转换，元素会具有行内块元素的特性
因此行内元素如果添加 绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。
元素的显示与隐藏在页面最常见的就是鼠标经过的时候弹出内容，移出的时候内容消失
display 设置或检索对象是否及如何显示。
display : none 隐藏对象与它相反的是 display:block除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
| 属性 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条。 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管内容是否超出，总是显示滚动条 |
界面样式就是更改一些用户操作样式， 比如 更改用户的鼠标样式，
鼠标在它身上的时候显示样式。
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">禁止</li>
</ul>
是绘制于元素周围的一条线，位于边框边缘的外围(input,button)
取消轮廓：
outline: 0; 或者 outline: none;
防止 火狐 谷歌等浏览器随意的拖动 文本域。
resize: none;vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。
vertical-align : baseline(基线对齐) |top(顶线对齐) |middle(中线对齐） |bottom
我们可以使用vertical-align: midden控制图片和文字的垂直关系。默认的图片会和文字基线对齐。
默认图片的底线会和父级盒子的基线对齐。这样会造成图片底侧会有一个空白缝隙。
解决的方法就是：
1、 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2、 给img 添加 display：block; 转换为块级元素就不会存在问题了。
一定要强制内容在一行内显示
/* 强制一行内显示文本 */
white-space: nowrap;
/* 超出不放呢隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
overflow: hidden;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块级元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;更新中。。。
标签：有一个 合并 像素 gre 才有 ant 隐藏 html元素 ble
原文地址：https://www.cnblogs.com/wenyongjie/p/12379841.html
