前端学习笔记17/08/06——关于CSS学习的一些总结

最新推荐文章于 2024-04-30 23:00:09 发布

PuYi.

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量354

点赞数

分类专栏：学习笔记文章标签：前端

本文链接：https://blog.csdn.net/wupuyi/article/details/76796065

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近学习CSS收获的一些总结。

1、CSS使用方式

之前熟知的CSS使用方法有三种，

内联样式
内部样式
外部样式

其优先级依次为内联样式>内部样式>外部样式。

在本次学习中，学到了另外一种——导入式。导入式的具体使用方法如下：
导入式使用方法
同样是从外部导入CSS文件，但是和link使用上面不同的是，link导入外部样式，会在页面加载的同时加载CSS样式，@import是在读取完HTML文件之后加载的。所以可能在加载慢的时候，@import会出现先加载出一个没有样式的网页。

2、选择器

CSS选择器部分大概学习了6种，

标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器

2.1 写法

在类选择器的使用中，有一个写法，我在之前的应用中可能存在一些误解。比如：当h1标签和p标签同样有class="text"的时候，选中p标签的写法，应当为p.text{…}

又或者，需要选中class="red" 的标签的后代标签a的写法为p.red a{…} ，写法上面的一些细节在使用中要格外注意。

另外，在写法上还有这样一个细节，例如：

CSS例2

要选中这个结构中的li标签，之前我的写法大都是这样的：
.fix li{…}

但是推荐的写法是这样的：
.header .fix li{…}

这种写法在后续的使用过程中我发现，可以提高代码的可维护性。

2.2 伪类选择器

这里主要是链接伪类，如下：

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

链接伪类在书写的时候，又要给顺序要求，

:link>:visited>:hover>:active

以a标签为例，a:hover必须写到a:link和a:visited之后，才有效果，同样的，a:active必须写到a:hover之后，才有效果。

但是，单独的a:hover不受影响。

2.3 优先级

CSS使用方法优先级一般情况上面有说过，但是有一点值得注意，由于浏览器的渲染方式自上而下，因此内部样式和外部样式优先级有时候还取决于<style></style>标签和<link></link>标签的先后顺序。同样在最后被定义的优先级最高。

这里提一下根据权值判断优先级，如果在同一样式表中，权值相同的情况下，按照离被设置元素越近优先级越高的就近原则处理。在权值不同的情况下，根据权值判断，权值高优先级就高。

选择器的权值为：

选择器类型	权值
通配符选择器	0
标签选择器	1
类选择器和伪类	10
ID选择器	100
行内样式	权值为1000

例如：#header div.nav ul{…}

根据上表：
2个标签选择器 id:1 class:1，1*2=2
1个类选择器 1*10
1个ID选择器 1*100
权值为 2+10+100=112

另外通过添加!important规则，调整样式规则的优先级。如：
div{color: red !important;}

3 浮动

float有四个参数

float：left 左浮动
float：right 右浮动
float：none 不浮动
float：inherit 继承浮动

这里有一个小心德体会：浮动元素脱离文档流！！但是依然占据正常文本流的文本空间。浮动最开始诞生是为了制造文字环绕图片的效果，后来的运用比较灵活。浮动元素不再占有原始的空间。
浮动元素会变成块状元素。
给个截图有助理解。
css浮动

4 定位

自然模型
相对定位模型
这里要注意的是：相对定位相对于该元素原来在常规流中的位置。
绝对定位模型
使用绝对定位和相对定位实现水平、垂直居中。

固定定位相对于视口，绝对定位默认相对于body，或者最近的定位的父元素。

position：sticky磁贴定位就比较有意思了，可以说是固定定位的升级版。现在很多网站的导航都会用到。

可以用来给导航条上面添加一个banner图片，然后当导航滚动到顶部的时候，将导航条固定到顶部。

5 圣杯布局和双飞翼布局

5.1 圣杯布局

关于圣杯布局的由来可以自行搜索，在此不罗列了，圣杯布局主要实现的效果如下图所示：
圣杯布局要求
圣杯布局要求2
圣杯布局的基本思路：
首先给父容器整体设置一个padding值，上下为0，左右为左侧和右侧内容的宽度。
其次，中间部分先渲染，也就是中间部分的代码要写在左右两侧代码之前。中间部分宽度为100%，为父容器宽度。
左中右相应设置为相对定位，且左浮动。此时，左右部分会被挤到下方去。
首先对左边部分设置宽度，为父容器padding-left的值，然后对左部分的margin值进行设置。
margin-left: -100%;
在元素浮动的情况下，负边界值会导致div上移，-100%使该元素移动到中间内容部分的最左侧。
对右边部分设置宽度类似于左边部分，宽度为父容器padding-right的值，然后对margin值进行设置。此时margin-left的值与该部分元素宽度相同即可。
我的理解为，当他负出当前视口的时候，元素会上移到上一个元素的最右边。对于左边而言，margin：-100%就将该元素移动到了最左边，这个时候设置相对定位的left值，即可实现布局。具体可参考下面代码理解。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>圣杯布局测试</title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin: 0;
        padding: 0;
    }
    body{
        min-width: 900px;
    }
    /*此处写代码*/
    .nav{
        height: 100px;
        line-height: 100px;
        background-color: black;
    }
    .nav img{
        display: block;
        float: left;
    }
    .nav ul li{
        float: right;
        color: #fff;
        margin-right: 50px;
        list-style-type: none;
        font-size: 20px;
    }
    .nav li:hover{
        color: orange;
        cursor: pointer;
    }
    .content{
        padding:0 220px 0 200px;
    }
    .footer{
        width: 100%;
        background-color: black;
        height: 100px;
        line-height: 100px;
        color: #fff;
    }
    .footer li{
        float: left;
        list-style-type: none;
        width:100px;
    }
    .footercon{
        margin:0 auto;
        width: 600px;
    }
    .middle,
    .left,
    .right{

        position: relative;
        float: left;
        min-height: 600px;
    }
    .middle{
        width:100%;
        background-color: #FFC0CB;
    }
    .left{
        width: 200px;
        background-color: #FFEFDB;
        margin-left: -100%;
        left: -200px;
    }
    .right{
        width: 220px;
        background-color: #ADD8E6;
        margin-left: -220px;
        right: -220px;
    }
    .middle img{
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
     <div class="nav">
         <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
         <ul>
             <li>手记</li>
             <li>猿问</li>
             <li>实战</li>
             <li>职业路径</li>
             <li>课程</li>
         </ul>
     </div>
  <div class="content">
        <div class="middle">
            <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="tu1">
        </div>
        <div class="left">

        </div>
        <div class="right">

        </div>
        <div style="clear:both;"></div>
  </div>
  <div class="footer">
      <div class="footercon">
          <ul>
          <li>网站首页</li>
          <li>企业合作</li>
          <li>人才招聘</li>
          <li>联系我们</li>
          <li>常见问题</li>
          <li>友情链接</li>
         </ul>
         <div style="clear:both;"></div>
      </div>

  </div>
</body>
</html>