欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web前端基础(6):CSS(三)

程序员文章站 2022-11-07 11:45:50
1. 定位 定位有三种：相对定位、绝对定位、固定定位 1.1 相对定位 现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right。 特性：1.不脱标 2.形影分离 3.老家留坑 ......

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: 0;

　　 margin: 0;

}

.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;

上一篇： 如何给HTML标签中的文本设置修饰线

下一篇： 鸡蛋大约煮多久能熟？煮鸡蛋你做对了吗？

推荐阅读