CSS基础-2

一、浮动

1.float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（默认值）

2.clear

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素（默认值）

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除

的元素将显示在其下方

3.clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

我们可以向包含元素添加 overflow: auto; ，来解决此问题：

.clearfix {
overflow: auto;
}

4.清除浮动影响的方式

4.1给父级元素单独定义高度（height）

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

4.2在标签结尾处(前)加空div**标签 **clear:both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

4.3父级div定义 伪元素:after 和 zoom

<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮动代码*/
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

4.4 父级div定义overflow:hidden

<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
/*解决代码*/
width: 98%;
overflow: hidden
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px;
width: 98%
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

4.5、父级div定义overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

二、CSS对齐方式

1元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;或margin:0 auto。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配

2文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

3左右对齐

3.1使用定位

我们可以使用 position: absolute; 属性来对齐元素:

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示**😗* 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差

异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是

）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条

预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明

3.2使用浮动

我们也可以使用 float 属性来对齐元素:

.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

4文本垂直居中

1.使用padding

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部底部使用 padding:

.center {
padding: 70px 0;
border: 3px solid green;
}

2.使用行高line-height

line-height和height保持一致即可；

3.使用 position 和 transform

<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>

transform:translate(水平方向移动自身宽度的百分比,垂直方向移动自身高度的百分比)

三、display属性

1.隐藏元素

隐藏一个元素可以通过把 display 属性设置为"none"，或把 visibility 属性设置为"hidden"。但是请注意，这两种方法会产生不同

的结果。

两者的区别在于display：none会脱离文档流 visibility不会

四、伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
property: value;
}

实例：

/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}

伪类选择器和类选择器的权重一样

五、伪元素

伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式

在元素的内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
property: value;
}

常用的伪元素有before after selection

伪元素在调试器里找不到的 权重和元素选择器一样

六、列表

1.不同的列表标记

ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.upper {
list-style-type: upper-roman;
}
ol.lower {
list-style-type: lower-alpha;
}

2.图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

ul.sqpurple {
list-style-image: url('img/sqpurple.gif');
}

3.删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。

请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

• 或
  1. 中添加 margin:0 和 padding:0 ：

ul.reset {
list-style-type: none;
margin: 0;
padding: 0;
}

七、表格

border-collapse 属性设置是否将表格边框折叠为单一边框：

条纹表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color ：

一般用nth-child(2n)表示偶数列 2n+1表示基数列

八、媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度

设备的宽度和高度

方向（平板电脑/手机处于横向还是纵向模式）

分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样

式表。

实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将

位于内容的顶部）：

#leftsidebar { width: 100%; float: none; }
#main { margin-left: 0; }
@media screen and (min-width: 480px) {
#leftsidebar { width: 200px; float: left; }
#main { margin-left: 216px; }
}

九、CSS变量

为了解决多个元素的属性用了一样的值 可以用CSS变量 后期修改非常方便

1.变量的声明

声明变量之前，变量名之前要加上两个连字符（–）

body{
--head-color:#ada5f3;
--foot-color:#da56d4:
}

（一）声明一个局部变量

element {
--main-bg-color: brown;
}

（二）声明一个全局变量

:root {
--global-color: #666;
--pane-padding: 5px 42px;
}

2.变量的使用

（一） var( ) 函数用以读取变量，var**（变量名）**

.box{
--cor:#ddf;
background-color: var(--cor);
width:400px;height:40px;
}

（二） **var()**函数还可以使用第二个参数，表示变量的默认值。如果这个变量不存在，就会使用这个默认值

.box{
--cor:#ddf;
background-color: var(--corlo , red);
width:400px;height:40px;
}