css

Posted 2020-07-12

#
##<a>元素

为了解决超链接在点击后依旧拥有相关的响应故其link、hover、visited
、active顺序应如下：   
a:link{
    color: red;
}

a:visited{
    color: blue;
}

a:hover{
    color: green;
}

a:active{
    color: orange;
}

##内联元素和块级元素的区别

**1.文档流**：标准文档流就是指在没有浮动或定位情况下元素按照css的标准来排列，或者说是css默认排列的方式。          
**2.块级元素：**    
（1）前后换行显示，默认状态下独占一行。                          
（2）块级元素常作为容器。可以包含其他块级元素，行级元素。
（3）块级元素有一定的高度和宽度，用width、height来表示。   
（4）分类：div、p、h1-h6、ul、ol、hr、table、form

**3.内联元素（行级元素，行内标签）**   
（1）类似于文本的显示方式，逐行显示。   
（2）span、lable、 a、img、input、textarea

##display属性

**定义**：规定了生成框的类型  
值：     
   none:不显示，位置还是在    
   inline：指定对象为行级元素，行级元素不支持高和宽。    
   inline-block：行内块级元素。本质是行级元素，但是支持高宽。eg:img

#选择器
##

**1.id选择器**   
1.1、在整个网页中必须是唯一的id，#表示id。   
1.2、id选择器不能结合使用。    
eg: #id_name{      
margin:20px 10px;   
}   

**2.类（class）选择器**   
2.1、在整个网页中可以重复使用，**.** 表示class。   
2.2、类（class）选择器可以结合使用。   
eg: .class_name{      
margin:20px 10px;   
}
   
    **注：id选择器优先级大于类（class）选择器**

**3.元素选择器**   
3.1 w3c元素选择器又称为类型选择器。   
eg: p{      
margin:20px 10px;   
}


**4.分组选择器**    
eg: div,p,img{      
margin:20px 10px;   
}

**5.属性选择器**   
5.1 单个属性选择器
eg: [name]{
margin:20px 10px;   
}   
5.2 多个属性选择器   
eg: [name][title]{
margin:20px 10px;   
}   
5.3属性值选择器    
eg: [name=username]{
margin:20px 10px;   
}   
5.4属性中包含指定词汇的元素   
[title~=gyy]   
5.5[attribute|=value]    
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。   
5.6[attribute^=value]   
匹配属性值以指定值开头的每个元素。   
5.7[attribute$=value]   
匹配属性值以指定值结尾的每个元素。   
5.8[attribute*=value]   
匹配属性值中包含指定值的每个元素。

**6.后代选择器(包含选择器)**   
<code> #p1 em{   
margin:10px;   
}</code>

**7.子元素选择器**   
7.1子元素选择器（Child selectors）只能选择作为某元素子元素的元素。（只可以改变）   
<code> h1 > strong {   
color:red;   
}</code>   
**8.相邻兄弟选择器**   
  <code>h1 + p {margin-top:50px;}</code>
    <code><div>
          <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
          </ul>
          <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ol>
    </div> </code> 

注意： 请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。   
**9.通配符**   
<code>*{   
margin:10px;   
}</code>   
注意：作用于所有元素，但是***优先级最低***。

**10.伪类 (Pseudo-classes)**   
:active 向被激活的元素添加样式。 1   
:focus 向拥有键盘输入焦点的元素添加样式。 2   
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1    
:link 向未被访问的链接添加样式。 1    
:visited 向已被访问的链接添加样式。 1    
:first-child 向元素的第一个子元素添加样式。 2    
:lang 向带有指定 lang 属性的元素添加        样式。 2    
    
**11.伪元素选择器**  
元素：：选择 或者 元素：选择  
:first-letter 向文本的第一个字母添加特殊样式。 1    
:first-line 向文本的首行添加特殊样式。 1    
:before 在元素之前添加内容。 2    
:after 在元素之后添加内容。 2 


##盒子模型
**padding**  
padding:内边距。使用会改变盒子的大小   
padding：10px;上下左右都是10px;     
padding:20px 10px;上下左右；    
padding:20px 10px 5px ;上（左右）下      
padding:20px 10px 5px 0px;上右下左（顺时针）   
    
**border**  
必须设置样式，像素。  
 
**margin**  

使用负边距会是文档流发送偏移，不会占据原来的空间