css3基础知识+流式布局

2016-08-31 本文已影响15681人 happywho250

css3知识库

Css的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其不支持的属性。

css引入的3种方式

内联式：<div style="color:red">  
嵌入式：<style>样式<style>
外部引入：<link href="xxx.css" rel="stylesheet" type="text/css"/>

css注释

/*注释*/

优先级：内联式>嵌入式>外部式

css的四大特性

继承性：css的某些样式具有继承性，父元素的样式作用于子元素
特殊性：浏览器是根据权值来判断使用哪种css样式的，权值越高优先级越高（标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100）（还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。）
层叠性：当拥有相同权重的时候，后面的样式会覆盖前面的样式应用。
重要性：为默写样式设置最高权值，使用!imporant
p{color:red!important}
p{color:green;}
结果为red
当样式设置了最高权值的时候，层叠性将不再在该样式上起作用

选择器

通用选择器 *{样式}
标签选择器 E{样式}
class选择器 .class名{样式}
ID选择器 #ID名{样式}
多元素的组合选择器
5.1 多元素选择器 E,F{样式} 匹配所有的E,F元素
p,a{background:red;}p,a元素背景都为红色
5.2 后代元素选择器 E F{样式} 匹配所有属于E元素的后代F元素
p a{color:red;}p元素的后代a元素颜色为红色
5.3 子元素选择器 E>F{样式} 匹配所有的E元素的子一代F元素（第一层后代）
p>a{color:red;} a只能属于p的子一代，不能是其他
5.4 毗邻元素选择器 E+F{样式} 匹配紧随E元素之后的一个同级F元素
5.5 同级通用元素选择器 E~F{样式} 匹配E元素之后的所以同级F元素（中间允许有其他元素间隔）
伪类及伪对象选择器
6.1 :link,设置未被访问前的状态
6.2 :hover, 设置鼠标悬停是的状态
6.3 :visited, 设置访问后的状态
6.4 :active, 设置点击是的状态
6.5 :after, 用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。
```
  body:after {  
  content: "The End"; body结束后页面会出现 The End的内容
  display: block;  
  margin-top: 2em;  
  text-align: center;
 }  
```

6.6 :before, 用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。
6.7 :first,设置页面容器第一页使用的样式。仅用于 @page 规则
@page :first { margin: 4cm }
6.8 :first-letter, 设置对象的第一个字符的样式
6.9 :first-child, 设置E的第一个子对象元素
p:first-child{background-color:red;}第一个P标签背景为red.
6.10 :first-line,设置第一行的样式
6.11 E:not(s) 匹配所以不匹配选择符s的元素E
6.12 E:target对页面中的某个target元素指定样式，在用户单击了页面中的链接并且跳转到了target元素才会生效 匹配相关url指定的E元素
<style>
:target{background-color:red};
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a id="one">A部分</a>
<a id="two">B部分</a>
</body>
当单击one时A部分显示红色，当单击two时B部分显红色

结构性伪类选择器
7.1 E:root 匹配文档的根元素。在HTML中，根元素永远是HTML
7.2 E:empty 匹配没有任何子元素（包括text节点）的元素E
7.3 E:last-child 匹配父元素中最后一个E元素
7.4 E:nth-child(n) 匹配父元素中的第n个子元素E
7.5 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
7.6 E:first-of-type 匹配同级兄弟元素中的第一个E元素
7.7 E:only-child 匹配属于父元素中唯一子元素的E
7.8 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素(同种元素只存在一个)
7.9 E:nth-of-type(n) 匹配同类型中第n个同级兄弟元素E
7.10 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
UI元素状态伪类
8.1 E：enable 匹配所有用户界面（form表单）中处于可用状态的元素E
8.2 E：disable 匹配所有用户界面（form表单）中处于不可用状态的E元素
8.3 E：checked 匹配所有用户界面（form表单）中处于选中状态的元素E
8.4 E::selection 匹配E元素中被用户选中或处于高亮状态的部分
子串匹配的属性选择器
9.1 E[att^="val"] 匹配具有att属性、且值以val开头的E元素
9.2 E[attr$="val"]匹配具有att属性、且值以val结尾的E元素
9.3 E[attr*="val"]匹配具有att属性、且值中含有val的E元素
9.4 E[attr]匹配具有attr属性的所以E元素

字符串类库

盒模型

盒子模型的高度和宽度：css内定义的是填充以里的内容范围，一个元素的实际宽度（盒子的宽度）=左边界+左边框+左填充+内容+右填充+右边框+右边界

布局与定位

