系统学习——css

系统管理员 2021-01-29 08:43 597阅读 0赞

1、css加载过程：浏览器对多个样式来源进行叠加，把各个零散的整合成一个整体，让后者覆盖前者（！important有最高执行权）

浏览器加载html------->dom树（无样式变化）

浏览器加载css--------->渲染视图样式

css5个来源：浏览器默认样式（最低）、浏览器用户自定义样式、`<link>`引用样式、`<style>`内部样式、`<a style="">`属性样式（最高）；

2、css与html如何结合：选择器
````
!important  >  <a style="">  >  id  >  class  >  tag  >  \*   
````
　　标签选择器（\*选择器级别优先级最低）

属性选择器（id和class都是属性，特殊的属性）：

1）只通过属性名选择：img\[title\]\{\}

2）通过属性名和属性值选择：input\[type="text"\]\{\}

伪类：

UI伪类：link、hover、active、visited、focus、target

结构化伪类：nth-child（even）、nth-child（odd）等

伪元素：可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式

：before、：after

多标签选择器一般和html上下文有关，它有以下集中分类：

1）选择一个祖先的所有子孙节点，例如 div p\{…\}

2）选择一个父元素的所有直属节点，例如 div > p\{…\}

3）选择某一个元素紧挨着的兄弟节点，例如 li + li\{…\}

4）选择某一个元素的所有同胞节点，例如 span ~ a\{…\}

特指度：css选择器表达式的重要程度，I-C-E公式；I(id 加100)、C(class 加10)、E(element 加1)；!important优先级最高；\*最低；

简版规则：包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；不同选择器的特指度比较时，不区分加载的顺序；设置的样式高于继承的样式，不用考虑特指度

3、页面呈现：

包裹性：宽度根据内容来定（`<table>`和`<div>`在容器尺寸上最大区别是：table具有“包裹性”）；而提到“包裹性”，又不得不让我想到float和absolute

文字：设置字体、字号、加粗、背景等；

tips：使用相对值；

块：盒子模型、浮动、定位、display、背景、字体等；

盒子模型：content、padding、border、margin；

tips：平时设置宽度就是content宽度；包裹内容情况下（内容的宽度按照内容计算，盒子的宽度再加上padding，border，margin），display=table；

盒子宽度（不包括margin），box-sizing=border-box；纵向margin是会重叠的，大的会把小的“吃掉”；

float：为了“文字环绕效果”（一个图片一段文字）；float会有破坏性（破坏了父标签的原本结构，被设置了float的元素会脱离文档流）;float会有“包裹性”；

清空格（根本原因是由于float会导致节点脱离文档流结构）；float布局网页；

清楚float：

1）为父元素添加overfloaw：hidden；

2）浮动父元素；

3）在所有浮动元素下方添加clear：both的元素；

4)定义clearfix类，对float元素的父元素应用这一样式；

.clearfix:after{
       　　　　　　 content: "";
        　　　　　　display: table;
        　　　　　　clear: both;
    　　　　　　}
    　　　　　　.clearfix{
       　　　　　　 *zoom: 1;      /* 兼容IE低版本*/
    　　　　　　}

display：

table：具有包裹性（宽度根据内容而定），也是块；

table-cell：多列布局；与`float:left`或是`position:absolute`属性尽量不用同用。设置了`display:table-cell`的元素对宽度高度敏感，对`margin`值无反应，响应`padding`属性

inline：“流”，宽度和高度都是auto；

转成“块”元素------>**对inline****元素设置float/对inline元素设置position:absolute、fixed/display:block**

**　　　　**block:盒子模型；

inline-block：外部看来是“流”，但是自身确实一个“块”；能被父容器居中、能设置高度宽度和margin、不会占一整行

position：static/relative/absolute/fixed

static：（静态定位）是默认值，即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样；

relative：相对定位（相对于自身位置），会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化，relative会产生一个新的定位上下文（子元素有absolute定位）；

absolute：脱离了文档结构，会产生破坏性；具有“包裹性”；具有“跟随性”；会悬浮在页面上方；设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位；若想要元素A紧跟在元素B的上方，可通过设置元素B为absolute，然后调整B的margin值来确定（会使inline元素被“块”化，会使得元素已有的float失效）

fixed：根据浏览器确定位置（有“破坏性“）；

4、布局：

三列布局

bootstrapt栅格布局

百度首页布局

微博布局

人人网布局

瀑布流布局

5、文字垂直水平居中：
````
　　<style>

.single_valign{  
　　　　width: 100px;  
　　　　height: 50px;  
　　　　line-height: 50px;  
　　　　overflow: hidden;  
　　}  
　　.more_valign1{  
　　　　padding: 20px 0;  
　　}  
　　.more_valign2{  
　　　　display: table-cell;  
　　　　width: 200px;  
　　　　height: 500px;  
　　　　vertical-align: middle;  
　　}  
　　.more_valign2 span{  
　　　　display: block;  
　　}

</style>

<p class="single_valign">单行垂直居中</p>      
　　<p class="more_valign1">  
　　　　多行垂直居中，多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中  
　　</p>  
　　<p class="more_valign2">  
　　　　<span>多行垂直居中，多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中多行垂直居中</span>  
　　</p>
````
图片垂直居中：

使用background这个属性

````
.pic_list li{  
　　list-style: none;  
　　float: left;  
　　width: 200px;  
　　height: 200px;  
　　border: 1px solid blue;  
　　margin: 20px 30px;  
　　padding: 20px 10px;  
}  
.pic_list li img{  
　　width: 100%;  
　　height: 100%;  
}

<ul class="pic_list">  
　　<li>  
　　　　<img style="background: url(img/wheat-c.png) center no-repeat;"/>  
　　</li>  
　　<li>  
　　　　<img style="background: url(img/wheat_login_top.png) center no-repeat;"/>  
　　</li>  
</ul>
````

使用display：table-cell这个属性，但是这个属性不支持margin，所以若想添加margin属性，还需要在li外面再包裹一层
````
.pic_list1 li{  
　　list-style: none;  
　　display: table-cell;  
　　width: 200px;  
　　height: 200px;  
　　border: 1px solid blue;  
　　margin: 20px 30px;  
　　padding: 20px 10px;  
　　vertical-align: middle;  
}  
.pic_list1 li img{  
　　display: block;  
　　width: 100%;  
　　height: 100%;  
}

<ul class="pic_list1">  
　　<li>  
　　　　<img style="background: url(img/wheat-c.png) center no-repeat;"/>  
　　</li>  
　　<li>  
　　　　<img style="background: url(img/wheat_login_top.png) center no-repeat;"/>  
　　</li>  
</ul>
````