CSS 之定位、背景图片以及字体样式设置总结

（1）页面中的元素一般都是从上而下，自左到右排布，然而有些元素需要对其进行一定的定位操作

position有四个属性值 static 、relative、absolute、fixed

static 默认属性值

relative 相对定位有两种用法

a）相对于元素自身位置偏移一定的距离，但原来所在的位置还会占位。相对于原来的位置，top，left，bottom，right的值可以是百分比也可以是像素。

b）可以通过“父相子绝”即父元素相对定位，子元素绝对定位的方式，对子元素进行样式的设置。

absolute 绝对定位脱离文档流

相对于浏览器窗口左上角进行相对定位，如果最近的父元素有相对定位那就就相对于最近的父元素进行相应的定位，

如果没有就相对于浏览器左上角窗口位置定位

fixed 固定定位脱离文档流

相对于窗口的固定定位一般应用场景是蒙版显示，充满整个屏幕，不让body滚动，代码如下：

position:fixed;
top: 0;
right: 0;
bottom: 0;

left: 0;

（2）背景图片设置

background-image：url(图片地址)；

background-attachment设置背景图片是否滚动 scroll默认值背景固定在元素上，不会随着内容一起滚动；fixed背景固定在视窗上，内容滚动时背景不动

background-repeat设置是否需要平铺

repeat 默认值允许平铺

no-repeat 禁止平铺

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

background-position设置背景图片的位置

属性值：top、bottom、left、right、center也可以通过像素和百分比进行设置

background-size 设置背景图片的大小

background-size: 270px 120px；两个值分别是长和宽一个值则是长和宽一样也可以设置成百分比

container 等比例缩放图片，使其宽度宽度或高度中较大的与容器横向或纵向重合

cover 等比例缩放图片时，使图像至少覆盖容器，有可能超出容器

background:url(图片地址) no-repeat 5px 5px; 第一个5px是距左也可以用center

第二个5px距顶也可以用top/bottom

（3）字体

字体组合方式写法：font:[是否倾斜|是否加粗|是否以小型大写显示]字体大小字体名称

字体的引入

第一步：声明一个字体

@font-face {
font-family: myfont;
src:url('时尚中黑简体.ttf');

}

第二步：使用字体

p{
font:50px myfont,sans-serif;
}

CSS 之定位、背景图片以及字体样式设置总结相关推荐

Python 窗体美化，背景图片，字体样式
背景图片: import tkinterwin=tkinter.Tk() photo=tkinter.PhotoImage(file=r"C:\Users\Desktop\1.gif&quo ...
div背景图片完整填充样式设置---background、background-size、background-attachment
<div>图片</div> <style> div{ background: url(images/images/bg.jpg) no-repeat; b ...
html里如何定位背景图片,Html+Css CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
web——CSS精灵图（背景图、定位背景图片background-position属性）
web--CSS精灵图(背景图.定位背景图片background-position 属性) 一.background-position属性二.实例一.background-position属性例 ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
css怎么分开背景图片,css切背景图片（background-position）
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(url)|none} 3 背景重复 {backgr ...
html背景图片纵向缩小,css怎么把背景图片缩小？
在CSS中,想要缩小背景图片,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性,希望对大家有所帮助. background-s ...
怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...

CSS 之定位、背景图片以及字体样式设置总结

CSS 之定位、背景图片以及字体样式设置总结相关推荐

最新文章

热门文章