CSS属性

2021-04-14 01:27

阅读：487

标签：有一个合并像素 gre 才有 ant 隐藏 html元素 ble

字体样式属性（font）

字体的大小（size）

font-size：属性用于设置字号，该属性的值可以使用相对长度单位，也可以是使用绝对长度。相对长度单位比较常用，

相对长度单位	说明
em	相对于当前对象内文本的字体
px	像素，最常用

字体（family）

font-family：属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

字体粗细（weight）

font-weight：属性用与定义字体的粗细，其可用属性值：normal(正常 400 )、bold(粗 700 )、bolder、lighter、100-900（100的倍数）

字体的样式（style）

font-style：属性用于定义字体风格，如设置斜体、倾斜或正常字体
normal：正常字体（默认值） italic：字体为斜体 oblique：为倾斜字体

font:综合设置字体样式

选择器{font：font-style  font-weight  font-size/line-height  font-family}

不能更换顺序，必须保留font-size和font-family属性，其余可省略

列表样式

取消默认样式

/* 取消默认小圆点 */
list-style:none

input取消默认样式

input {    /* 去除边框 */
  border: none;   
  outline: none;  /* 取消轮廓边框 */
}

选择器

标签选择器(元素选择器)

标签名{属性1：属性值1; 属性2：属性值2;}
元素名{属性1：属性值1; 属性2：属性值2;}
div {color: skyblue;}

类选择器

类选择器使用“.”(英文点号)后面加类名，标签调用的时候要用class=“类名” ；定义

.类名{属性1：属性值1; 属性2：属性值2;}

类的命名：不建议使用“_”下划线来命名。不要用纯数字、中文等命名。

多类名选择器

可以给标签指定多个类名用空格分隔。如：class=“类名1 类名2”


id选择器
id选择器使用“#”进行标识。后面加id名
#id名{属性1：属性值1; 属性2：属性值2;}
通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，匹配所有元素
*{
  margin：0;
  padding：0;}
css外观样式
color：文本颜色
color属于用于定义文本的颜色，其取值方式有如下3种

预定义的颜色值，如red，green，blue等
十六进制，如#FF0000、#FF6600等，十六进制是最常用的定义的颜色方式
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%).

line-height：行间距(行高)
文本中各行之间的垂直间距离。般称为行高。常用的属性值单位有三种，分别为像素px,相对值em,和百分比%
使用技巧：在一行内的盒子内，我们设定行高等于盒子高度，就可以使文字垂直居中
text-align：水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

left：左对齐(默认值)

right：右对齐

center：居中对齐
text-indent：首行缩进
text-indent属性用于设置首航文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
letter-spacing：字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值。允许使用负值，默认为normal。
text-decoration文本的装饰
text-decoration：通常我们用于给链接修改装饰效果


值
描述



none
默认。定义标准的文本


underline
定义文本下的一条线，下划线也是我们链接自带的


overline
定义文本上的一条线


line-through
定义穿过文本下的一条线



颜色半透明（css3）
文字颜色到了css3我们可以采取半透明的格式了
语法格式如下：
color:rgba(r,g,b,a)   a 是alpha  透明的意思 取值范围0-1之间
 color:rgba(0,0,0,0.3)
文字阴影（css3）
以后可以给我们的文字添加阴影效果了shadow影子
text-shadow:水平位置  垂直位置  模糊距离  阴影颜色;
text-shadow：2px  11px  3px  rgba(0,0,0,0.5);   
前两项是必须写的。后两项可以选写
CSS复合选择器
复合选择器是由两个或多个基础选择器。通过不同的方式组合而成，目的是为了可以选择更准确更精细的目标元素标签
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
记忆技巧：

交集选择器是并且的意思。即。。又。。的意思

比如： p.one 选择的是 类名为 .one 的段落标签

用的相对比较少
并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，就可以利用并集选择器为他们定义相同的css样式

记忆技巧：

