您的位置:首页 > Web前端 > CSS

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

2017-08-06 23:48 966 查看
最近学习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{…}
,写法上面的一些细节在使用中要格外注意。

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



要选中这个结构中的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 继承浮动

这里有一个小心德体会:浮动元素脱离文档流!!但是依然占据正常文本流的文本空间。浮动最开始诞生是为了制造文字环绕图片的效果,后来的运用比较灵活。浮动元素不再占有原始的空间。

浮动元素会变成块状元素。

给个截图有助理解。



4 定位





这里要注意的是:相对定位相对于该元素原来在常规流中的位置。



使用绝对定位和相对定位实现水平、垂直居中。







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



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

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

5 圣杯布局和双飞翼布局

5.1 圣杯布局

关于圣杯布局的由来可以自行搜索,在此不罗列了,圣杯布局主要实现的效果如下图所示:





圣杯布局的基本思路:

首先给父容器整体设置一个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标签包裹起来,以便布局。双飞翼布局暂时在此不做详细说明,后面有时间可以在完善。

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

声明:

以上截图部分来自慕课网的视频,如有侵权,请告知,以便删除。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端