1. 定位

定位有三种：相对定位、绝对定位、固定定位

1.1 相对定位

现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right。

特性：1.不脱标  2.形影分离  3.老家留坑

所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：

1.微调元素位置

2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

1.2 绝对定位

特性：1.脱标  2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点：

一、单独一个绝对定位的盒子

1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点。

3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点。

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding。

作用：页面布局常见的“父相子绝”，一定要会！

绝对定位中的居中：

*{

　　            padding:;

　　            margin:;

        }

        .box{

　　            width: 100%;

　　            height: 69px;

　　            background: #000;

        }

        .box .c{

            　　width: 960px;

　　            height: 69px;

　　            background-color: pink;

　　            /*margin: 0 auto;*/

　　            position: relative;

　　            left: 50%;

　　            margin-left: -480px;

　　            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/

        }

1.3 固定定位

固定当前的元素不会随着页面滚动而滚动

特性: 1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

2. 文本属性和字体属性

2.1 文本属性

属性

描述

属性值

说明

text-align

文本对齐方式

none

center

left

right

justify

color

文本颜色

text-indent

首行缩进，单位建议em

text-decoration

规定文本修饰的样式

none

underline

overline

line-through

inherit

默认

下划线

定义文本上的一条线

定义穿过文本下的一条线

继承父元素text-decoration属性的值

line-height

行高

针对单行文本垂直居中

公式：行高=盒子高度，

使文本垂直居中，只适用单行文本。

针对多行文本垂直居中

行高不能小于字体，不然字会紧挨一起。

text-shadow

阴影

5px 5px 5px #FF0000

水平方向偏移量

垂直方向偏移量

模糊度

阴影颜色

text-overflow

文字溢出

clip

ellipsis

修剪文本

显示省略号代表被修剪文本

white-space

处理元素内的空白

normal

pre

nowrap

pre-wrap

pre-line

inherit

默认。空白被浏览器忽略。

空白会被浏览器保留

文本不换行，直到遇到 <br>

保留空白符序列，但正常地进行换行

合并空白符序列，但是保留换行符

继承父元素 white-space 属性的值

