这次给大家带来关于前端的css基本知识，关于前端的css基本知识的注意事项有哪些，下面就是实战案例，一起来看一下。

css基本知识

 我们先看一个小例子：

    
    
    
1
    
2
    
3

我们可以看到我们在p中加了style,里面有background-color，height等属性，这样就使的原本什么都没有的p添加了背景色高度等。

css的编写

• 在标签上设置style属性：width,height,background.......

• 写在head里面，写一个

•  单独创建一个.css格式的文件，在.css文件中写入样式，在html文件中的head标签中引入该.css文件：

 css中的注释：/**/

选择器使用css

 1.标签选择器：

p{background-color:red; } 

2.class选择器：

.bd{background-color:red; } 

3.id选择器：

#idselect{background-color:red; } 

4.关联选择器（空格）

#idselect p{background-color:red; } 

5.组合选择器：（逗号）

input,p,p{ background-color:red; } 

6.属性选择器：

input[type='text']{ width:100px; height:200px; } 

css中的优先级

    
    
    
    
asdfas

 上面我们设置了一个p有两个class名称，然后先设置了一个color:white,显示的效果如下：

下面我们在.c2的css中把color:black的注释去掉，显示的效果如下：

我们再在

标签中添加：style="color:blue"，那么显示的效果如下：

这就涉及到了css样式的优先级：（就近原则）

　　style--->c2----c1(这里c2,c1的优先级是看在css中谁的样式写在下面，如果上面head标签的style标签中两个位置互换，那么就是c1的优先级大于c2)

常用的css中的样式

 1.边框

默认4个边都加上：

　　 border:1px solid/dotted red (1像素，实线/虚线，红色)：

只加左边和右边：

　　border-left-right:1px solid/dotted red 

 2.height,width,line-height,color,font-size,font-weight:

height,width:高度，宽度

　　height:48px;width:200px     or     height:48px;width:80%（可以用具体的值也可以用百分比）

text-align:center，水平方向居中

line-height行高：

　　如果我们想要把文字垂直居中就可以用这个属性（行高像素==height像素）,即height:48px，line-height:48px，则字体就居中了。

font-size字体大小：font-size:12px;

font-weight字体的样式：100-900,bold(加粗),bolder（更粗），inherit,initial,lighter,normal,unset

color字体颜色；

3.float属性：浮动

如果我们写了2个p,那这2个p就会每个各占一行，如果我们想让一个p在左边占20%，一个p在右边80%，想要两个p在一行对接起来，那就需要用到float

首先看看我们不用float的效果：

p1
p2

 如果我们让这两个p都向左浮动：

p1
p2

 两个就重合在一起，并且一个站20%，一个占80%

如果我改成p1占20%往左浮动，p2占60%往右浮动：那么中间就会空出20%

p1
p2

 现在我们写一个盒子，里面有一些p：

 我们可以发现用了float我们就可以做到类似很多前端页面一块一块的样式，我们最外面的p的高度是随着里面小p不断的增多而增多的。

但是有一个问题，我们可以看到上面有一个红色的线，他是外层p的边框，为什么父p的边框没有了呢，只有一个了呢？这个就是使用float之后会产生的问题。

解决方法：

在父p中的最后加上这么一段：

这样，父p的边框就显现了出来

4.display

首先我们看一段：

p1
span1

现在我们想要让块级标签变成一个行内标签：display:inline

p1
span1

我们想要让span这个行内标签变成块级标签：display:block;

********

行内标签：无法设置高度，宽度，padding,margin

块级标签：可以设置高度，宽度，padding,margin

span1chaolianjei

 我们可以发现一点效果都没有

display:inline-block;

　　具有inline，默认自己有多少占多少；

　　具有block，可以设置高度，宽度，padding,margin

span1chaolianjei

 加了display:inline-block;之后，span就可以设置宽高了：

display:none;让标签消失：

5.padding margin(0 auto)内边距，外边距：

margin:

　　margin:0 auto;上下为0，左右居中

6.position:

• fixed---->固定在页面的某个位置，滚轮滚动，位置也不会变

• absolute---->绝对定位，单用它，滚轮滚动时，位置会改变，要和relative一起使用

• relative

fixed：

我们先看一串代码：

    
    
    
返回顶部
    

现在我们希望的是 “返回顶部” 这个p 固定在浏览器的右下角

返回顶部

 我在style中添加了

position:fixed;bottom:20px;right:20px;

 这样我们就把那个p固定在右下角了。

我们再看一个例子：有的网站，它的菜单栏是一直在浏览器的上面的，即使是滚动条滚动，头部的菜单栏也不会变，这个我们应该怎么做呢：

    
    
    
    
头部
    
内容

 其实只需要加上上面色的代码就可以了，下面的margin-top是为了让pg-body的能够往下来一点，显示出全部内容

 relative+absolute:

我现在有3个p:

    
    
    
p1
    
p2
    
p3

我想要在p1的左下角放一个黑色的小方框， p2的右下角放一个黑色的小方框，p3的左上角放一个黑色的小方框，应该怎么做 ：

    
    
    

        p1        

    

    

        p2        

    

    

        p3        

    

只要relative 和 absolute 相配合，然后设置top,left,right,bottom的值就可以了，这个值可以是正数也可以是负数

