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

来源：互联网发布：众划算在淘宝算违规吗编辑：程序博客网时间：2024/06/06 16:32

最近学习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>

5.2 双飞翼布局

双飞翼布局算是改良以后的圣杯布局，这里面不需要用到定位，只需要浮动和负边距就可实现。
不同的是，双飞翼布局，需要把中间部分用一个div标签包裹起来，以便布局。双飞翼布局暂时在此不做详细说明，后面有时间可以在完善。

前端学习的路对我来说任重道远，这些总结很大程度上是针对我过去所学的查漏补缺，如果阅读的时候发现有哪些不对的地方，还希望亲们能告诉我，以便改正。谢谢。^_^

声明：

以上截图部分来自慕课网的视频，如有侵权，请告知，以便删除。

阅读全文

0 0