文字溢出：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>text-overflow</title>

    <style type="text/css">

        .div0 {

            width: 300px;

            border: 1px solid darkblue;

        }

        .div1 {

            width: 300px;

            border: 1px solid red;

            /*强制在一行内显示*/

            white-space: nowrap;

            /*超出部分隐藏*/

            overflow: hidden;

        }

        .div2 {

            width: 300px;

            border: 1px solid black;

            /*强制在一行内显示*/

            white-space: nowrap;

            /*超出部分隐藏*/

            overflow: hidden;

            /*修剪超出的文本*/

            text-overflow: clip;

        }

        .div3 {

            width: 300px;

            border: 1px solid chocolate;

            /*强制在一行内显示*/

            white-space: nowrap;

            /*超出部分隐藏*/

            overflow: hidden;

            /*显示省略符号来代表被修剪的文本*/

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>

</body>

</html>

2.2 字体属性

属性

描述

属性值

说明

font-size

字体大小

font-weight

字体粗细

none

bold

border

lighter

100~900

inherit

默认值，标准粗细

粗体

更粗

更细

值，400=normal，700=bold

继承父元素字体的粗细值

font-family

字体系列

"Microsoft Yahei","微软雅黑", "Arial", sans-serif

浏览器使用它可识别的第一个值

使用font-family注意几点：

1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，

比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，

那么就会变成宋体

页面中，中文我们只使用： 微软雅黑、宋体、黑体。

如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。

就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，

没有安装微软雅黑字体，那么就是宋体：

font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，

就自动的变为后面的中文字体：

font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体，都有英语别名，

我们也要知道： 微软雅黑的英语别名：

font-family: "Microsoft YaHei";

宋体的英语别名： font-family: "SimSun";

font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字号的百分之多少。

一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;

反过来，比如： font:16px/48px “宋体”;

等价于 font:16px/300% “宋体”

3. background

给元素设置padding之后，发现padding的区域背景和content部分的一致。

3.1 background-color —— 背景颜色

设置背景色：

css:

   <style>

       .demo{

           width: 50px;

           height: 100px;

           background-color: greenyellow;

       }

    </style>

html:

<body>

<div class="demo"></div>

</body>

3.2 background-image —— 背景图片

设置背景图片：

css:

     <style>

       .demo{

           width: 2000px;

           height: 1500px;

           background-image: url('img/1.jpg');

       }

    </style>

html:

    <body>

    <div class="demo"></div>

    </body>

那么发现默认的背景图片，水平方向和垂直方向都平铺。

背景图片相关配置：

background-repeat：设置背景图像的平铺方式

repeat

repeat-x

repeat-y

no-repeate

inherit

默认。背景图像将在垂直方向和水平方向重复

背景图像将在水平方向重复

背景图像将在垂直方向重复

背景图像将仅显示一次

规定应该从父元素继承 background-repeat 属性的设置

background-position：设置背景图像的起始位置

垂直位置 水平位置

可以从两个纬度上设定关键词：上中下 左中右

垂直位置：top center bottom

水平位置：left center right

如仅规定了一个关键词，那么第二个值将是"center"。

默认值：0 0；

这两个值必须挨在一起。

background-attachment：设置固定的背景图像

scroll

fixed

inherit

默认值。背景图像会随着页面其余部分的滚动而移动。

当页面的其余部分滚动时，背景图像不会移动。

规定应该从父元素继承 background-attachment 属性的设置。

3.3 background属性的简写

background：#ffffff url('1.png') no-repeat right top;

Web前端基础(6):CSS(三)的更多相关文章

  1. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  2. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  3. Web前端基础——jQuery（三）

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...

  4. web前端基础——初识CSS

    1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...

  5. web前端基础知识-（三）JavaScript基本操作

    JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...

  6. Web前端基础(3):HTML(三)

    1. body中的相关标签 1.1 表格标签:table.tr.td HTML表格由<table>标签以及一个或多个<tr>.<th>或<td>标签组成 ...

  7. Web前端基础(9):JavaScript(三)

    1. 常用内置对象 所谓内置对象就是ECMAScript提供出来的一些对象,我们知道对象都是有相应的属性和方法. 1.1 数组Array 1.1.1 数组的创建方式 字面量方式创建(推荐大家使用这种方 ...

  8. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  9. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

随机推荐

  1. ArrayList 与数组的“纠缠不清”的暧昧

    目录 前言 正话(个人的见解,有误请多指教) 惯例先明白它是什么? 那么它有什么用呢? 怎么用 前言 能不能有一种数组可以在删除掉某些元素自动缩小就好了.可是话说哪里学的Java?数组能删除元素吗?今 ...

  2. Springboot关于tomcat容器配置、三大组件配置、拦截器配置

    原文地址:http://www.javayihao.top/detail/172 1.tomcat配置 Springboot默认使用的就是嵌入式servlet容器即tomcat,对于web项目,如果使 ...

  3. Hyperledger Fabric相关文件解析

    1相关文件说明 这一部分涉及相关配置文件的解析, 网络的启动涉及到多个文件,本文按以下顺序进行分析: . ├── base │   ├── docker-compose-base.yaml #1 │  ...

  4. Java 添加Word页眉、页脚

    本篇文章将介绍通过java程序来添加Word页眉页脚的方法.鉴于在不同文档中,对页眉页脚的操作要求不同,文章将分别从以下几种情况来阐述: 1.添加页眉页脚 添加图片到页眉 添加文本到页眉 添加页码 2 ...

  5. ZooKeeper（六）：watch机制的原理与实现

    因为ZK有watch机制,可以随时发现一些数据的变化,从而达到数据的及时性. ZK的所有读操作都可以设置watch监视点: getData, getChildren, exists. 写操作则是不能设 ...

  6. 中文版 Apple 官方 Swift 教程《The Swift Programming Language》

    简介 欢迎使用 Swift 关于 Swift 版本兼容性 Swift 初见 Swift 版本历史记录 Swift 教程 基础部分 基本运算符 字符串和字符 集合类型 控制流 函数 闭包 枚举 类和结构 ...

  7. tomcat7控制台日志中文乱码

    windows电脑 idea启动Tomcat调试程序时,Tomcat控制台输出里,中文是乱码. 解决办法: 修改Tomcat/bin/catalina.bat文件: set JAVA_OPTS= 的内 ...

  8. Linux：搭建samba服务器

    samba服务器的搭建 修改防火墙设置 firewall-cmd --permanent --add-service=samba //设置防火墙 firewall-cmd --reload //重新加 ...

  9. Linxu：进程的管理与进程的延迟性&周期性调度

    进程的延迟与周期调度 进程的概念 进程:开始执行但是还没有结束的程序的实例 程序:包含可执行代码的文件 进程由程序产生,是一个运行着的.要占系统资源的程序,进程不等于程序. 进程分为:交互进程.批处理 ...

  10. TensorFlow从1到2（十二）生成对抗网络GAN和图片自动生成

    生成对抗网络的概念 上一篇中介绍的VAE自动编码器具备了一定程度的创造特征,能够"无中生有"的由一组随机数向量生成手写字符的图片. 这个"创造能力"我们在模型中 ...