内联元素：行内元素，与其他元素都在一行上，宽高边距不可设置，元素的宽度就是其包含的图片文字的宽度，不可改变
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块状元素（任何块状元素都具有盒模型）：独占一行，高宽，行高以及边距可以设置，不设置宽度时，为父容器的100%
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联块状元素：同时具备内联元素和块状元素的特性，与其他元素都在同一行，但是宽高，行高，边距可以设置
<img>、<input>
css的三种布局模型：
4.1 流动模型（flow）（默认的布局）：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，以行的形式占据，内联元素都会在所处的包含元素下从左到右水平分布显示。
4.2 浮动模型（float）：使用float，让块状元素并排在一行显示。（浮动框脱离普通的文档流）
4.3 层模型（layer）：类似于对每个图层能够精确定位操作。
4.3.1绝对定位(position absolute)将元素从文档流中脱离出来，然后使用left，top，right，bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位，如果没有，这相对于body元素，即相对与浏览器窗口。（当设置了绝对定位以后，没有定义宽度，宽度由内容决定）
4.3.2相对定位(position relative)相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。（相对定位相对于盒子原来的位置发生偏移，而且原来的盒子的位置保留不动，即偏移前的位置依然存在，不能被其他元素覆盖。）（依旧处于标准的文档流中，随即拥有了偏移属性和Z-index属性）
4.3.3固定定位(position fixed)相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随着浏览器窗口的滚动而变化，始终固定在浏览器窗口的某个固定位置。
各种属性
5.1 display 设置或检索对象是否及如何显示，值为block,none(隐藏且不保留)，inline,inline-block
5.2 float 该属性的值指出了对象是否及如何浮动
5.3 overflow 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容,值为auto，hidden，scroll（超过内容显示滚动条）
5.4 clear 该属性的值指出了不允许有浮动对象的边,值为left,right,both(两边都不允许有浮动元素)
5.5 z-index 检索或设置对象的层叠顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。
5.6 background : background-color || background-image || background-repeat || background-attachment || background-position
5.7 outline : outline-color || outline-style || outline-width 设置或检索对象外的线条轮廓(画在边框外面)
5.8 list-style : list-style-image || list-style-position || list-style-type 列表
5.9 font : font-style || font-variant || font-weight || font-size || line-height || font-family字体
四种颜色设置方式（IE9以下的浏览器不支持RGB和HSL）
6.1 英文命令颜色，color：red
6.2 16进制颜色，#000000(#000)
6.3 RGB颜色，由R(red),G(green),B(blue)三种颜色的比例来配色，最高255，color:rgb(133,45,200)还可以为百分数
6.4 HSL颜色，色相（hue），饱和度(saturability)，亮度(luminance)的模式来声明颜色，HSL模式基于360度的色相环，第一个数代表色相，60度为黄色，120度为绿色，180度为青色，240度为蓝色，300度为洋红色，3600度为红色，第二个数代表饱和度，格式为百分比，第三个数为亮度，格式为从0（全黑）到100%（全白）之间
6.5 HSLA,RGBA与前面用法一致，只是添加了一个介于0（全透明）-1（不透明）的透明度，
6.6 opacity设置透明度（会对整个元素产生影响，内容也会受影响），而hsla和rgba可以只让元素的某些部分透明（如透明背景，文字不收影响）。

单位

deg 角度单位。度。一个圆圈的360等分之一。
em 相对长度单位。相对于当前对象内文本的字体尺寸。
pt 绝对长度单位 1in = 2.54cm = 25.4 mm = 72pt = 6pc
rad 角度单位。弧度。把一个圆圈分成2*PI单位
grad 角度单位。梯度。一个直角的100等分之一。一个圆圈相当于400grad。

流式布局

响应式网页布局（RWD responsive web design），三种技术（弹性网格布局，弹性图片，媒体和媒体查询）：针对任意设备对网页内容进行布局的一种显示机制。
视口：是浏览器窗口的内容区域，不包含工具栏，标签栏，也就是网页实际显示的区域。
屏幕的尺寸：设备的物理显示区域

媒体查询

Css3中的媒体查询：（问题：什么是css媒体查询，如何在css文件中引入媒体查询，如何利用媒体查询来制作响应式网页，如何让移动浏览器像桌面浏览器一样渲染我们的页面
编写页面标签时遵循内容优先的原则，设计时如何保证图片尽可能的精简？）

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成，媒体查询可用于检测的媒体特性有width，和height，color，等，使用媒体查询可以在不改变页面内容情况下，为特定的一些输出设备定制显示效果。
在css2中，通过link标签中的media属性为样式表指定设备类型（如显示屏或者打印机），
<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen-style.css”>表示显示屏时应用的样式。
相对于css2只能问浏览器“你是一块显示屏吗？” 媒体查询可以问的问题要多很多，例如媒体查询还可以问“你是一块纵向的显示屏吗?”
<link rel=”stylesheet” media=”screen and (orientation:portrait)” href=”portrait-screen.css”/>在为一块纵向放置的显示屏时应以该样式。
在前面加上not则会颠倒效果:
<link rel=”stylesheet” media=”not screen and (orientation:portrait)” href=”portrait-screen.css”/>
媒体查询的三种引入方法，
4.1一种是head标签中链接css文件使用媒体查询，
如<link rel=”stylesheet” media=”screen and (orientation:portrait)” href=”portrait-screen.css”/>
4.2 第二种在css样式表中使用媒体查询，
如@media screen and (max-device-width:400px){H1{color:red}}
4.3 使用css的@import url(“phone.css”) screen and (max-width:360px);这段代码会给视口最大宽度在360像素的显示屏设备加载一个名为phone.css的样式表。(注意：使用css的@import方式会增加http请求。会影响加载速度)
5：媒体查询能检测的特性：最常用的是视口宽度(width)和屏幕宽度(device-width)
Width：视口宽度
Height：视口高度
Device-height：屏幕高度
Device-width：屏幕宽度
Orientation：检查设备处于横向还是纵向。
Aspect-ratio:基于视口宽度和高度的比,一个16：9比例的显示屏可以这样定义16/9
Device-aspect-radio:基于设备渲染平面的宽度和高度比值。
Color:每种颜色的位数，例如min-color:16检测设备是否拥有16位颜色
上述特性都可以使用max和min前缀来设定媒体查询范围,
使用媒体查询的最佳方案：
现代浏览器可以智能的忽视与自身不匹配的样式文件，但他却不一定不下载这些文件，因此将不同媒体查询样式保存在独立的文件中没有多大的好处，使用独立的文件反而会增加用于页面渲染的http请求数量，从而导致网页加载变慢。
因此建议在已有的样式表中追加媒体查询样式。