还有一个场景：我们点一个按钮，然后就会跳出一个小窗口，这个时候窗口以外的东西就没有办法进行操作了，如：我点击了大模态框，之后跳出了large model，但是灰色的地方是没有办法进行操作的

这就是一个典型的三层模式：本身文本是一层，灰色的遮罩是一层，弹出的框是一层。那我们怎么实现这个呢？

 效果如图所示：下面有一个green的p，然后有一个black的p，只是设置了透明度，最上面有一个居中的白色p

分析：首先我们先说两个新的属性：

opcity:0.6;设置透明度，值为0-1

z-index:9，设置优先级，值越高优先级越大

我们先实现两个p，一个是绿色的，一个是黑色的。这个很简单。下面要再加上第三层。最关键的就是这上面两个属性，如果透明属性没有的话，在做两层的时候，黑色的就会把绿色彻底覆盖住，如果没有优先级属性的话，那么在做第三个p的时候就会不知道谁覆盖了谁。

这里我们还要记录的是居中方法：

position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;

 设置50%，然后用margin返回宽高的一半，这样就能够让一个p居中显示

 7.overflow

 我们设置了一个p的宽度和高度，现在想要在这个p中放入一个图片，那图片有自己的高度和宽度。如果直接发放进去就会超出p的范围显示，那我们怎么办呢？

在style中加入overflow属性：

• hidden：超出的部分隐藏

• auto:超出的部分会给滚动条

8.hover

    
    
    
    

        

            logo
            全部
            42区
            段子
            1024
        
    

    

        

    

 hover当鼠标移动到超链接的时候，就会对hover的css里的属性生效

9.background

background-image:url('image/4.jpg')：背景是一个图片，如果这个p比图片的尺寸还要大的话，图片就会一直重复着放

　　应用场景：渐变色的背景，我们只需要一个很窄的图片，就可以利用这个属性，让整个背景都是这个渐变色的图片

 background-repeat:no-repeat/repeat-x/repeat-y：改属性设置图片是否要重复，水平重复还是垂直重复

background-position:10px 10px 选取一张图上的某一个位置进行显示

　　应用场景：网站有的时候用一张图上存储了很多的图标，要用哪个图标就可以选哪个坐标

页面布局

 一、主站布局：

        

            内容自动居中        

 二、后台管理布局

同样都是三个部分，头部，中间内容，和尾部：

我们先看看中间的变化：

一类是中间内容的菜单和内容都不动，右边内容多的时候出现滚动条

我们用position:fixed做的话应该怎么做呢：

    
    
    
    

    

        
a
        

            
afasdf

							

								
								

									phpshop
									
phpShop 是一个PHP购物车应用软件,其主要目的是提供最简单的购物车,它易于定制成适合你的需求.但需要一些关于HTML, PHP, 和 SQL的基本知识
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
        

    

    

View Code

 我们通过用position:fixed实现了菜单栏和内容栏的固定，然后当内容过多的时候我们就可以用overflow：auto实现添加一个滚动条，从而实现了布局

还有一类是中间内容部分如果多了，我们让左边的菜单跟随滚动条：

    
    
    
    

    

        
a
        

            

                
afasdf
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            

        

    

    

View Code

那和第一类的区别就在于，我们用的是position:absolute进行定位：

postion:absolute这个属性，可以在页面一开始生成的时候进行初始定位，但是随着你滚动滚动条的时候，定位就会改变，随着滚动条一起滚动，所以我们就可以利用这特点进行操作。

如果想要背景也跟着一起的话，可以在用一个p把内容包住，然后在这个p里面设置一个background-color，这样背景颜色就可以跟着内容一起增加。

如果我们要用absolute来实现第一类情况的话，我们也只要在第二类的基础上加上overflow:auto，就可以变回第一种情况了，非常的方便。

当然我们考虑一种情况，如果我们的浏览器不断的缩小，那个我们也要保证我们的内容要正常显示，这个时候就需要左右滚动条，我们就可以设置一下内容p的最小宽度min-width:980px，当小于这个宽度的时候就出现滚动条，就ok了

我们再看看头部的变化：

    
    
    
    
    

        
logo图标
        

            
                @@##@@
            
            

                我的资料
                注销
            
        

        

            
            5
        
        

            
            3
        
    

    

        
a
        

            

                
afasdf
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
                
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
afasdf
立即学习“前端免费学习笔记（深入）”；
            

        

    

    

View Code

 显示的效果图就是如下效果：

需要知道的知识：

关于超链接的：

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
text-decoration:none;/*去掉超链接的下划线*/

关于边框的：

border-radius:50%;/*把边框变成椭圆*/

关于菜单栏的出现消失，不用js的做法：

.pg-header .user .menu2{
    display: none;
}

{
    display:block;
}/*这样做就能够实现，当鼠标放在头像上菜单栏自动出现，当鼠标移开的时候菜单栏自动隐藏*/

 关于菜单栏的图标的：

　　到https://fontawesome.com/icons下载图标包，然后导入css文件，并在网站上寻找相关的图片的html，就可以显示了：

/*导入css文件*/
/*应用图标的html*/

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

flex布局的使用

input复选框checkbox的样式修改

css的自适应布局