css样式总结

来源：互联网发布：我是歌手有网络直播吗编辑：程序博客网时间：2024/06/05 05:55

一、浮动及清除

1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框。

值

描述

left

元素向左浮动

right

元素向右浮动

none

不浮动(默认)

inherit

继承父类的float属性

2.浮动带来的问题

(1) 不同区域的浮动元素同行贴边；

(2)浮动子元素不能撑开父容器的高度；

(3)浮动子元素的父容器背景无法正常显示；

(4)当行内元素被撑起的宽度加上浮动元素的宽度，大于父元素的宽度时，浮动元素，就会下移一个line-height，直到计算的值小于父元素的宽度时，非浮动元素会跟随其后。例如：

效果如下：

3.浮动的解决：

（1）通过对父级容器设置适合的CSS高度；

（2）通过overflow属性清除浮动；

（3）通过设置clear属性清除浮动。

二、字体相关设置,超链接伪类，背景图片设置

(1)字体大小：font-size以像素为单位设置字体大小、以百分比设置字体大小、变量值（small、larger），单位模式：px、em

(2)行高line-height, 以像素为单位设置每行的高度值、百分比设置行高

(3) 字体类型font-family

(4)超链接伪类

格式：标签名：伪类名{ }

超链接伪类选择：:link、visited、hover、active（定义时候顺序不能变lvha）

link：表示链接还没点击访问过

visited：表示链接已经访问过了

hover：表示鼠标放置在链接上

active：表示鼠标对当前链接激活的时候（鼠标按下，并没有释放）

(5)背景图片设置

background-image属性，取值方式：url(地址)

background-repead属性，取值方式：no-repeat、repeat-x、repeat-y

background-position属性，取值方式1：x坐标 y坐标；取值方式2：left、right、top、bottom、center

三、模型定位(position属性)

1.对当前标签对象进行定位操作，规定元素的定位类型。取值范围：静态（static），相对（relative），绝对（absolute）、固定（fixed）

css四个属性（top、left、right、bottom）只有在设置了position值为relative、absolute、fixed情况下才有效

(1)relative相对定位：position:relative

特点：①通过top、left、bottom、right来设置元素的新位置偏移(相对于当前位置)；

②相对定位的元素并没有脱离标准文档流，对原来标准流中的元素依然受影响（元神出窍）

应用：页面效果微调，配合子元素的绝对定位使用。

（2）absolute绝对定位：position:absolute

特点：①通过top、left、bottom、right来设置元素的新位置偏移；

②相对定位的元素脱离标准文档流

应用：页面内部小盒子内的元素的不正常位置效果体现

(3)fixed固定定位：position:fixed

特点：①通过top、left、bottom、right来设置元素的新位置偏移(相对于浏览器视窗)；

②固对定位的元素脱离标准文档流，不受文档流约束

应用：导航栏冻结、侧边栏回顶部、京东网、广告弹出框

(4)z-index

定义：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index只有在当前元素设置了position的时候才有效。

特性：随父性，即父元素的z-index值，会影响子元素的重叠效果。如果父元素的z-index大，则不管子元素的z-index是多少，都能覆盖其它子元素。

应用：需要体现层层之间的重叠效果；登陆注册半透明覆盖弹出层。

定位参考点的灵活变动

①如果绝对定位盒子外层没有盒子

top：以距离页面顶部具体top长度显示

bottom：以距离当前浏览器底部bottom值显示

②如果绝对定位盒子外层还有盒子，默认相对于浏览器绝对定位偏移；

如果要相对父容器绝对定位，则要遵循如下规则：父元素必须要有定位(绝、相、固）设置

相对定位举例：

<span>我是图片左边的文字</span>

<span>我是图片右边的文字</span>

加上相对定位 span{

position: relative;

bottom:80px;}

固定定位举例

margin:0;

padding:0;

}

body{

height:3000px;

}

.bar{

width:50px;

height:500px;

background-color:blue;

position:fixed;

left:100px;

top:100px;

}

</style>

</head>

<body>

<divclass="bar"></div>

</body>

显示效果

阅读全文

0 1