并集选择器是 和 的意思，就是用逗号隔开，所有选择器都会执行后面的样式。
比如  .one,p,div {color: #F00;}表示.one和p和div这三个选择器都会执行颜色为红色
后代选择器
后代选择器又称为包含选择器。用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面。子级标签写在后面。中间跟一个>进行连接，注意符号左右两侧各保留一个空格
比如： .demo > h3 {color: red;}  说明  h3一定是demo 亲儿子。demo元素包含h3
属性选择器（CSS3）
选取标签带有某些特殊属性的选择器，我们成为属性选择器（权重跟类同级）


****选择器
含义



E[attr]
存在attr属性即可


E[attr=var]
属性值完成等于val


E[attr*=val]
属性值里包含val字符并且在任意位置


E[attr^=val]
属性值里包含val字符并且在开始位置


E[attr$=val]
属性值里包含val字符并且在结束位置



伪元素选择器（CSS3）

E：：first-letter文本的第一个单词或字
E：：first-line文本第一行
E：：selection可改变选中文本的样式

E：：before和E：：after

在E元素内部开始位置和结束位创建一个元素，该元素为行内元素，且必须要 结合content属性 使用。

  div::before {
            content: "开始";
        }
        div::after {
            content: "结束";
        }
“：”与“：：”区别在于区分伪类和伪元素
伪类选择器
链接伪类选择器（主要针对a标签）
严格按照顺序排序

? E：link 为访问的链接

? E：visited 已访问的链接
? E：hover 鼠标停留到链接上（最常用）

? E：active 选定的链接
结构(位置)伪类选择器（css3）
? 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个
：focus选择器获得焦点
搭配input使用

input:focus ：获得焦点选择器
标签显示模式（display）
HTML标签一般分为块标签和内标签两种类型，它们分别称块元素和行内元素。
块级元素（block-level）
常见的块元素有
、
、
、、
、等。是最典型的块元素
块级元素的特点：

总是独占一整行
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素
P跟h不能放块级元素

行内元素（inline-level）
行内元素(内联元素)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
常见的行内元素有等，其中标签最典型的行内元素
行内元素的特点：

和相邻行内元素在一行上
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：

只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1~h6他们都是文字类块级标签，里面不能放其他块级元素

链接里面不能再放链接
块级元素和行内元素区别
块级元素的特点：

总是独占一整行
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素的特点：
1）和相邻行内元素在一行上

2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效

3）默认宽度就是它本身内容的宽度

4）行内元素只能容纳文本或则其他行内元素。（a特殊）
行内块元素（inline-block）
在行内元素中有几个特殊的标签 、、,，可以对它们设置宽度和对齐属性，称它们为行内块元素
<p>行内块元素的特点：</p>
<ol>
<li>和相邻内元素(行内块)在一行上，但是之间会有空白缝隙</li>
<li>默认宽度就是它本身内容的宽度</li>
<li>高度、行高、外边距以及内边距都可以控制</li>
</ol>
<h2 id="标签显示模式转换display">标签显示模式转换display</h2>
<p><strong>块转行内：display：inline<br>
行内转块：display：block<br>
块、行内元素转为行内块。display：inline-block</strong></p>
<h1 id="css背景background">CSS背景（background）</h1>
<p>CSS可以添加背景颜色和背景图片，以及来进行图片设置</p>
<pre><code>background-color    背景颜色
background-image    背景图片地址
background-repeat   是否平铺
background-position 背景位置
background-attachment   背景固定还是滚动
背景的合写（复合属性）
Background：背景颜色   背景图片地址   背景平铺   背景滚动   背景位置</code></pre>
<h2 id="背景图片image">背景图片（image）</h2>
<pre><code>语法：
    background-image: url(图片地址)</code></pre>
<h2 id="背景平铺repeat">背景平铺（repeat）</h2>
<pre><code>语法：
    background-repeat: repeat
默认的平铺为repeat、不平埔：no-repeat、横向平铺：repeat-x、纵向平铺：repeat-y</code></pre>
<h2 id="背景位置position">背景位置（position）</h2>
<pre><code>语法：
    background-position: length || position
参数：
length：百分数 | 由浮点数和单位标识符组成的长度值
position：top | center | bottom | left | center | right</code></pre>
<p><strong>注意：</strong></p>
<ol>
<li>position后面是x坐标和y坐标。可以使用方位名词或 精准单位</li>
<li>如果和精准单位和方位名词混合使用，则必须是x坐标在前，y坐标在后</li>
<li>背景图片居中对齐用最多</li>
</ol>
<pre><code>例子：
    background-position: left top;  /* 默认的是左上角 方位名词没有顺序*/
    background-position: left;   /* 如果方位名词只有一个，则另外一个默认为center */
    background-position: 10px 30px;   /* 第一个值是X坐标，第二个值是Y坐标*/
    background-position: center 10px;   /* 水平居中的垂直距离是10px */</code></pre>
<h2 id="背景附着attachment">背景附着（attachment）</h2>
<pre><code>语法：
    background-attachment: scroll | fixed</code></pre>
<p>参数：<br>
scroll：背景图像是随对象内容滚动<br>
fixed：背景图像固定<br>
设置或检索背景图像是岁对象内容滚动还是固定的</p>
<h2 id="背景半透明css3">背景半透明（CSS3）</h2>
<p>Css3支持背景半透明的写法语法格式是：<br><code>background: rgba(0,0,0,0.3);</code><br>
最后一个参数是alpha透明度 取值范围0-1之间<br>
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响<br>
同样，可以给文字和边框透明 都是rgba的格式来写</p>
<h2 id="背景缩放css3">背景缩放（CSS3）</h2>
<p>通过background-size这只背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕适配器应用非常广泛</p>
<pre><code>语法： background-size： 100px  100px;
        background-size：cover
        background-size：contain</code></pre>
<p>参数：</p>
<ol>
<li>可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽度）</li>
<li>设置为cover时，会自动调整缩放比例，保证图片填充满背景区域。如有溢出部分则被隐藏</li>
<li>设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域</li>
</ol>
<h2 id="多背景css3">多背景（CSS3）</h2>
<p>以逗号分隔可以设置多背景，可用于自适应布局<br><code>background-image： url(图片地址)，url(图片地址)</code><br>
? 一个元素可以设置多重背景图像<br>
? 每组属性间使用逗号分隔<br>
? 如果设置的多重背景之间存在着交集(重叠)，前面的背景图会覆盖在后面的背景图之上<br>
? 为了避免背景色将图像盖住，背景色通常都定义在最后一组上<br><code>background: url(图片地址1) no-repeat left top,             url(图片地址2) no-repeat right bottom blue;</code></p>
<h2 id="凹凸文字效果">凹凸文字效果</h2>
<p>文字阴影</p>
<pre><code>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）</code></pre>
<p>边框语法：<br>
border: border-width || border-style || border-color<br>
```<br>
边框属性一设置边框样式（border-style）<br>
边框样式用于定义页面中边框的风格，常营属性值如下：</p>
<table>
<thead><tr>
<th>属性</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>none</td>
<td>没有边框即忽略所有边框高度（默认值）</td>
</tr>
<tr>
<td><strong>solid</strong></td>
<td><strong>边框为单实线（常用）</strong></td>
</tr>
<tr>
<td>dashed</td>
<td>边框为虚线</td>
</tr>
<tr>
<td>datted</td>
<td>边框为点线</td>
</tr>
<tr>
<td>double</td>
<td>边框为双实线</td>
</tr>
</tbody>
</table>
<h3 id="盒子边框写法总结">盒子边框写法总结</h3>
<pre><code>样式综合设置  border-style:上边 [右边 下边 左边]
宽度综合设置  border-width:上边 [右边 下边 左边]
颜色综合设置  border-color:上边 [右边 下边 左边]
边框综合设置  border：四边宽度 四边样式 四边颜色</code></pre>
<h2 id="表格的细线边框">表格的细线边框</h2>
<pre><code>table{border-collapse: collapse;}  collapse ：合并的意思
border-collapse: collapse;  表示边框合并在一起</code></pre>
<h2 id="圆角边框">圆角边框</h2>
<pre><code>语法格式：
    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; */</code></pre>
<h2 id="内边距padding">内边距（padding）</h2>
<pre><code>padding属性用于设置内边距。是指边框与内容之间的距离
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距</code></pre>
<p><strong>注意：</strong></p>
<table>
<thead><tr>
<th>值的个数</th>
<th>表达意思</th>
</tr></thead>
<tbody>
<tr>
<td>1个值 Padding：</td>
<td>上下左右边距</td>
</tr>
<tr>
<td>2个值 Padding：</td>
<td>上下边距 左右边距</td>
</tr>
<tr>
<td>3个值 Padding：</td>
<td>上边距 左右边距 下边距</td>
</tr>
<tr>
<td>4个值 Padding：</td>
<td>上边距 右边距 下边距 左边距</td>
</tr>
</tbody>
</table>
<h2 id="外边距margin">外边距（margin）</h2>
<p>margin属性用于设置外边距，设置外边距会在元素之间创建“空白”，这段空白不能放其他内容。</p>
<pre><code>margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距  右外边距  下外边距  左外边距
取值顺序跟内边距相同</code></pre>
<h2 id="外边距实现盒子居中">外边距实现盒子居中</h2>
<p>可以让一个盒子实现水平居中，需要满足一下两个条件</p>
<ol>
<li>必须是块元素</li>
<li>盒子必须指定了宽度（width）<br>
然后就给左右的外边距都设置为auto，就可使块级元素水平居中<br>
示例：</li>
</ol>
<pre><code>div { width：600px;
  margin： auto;}</code></pre>
<h2 id="清楚元素的默认内外边距">清楚元素的默认内外边距</h2>
<p>如下代码清除元素的默认内外边距</p>
<pre><code>* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}</code></pre>
<p><strong>注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。</strong></p>
<p>*号为通配符</p>
<h2 id="外边距合并">外边距合并</h2>
<p>使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。</p>
<h3 id="相邻块元素垂直外边距的合并">相邻块元素垂直外边距的合并</h3>
<p>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。左右相邻的两个元素外边距会相加</p>
<h3 id="嵌套块元素垂直外边距的合并">嵌套块元素垂直外边距的合并</h3>
<p>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。<br><strong>解决方案：</strong></p>
<ol>
<li>可以为父元素定义1像素的上边框或上内边距。</li>
<li><strong>可以为父元素添加overflow:hidden。</strong></li>
</ol>
<p>注意：</p>
<ol>
<li>宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。</li>
<li>计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。</li>
<li>如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响盒子大小</li>
</ol>
<h1 id="css3盒模型">CSS3盒模型</h1>
<p>CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、<strong>border-box</strong>，这样我们计算盒子大小的方式就发生了改变。<br>
可以分成两种情况：</p>
<pre><code>box-sizing: border-box 盒子大小为 width（默认）
 box-sizing: content-box 盒子大小为 width + padding + border</code></pre>
<p>注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。</p>
<h2 id="盒子阴影">盒子阴影</h2>
<pre><code>语法格式：
    box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸(大小) 阴影颜色  内/外阴影；</code></pre>
<ol>
<li>前两个属性是必须写的。其余的可以省略。</li>
<li>外阴影 (outset) 但是不能写 默认 想要内阴影 inset</li>
</ol>
<h1 id="浮动float">浮动（float）</h1>
<p>元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。<br>
在CSS中，通过float属性来定义浮动，语法如下：<br><code>选择器{float:属性值;}</code></p>
<table>
<thead><tr>
<th>属性值</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>left</td>
<td>元素向左浮动</td>
</tr>
<tr>
<td>right</td>
<td>元素向右浮动</td>
</tr>
<tr>
<td>none</td>
<td>元素不浮动（默认值）</td>
</tr>
</tbody>
</table>
<p>浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。</p>
<ol>
<li>浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。</li>
<li contentscore="254"><p>浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。</p></li>
<li contentscore="355"><p><strong>元素添加浮动后，元素会具有行内块元素的特性</strong>。元素的大小完全取决于定义的大小或者默认的内容多少<br><strong>浮动得目的就是为了让块级元素在一行内显示</strong><br>
特别注意，首先浮动得盒子需要和标准流得父级搭配使用，其次特别得注意浮动可以使元素显示模式体现为行内块特性</p></li>
</ol>
<h1 id="清除浮动">清除浮动</h1>
<p>清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。</p>
<h2 id="清除浮动的方法">清除浮动的方法</h2>
<p>在CSS中，clear属性用于清除浮动，其基本语法格式如下：</p>
<pre><code>选择器{clear:both;}</code></pre>
<table>
<thead><tr>
<th>属性值</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>left</td>
<td>不允许左侧有浮动元素（清楚左侧浮动的影响）</td>
</tr>
<tr>
<td>right</td>
<td>不允许右侧有浮动元素（清楚右侧浮动的影响）</td>
</tr>
<tr>
<td><strong>both</strong></td>
<td>同时清楚左右两侧的浮动的影响</td>
</tr>
</tbody>
</table>
<h3 id="额外标签法">额外标签法</h3>
<p>是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如</p>
<pre><code><div style="”clear:both”"></div>，或则其他标签br等亦可。</code></pre>
<h3 id="父级添加overflow属性方法">父级添加overflow属性方法</h3>
<p>可以给父级添加： <strong>overflow为 hidden</strong>|auto|scroll 都可以实现。</p>
<h3 id="使用after伪元素清除浮动常用">使用after伪元素清除浮动(常用)</h3>
<p>:after方式为空格元素的升级版，好处是不用单独加标签了<br>
使用方法：<br><code>css   .clearfix:after {  content: "";    display: block;    height: 0;     /* 隐藏元素  */    visibility: hidden;    /* 清除浮动 */    clear: both;     }        /* 兼容低版本ie浏览器 */  .clearfix {*zoom: 1;}</code></p>
<h3 id="使用before和after双伪元素清除浮动">使用before和after双伪元素清除浮动</h3>
<p>使用方法：</p>
<pre><code>.clearfix:before,.clearfix:after {
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}</code></pre>
<h1 id="定位position">定位（position）</h1>
<h2 id="元素的定位属性">元素的定位属性</h2>
<p>元素的定位属性主要包括定位模式和边偏移两部分。</p>
<ol>
<li>边偏移</li>
</ol>
<table>
<thead><tr>
<th>边移量属性</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>Top</td>
<td>顶端偏移量，元素距离父元素上边线的距离</td>
</tr>
<tr>
<td>bottom</td>
<td>底部偏移量，元素距离父元素下边线的距离</td>
</tr>
<tr>
<td>left</td>
<td>左侧偏移量，元素距离父元素左边线的距离</td>
</tr>
<tr>
<td>right</td>
<td>右侧偏移量，元素距离父元素右边线的距离</td>
</tr>
</tbody>
</table>
<p>以后 <strong>定位要和这边偏移搭配使用</strong>，</p>
<ol>
<li>定位模式<br>
position属性用于定义元素的定位模式，其基本语法格式如下：</li>
</ol>
<pre><code>选择器{position:属性值;}</code></pre>
<p>position属性值</p>
<table>
<thead><tr>
<th>值</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>static</td>
<td>静态定位（默认定位方式）</td>
</tr>
<tr>
<td>relative</td>
<td>相对定位，相对于原先自己的位置进行定位</td>
</tr>
<tr>
<td>absolute</td>
<td>绝对定位，相对于最近已经定位的父元素进行定位</td>
</tr>
<tr>
<td>fixed</td>
<td>固定定位，相对于浏览器可视窗口进行定位</td>
</tr>
<tr>
<td>sticky</td>
<td>粘性定位，具有相对定位和固定定位的特点</td>
</tr>
</tbody>
</table>
<h2 id="静态定位static">静态定位(static)</h2>
<p>静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。<br>
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。</p>
<h2 id="相对定位relative">相对定位（relative）</h2>
<p>相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。<br>
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的 <strong>位置仍然保留</strong>。<br>
注意：</p>
<ol>
<li>相对定位的元素<strong>不脱标，继续在占标准流的位置。</strong>
</li>
<li>它可以通过边偏移移动位置，</li>
<li>每次移动的位置，是以自己原先的位置移动</li>
</ol>
<h2 id="绝对定位absolute">绝对定位（absolute）</h2>
<p>当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。<br>
注意：</p>
<ol>
<li><strong>绝对定位的盒子脱离标准流，在标准留不占据位置。</strong></li>
<li contentscore="255">
<p>绝对定位的元素改变行内元素的显示方式（可以直接给宽高）</p>
<h3 id="父级没有定位">父级没有定位</h3>
<p>在父元素都没有定位的情况下，以浏览器可视区域为准对齐。</p>
<h3 id="父级有定位">父级有定位</h3>
<p>绝对定位是将元素依据最近的已经定位（非静态）的父元素进行定位。</p>
</li>
</ol>
<h2 id="固定定位fixed">固定定位(fixed)</h2>
<p>当对元素设置固定定位后，它将脱离标准流，始终以浏览器可视窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。<br>
固定定位有三点：</p>
<ol>
<li>固定定位的元素跟父亲没有任何关系，只认浏览器。</li>
<li><strong>固定定位完全脱标，不占有位置，不随着滚动条滚动。</strong></li>
<li>固定定位的盒子一定要写宽和高，除非有内容撑开不用写</li>
</ol>
<h2 id="页面常用的布局就是子绝父相"><strong>页面常用的布局就是子绝父相</strong></h2>
<h2 id="绝对定位的盒子水平垂直居中"><strong>绝对定位的盒子水平/垂直居中</strong></h2>
<p>普通的盒子是左右margin改为auto即可，但是对于绝对定位就无效了<br>
定位的盒子也可以水平或垂直居中，有一个算法</p>
<ol>
<li>首先left: 50%; 父盒子一半的大小</li>
<li>然后走自己外边距负的一半值就可以了 margin-left: </li>
</ol>
<h2 id="叠放次序z-index">叠放次序（z-index）</h2>
<p>对多个元素同时设置定位时，定位元素之间有可能会发生重叠。</p>
<p>注意：</p>
<ol>
<li>z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。</li>
<li>后面数字一定不能加单位。</li>
<li>只有相对定位，绝对定位，固定定位有此属性。</li>
</ol>
<h2 id="四种定位总结">四种定位总结</h2>
<table>
<thead><tr>
<th>定位模式</th>
<th>是否脱标占有位置</th>
<th>是否可以使用边偏移</th>
<th>移动位置基准</th>
</tr></thead>
<tbody>
<tr>
<td>静态static</td>
<td>不脱标，正常模式</td>
<td>不可以</td>
<td>正常模式</td>
</tr>
<tr>
<td>相对定位relative</td>
<td>不脱标，占有位置</td>
<td>可以</td>
<td>想对自身位置移动</td>
</tr>
<tr>
<td>绝对定位absolute</td>
<td>完全脱标，不占有位置</td>
<td>可以</td>
<td>相对于定位父级移动位置</td>
</tr>
<tr>
<td>固定定位fixed</td>
<td>完全脱标，不占有位置</td>
<td>可以</td>
<td>相对于浏览器移动位置</td>
</tr>
</tbody>
</table>
<h2 id="粘性定位sticky">粘性定位（sticky）</h2>
<p>粘性定位的特点：</p>
<ol>
<li>以浏览器的可是窗口为参照点移动元素（固定定位特点）</li>
<li>粘性定位占有原先的位置（相对定位的特点）</li>
<li>必须添加top、left、right、bottom中其中一个才有效</li>
</ol>
<h1 id="定位模式转换">定位模式转换</h1>
<p><strong>跟浮动一样， 元素添加了绝对定位和固定定位之后，元素模式也会发生转换，元素会具有行内块元素的特性</strong><br>
因此行内元素如果添加 绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。</p>
<h1 id="元素的显示与隐藏">元素的显示与隐藏</h1>
<p>元素的显示与隐藏在页面最常见的就是鼠标经过的时候弹出内容，移出的时候内容消失</p>
<h2 id="display-显示">display 显示</h2>
<p>display 设置或检索对象是否及如何显示。<br><strong>display : none 隐藏对象</strong>与它相反的是 <strong>display:block</strong>除了转换为块级元素之外，同时还有显示元素的意思。<br><strong>特点： 隐藏之后，不再保留位置。</strong></p>
<h2 id="visibility-可见性">visibility 可见性</h2>
<p>设置或检索是否显示对象。<br>
visible : 　对象可视<br><strong>hidden : 　对象隐藏</strong><br>
特点： 隐藏之后，继续保留原有位置。</p>
<h2 id="overflow-溢出">overflow 溢出</h2>
<p>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。</p>
<table>
<thead><tr>
<th>属性</th>
<th>描述</th>
</tr></thead>
<tbody>
<tr>
<td>visible</td>
<td>　不剪切内容也不添加滚动条。</td>
</tr>
<tr>
<td>auto</td>
<td>　 超出自动显示滚动条，不超出不显示滚动条</td>
</tr>
<tr>
<td><strong>hidden</strong></td>
<td>　不显示超过对象尺寸的内容，超出的部分隐藏掉</td>
</tr>
<tr>
<td>scroll</td>
<td>　不管内容是否超出，总是显示滚动条</td>
</tr>
</tbody>
</table>
<h1 id="css用户界面样式">CSS用户界面样式</h1>
<p>界面样式就是更改一些用户操作样式， 比如 更改用户的鼠标样式，</p>
<h2 id="鼠标样式cursor">鼠标样式cursor</h2>
<p>鼠标在它身上的时候显示样式。</p>
<pre><code><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></code></pre>
<h2 id="轮廓-outline">轮廓 outline</h2>
<p>是绘制于元素周围的一条线，位于边框边缘的外围(input,button)<br><strong>取消轮廓：</strong><br><code>outline: 0;  或者  outline: none;</code></p>
<h2 id="防止拖拽文本域resize">防止拖拽文本域resize</h2>
<p>防止 火狐 谷歌等浏览器随意的拖动 文本域。</p>
<pre><code>resize: none;</code></pre>
<h1 id="vertical-align-垂直对齐">vertical-align 垂直对齐</h1>
<p>vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，<strong>特别是行内块元素，通常用来控制图片和表单</strong>等。<br>
vertical-align : baseline(基线对齐) |top(顶线对齐) |<strong>middle(中线对齐）</strong> |bottom</p>
<h2 id="图片和文字对齐"><strong>图片和文字对齐</strong></h2>
<p>我们可以使用vertical-align: midden控制图片和文字的垂直关系。默认的图片会和文字基线对齐。</p>
<h2 id="去除图片底侧空白缝隙">去除图片底侧空白缝隙</h2>
<p>默认图片的底线会和父级盒子的基线对齐。这样会造成图片底侧会有一个空白缝隙。<br>
解决的方法就是：<br>
1、 给img vertical-align:middle | top等等。 让图片不要和基线对齐。<br>
2、 给img 添加 display：block; 转换为块级元素就不会存在问题了。</p>
<h1 id="溢出的文字隐藏">溢出的文字隐藏</h1>
<h2 id="单行文字溢出隐藏">单行文字溢出隐藏</h2>
<p>一定要强制内容在一行内显示</p>
<pre><code>/* 强制一行内显示文本 */
white-space: nowrap;
/* 超出不放呢隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
</code></pre>
<h2 id="多行文本溢出隐藏">多行文本溢出隐藏</h2>
<pre><code>overflow: hidden;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块级元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;</code></pre>
<p><strong>更新中。。。</strong></p>
<p>CSS属性</p>
<p>标签：有一个   合并   像素   gre   才有   ant   隐藏   html元素   ble   </p>
<p>原文地址：https://www.cnblogs.com/wenyongjie/p/12379841.html</p>

值	描述
none	默认。定义标准的文本
underline	定义文本下的一条线，下划线也是我们链接自带的
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线

****选择器	含义
E[attr]	存在attr属性即可
E[attr=var]	属性值完成等于val
E[attr*=val]	属性值里包含val字符并且在任意位置
E[attr^=val]	属性值里包含val字符并且在开始位置
E[attr$=val]	属性值里包含val字符并且在结束位置

上一篇：php实现页面静态化

下一篇：Golang Json数据处理方法

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS属性
文章链接：http://soscw.com/index.php/essay/75442.html

亲，登录后才可以留言！

CSS属性

字体样式属性（font）

字体的大小（size）

字体 （family）

字体粗细 （weight）

字体的样式（style）

font:综合设置字体样式

列表样式

取消默认样式

input取消默认样式

选择器

标签选择器(元素选择器)

类选择器

多类名选择器

id选择器

通配符选择器

css外观样式

color：文本颜色

line-height：行间距(行高)

text-align：水平对齐方式

text-indent：首行缩进

letter-spacing：字间距

text-decoration文本的装饰

颜色半透明（css3）

文字阴影（css3）

CSS复合选择器

交集选择器

并集选择器

后代选择器

子元素选择器

属性选择器（CSS3）

伪元素选择器（CSS3）

伪类选择器

链接伪类选择器（主要针对a标签）

结构(位置)伪类选择器（css3）

：focus选择器获得焦点

标签显示模式（display）

块级元素（block-level）

、

块级元素的特点：

行内元素（inline-level）

行内元素的特点：

块级元素和行内元素区别

块级元素的特点：

行内元素的特点：

行内块元素（inline-block）

评论

热门文章

推荐文章

最新文章

置顶文章

字体（family）

字体粗细（weight）