私有前缀及用法：

Css3中的标准尚未被浏览器完全实现，不同浏览器需要添加其独有的前缀字符串，
-ms-border-radius微软浏览器IE
-0-border-radius Opera浏览器
-webkit-border-radius针对webkit内核的浏览器，如Safari和chrome浏览器。
-moz-border-radius针对Firefox浏览器
Border-radius W3C标准

css3多栏布局

可以使用具体设置栏位的宽度或者栏位数量来使内容分布在多列网格中，
通过设置栏位的宽度：#main{column-width:12em},无论视口多大，内容都会分布在宽度为12em的栏位中，栏位的数量有视口大小调整
通过设置栏位的数量：#main{column-count:4}栏位的数量不变，宽度根据视口自动调整。
设置栏位间隙：column-gap:2em;
设置栏位分隔线：column-rule:thin dotted #999；

css3多栏布局完成图片瀑布流效果

    #container{
            /*引用css3时便于浏览器识别需要添加css3的前缀*/
           /* -前缀-column-width:设置列宽，，然后浏览器自动根据设置的列宽  取整列数*/

            -webkit-column-width:207px;/*chrome和Safari浏览器的内核是webkit内核，*/
            -moz-column-width:207px;/*Firefox*/
            -o-column-width:207px;/*opera*/
            -ms-column-width:207px;/*IE*/
            /*-前缀-column-count:设置列数，与上面的作用相同。*/
            -webkit-column-count:6;   
            -moz-column-count:6;
            -o-column-count:6;
            -ms-column-count:6

    }

固定宽度转百分比宽度

    目标元素宽度/上下文元素宽度=百分比宽度。（子元素宽度/被包裹层的宽度）  
    为了保证精确度，结果不要四舍五入，如1.0416666777%

css布局

2列布局
左边一列设置宽高，右边一列设置绝对定位absolute（脱离文档流），利用margin-left来控制与左边的间距

 #content{background:#B0FC94;width:1000px;height:500px;margin:0 auto;position:relative;}  
 #content .sidebar{background:#ADF1B8;width:180px;height:500px;}  
 #content .content_right{background:#8B96FA;position:absolute;top:0;margin-left:200px;height:500px;width:auto;}  
 </style>  
 </head>  
 <body>  
 <div id="header">顶部区域</div>  
 <div id="content">  
 <div class="sidebar">侧边栏</div>  
 <div class="content_right">  
 主题内容区aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 </div>  
 </div>  
 <div id="footer">底部版权区</div>  
 </body>

3列布局
3列都设置浮动
#content{background:gray;width:1300px;height:500px;margin:0 auto;}
#content .sidebar_left{background:red;width:20%;height:500px;float:left;}
#content .content_main{background:green;height:500px;width:50%;margin:0 5%;float:left;}
#content .sidebar_right{background:red;width:20%;height:500px;float:right;}

左侧和右侧设置absolute绝对定位（脱离标准文档流），中间用margin来控制位置
#content{background:gray;width:100%;height:500px;margin:0 auto;position:relative;}
#content .sidebar_left{background:red;width:20%;height:500px;position:absolute;top:0;left:0;}
#content .content_main{background:green;height:500px;margin:0 25%;}
#content .sidebar_right{background:red;width:20%;height:500px;position:absolute;top:0;right:0;}

左边和右边设置浮动，中间设置display：inline-block，行内元素，设置宽高

     .content{background-color:#abcdef;width:1000px;margin: 0 auto;}  
     .one{width:20%;height:200px;float:left;background:red;}  
     .two{width:20%;height:200px;float:right;background:blue;}  
     .three{background-color:green;width:50%;height:200px;display:inline-block;margin:0 5%;}