浮动的补充丶文本和字体属性丶background丶定位

最新推荐文章于 2022-03-11 16:53:26 发布
最新推荐文章于 2022-03-11 16:53:26 发布
阅读量1.4k 收藏 1
点赞数
文章标签： php 人工智能
原文链接：https://my.oschina.net/u/4181724/blog/3086277
版权

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=h0habb&title=%E6%B5%AE%E5%8A%A8%E7%9A%84%E8%A1%A5%E5%85%85%E4%B8%B6%E6%96%87%E6%9C%AC%E5%92%8C%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7%E4%B8%B6background%E4%B8%B6%E5%AE%9A%E4%BD%8D

一丶浮动的补充

　　浮动的特性:

　　　　1. 浮动的元素脱标

　　　　2.浮动的元素互相贴靠

　　　　3.浮动的元素有"字围"效果

　　　　4.浮动的元素有收缩的效果

　　　　前提是标准文档流,margin的垂直方向会出现塌陷问题

　　　　如果盒子居中:margin: 0 auto;如果盒子浮动了,margin 0 auto;就不起作用了

　　那我们如何让浮动的盒子居中呢?

　　　　给浮动盒子加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow;hidden;设置该盒子margin: 0 auto;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动盒子居中</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 400px;
                height: 300px;
                background-color: red;
            }
            .main{
                width: 100px;
                overflow: hidden;
                margin: 0 auto;
            }
            .child{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin: 0 auto;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="main">
                <div class="child">
                    
                </div>
            </div>
        </div>
    </body>
</html>
浮动盒子居中

二丶文本属性和字体属性

 　　1.文本对齐

　　　　text-align属性规定元素中的文本的水平对齐方式

　　　　属性值: none | center | left | right | justify

　　2.文本颜色

　　　　color 属性

　　3.文本首行缩进

　　　　text-indent属性规定元素首行缩进的距离,单位建议使用em

　　4.文本修饰

　　　　text-decoration属性规定文本修饰的样式

　　　　属性值;none | underline(下划线) | overline(定义文本上的一条线) | line-through(定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值)

　　5.行高

　　　　line-height就是行高的意思,指的就是一行的高度 

　　6.字体大小

　　　　font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值

　　7.字体粗细

　　　　font-weight表示设置字体的粗细

　　　　属性值: none(默认值,标准粗细) | bold(粗体) | border(更粗) | lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold) | inherit(继承父元素字体的粗细值)

　　8.字体系列

　　　　font-family

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

　　　　如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值.如果都不支持则显示宋体.

　　9.行高

　　　　line-height

　　　　单行文本垂直居中:

　　　　　　行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本.

　　　　多行文本垂直居中: 

　　　　　　行高的高度不能小于字体的大小,不然上下字之间会紧挨一起

　　10.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% “宋体”
字体设置 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            text-decoration: underline;
        }
        div{
            width: 200px;
            height: 240px;
            /*line-height: 200px;*/
            background-color:red;
            /*text-align: right;*/
            /*两端对齐*/
            /*text-align: justify;*/
            /*首行缩进*/
            /*text-indent: 2em;*/
            /*font-size: 14px;*/
            /*text-decoration: inherit;*/
            /*font-weight: 800;*/
            /*font-family: "Microsoft Yahei"*/
            /*font-family: '华文行楷'*/
            font: 12px/240px '华文行楷';

        }
        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div>
        武小猪武小猪
    </div>
    <a href="#">百度一下</a>
</body>
</html>
文本属性和字体属性

 三丶background

　　background-color 属性表示背景颜色

　　background-img :表示设置该元素的背景图片,默认水平和垂直方向都上平铺

　　background-repeat:表示设置该元素平铺的方式

　　　　属性值:   repeat: 默认,背景图像将在垂直方向和水平方向重复

　　　　　　　　repeat-x :  背景图像将在水平方向重复

　　　　　　　　repeat-y : 背景图像将在垂直方向重复

　　　　　　　　no-repeat : 背景图像将仅显示一次.

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

　　给元素设置padding之后,发现padding的区域也会平铺背景图片

　　

　　雪碧图技术(精灵图技术)

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

 

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                /*background-color: rgb(0,255,255);*/
                /*background-color: rgba(0,0,0,.6);*/
                background: #999;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
background

 四丶定位

　　相对定位 

　　　现象和使用:

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

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

　　　特性:

　　　　1.不脱标

　　　　2.形影分离

　　　　3.老家留坑(占着茅房不拉屎,恶心人)

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

　　　用途:

　　　　1.微调元素位置

　　　　2.做绝对定位的参考(父相子绝)绝对定位会说到此内容

　　　参考点:

　　　　自己原来的位置做参考点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
                top: 20px;
                left: 100px;
                /*设置元素的堆叠顺序*/
                z-index: 5;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: relative;
            }
            </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>
相对定位

　　绝对定位

　　　特性:

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

　　　参考点:

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:40px;
            left:0;
        }
        .box3{
            width: 250px;
            height: 200px;
            background-color: blue;
        
        }
    </style>
</head>
<body style="height: 2000px;">

    <!--  -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    
</body>
</html>
绝对定位 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 992px;
            height: 460px;
            background-color: red;
            float: right;
            /*相对定位*/
            position: relative;
        }
        .prev{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /*绝对位置*/
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            left: 0px;


        }
        .next{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /*绝对位置*/
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            right: 0;
        }
    </style>
</head>
<body>
        <div class="father">
            <span class="next">></span>
            <span class="prev"><</span>
        </div>
    
</body>
</html>
父相子绝

 　　如何让一个绝对定位的盒子居中

　　　　left:50%

　　　　margin-left:     宽度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="content.css"> -->
    <!-- <link rel="stylesheet" href="main.css"> -->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;

        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: 0;
        }
        .father{
            width: 100%;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box{
            width: 400px;
            height: 100px;
            background-color: green;
            position: absolute;

            /**/
            left: 50%;
            margin-left: -200px;
        }


    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
    
</body>
</html>
让绝对定位的盒子居中

 

　　固定定位

　　参考点:浏览器的左上角

　　作用:固定导航栏  返回顶部  小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            /*脱离了标准文档流*/

            /*参考点：是以浏览器的左上角*/
            position: fixed;
            top:0;
            left: 0;
            z-index: 10000;

        }
        .active{
            position: relative;

        }
    </style>
</head>
<body>

    <div class="header"></div>

    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>
    <p>alex5</p>
    <p>alex6</p>
    <p>alex7</p>
    <p>alex8</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p class="active">alex6666</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>

    
</body>
</html>
固定定位

　　z-index

　　　　1.z-index值表示谁压着谁,数值大的压盖住数值小的

　　　　2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index

　　　　3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素.

　　　　4.从父现象:父亲怂了,儿子再牛逼也没用

 

本文转载于:https://www.mk2048.com/blog/blog.php?id=h0habb&title=%E6%B5%AE%E5%8A%A8%E7%9A%84%E8%A1%A5%E5%85%85%E4%B8%B6%E6%96%87%E6%9C%AC%E5%92%8C%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7%E4%B8%B6background%E4%B8%B6%E5%AE%9A%E4%BD%8D

转载于:https://my.oschina.net/u/4181724/blog/3086277

chuke5164
关注
CSS元素的浮动与定位综合案例3.pdf
07-10
在CSS中，元素的浮动和定位是两种关键的技术，用于创建复杂的网页布局。在这个名为“蓝色多瑙河”的浪漫式网页布局案例中，它们被巧妙地结合使用以实现3行2列的布局。这个案例源自喻浩的《DIV+CSS网页样式与布局从...
css(3)
weixin_45734493的博客
10-27 117
学习目标 能够说出background相关的几个属性（color、image、repeat、position） 能够使用background设置颜色和图片（color、image） 能够使用background-position设置背景图片的位置（left、center、right） 能够说出元素的三种显示方式（块级元素、行内元素、行内块元素） 能够使用display转换元素的显示方式（disp...
CSS案例之奔跑的北极熊
weixin_45336716的博客
09-02 793
源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
（补充）清除浮动、定位
皮卡丘丘丘~~~
11-08 360
浮动内容添加 清除浮动 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。 清除浮动的方法 clear:both; 额外标签法 在浮动元素末尾添加一个空的标签例如 &lt;div style=”clear:both”&gt;&lt;/div&gt;，或则其他标签br等亦可。 父级添加overflow属性方法 可以给父级添加： overflow为 hidden|au...
css：字体属性参考大全
11-13
定位属性用于控制元素在页面上的位置。 ##### 1. 定位模式（Position） - **语法**：`position: mode;` - **描述**：定义元素的定位模式。 - **值**： - `absolute`: 绝对定位 - `relative`: 相对定位 - `static...
浮动_style_浮动导航栏_css如何浮动_
09-29
总的来说，浮动导航栏是通过CSS的`position`和`float`属性实现的，它可以提供良好的用户体验，使用户在浏览长页面时始终保持导航的可见性。然而，随着CSS布局技术的发展，如Flexbox和Grid，我们有更多的选择来创建...
CSS和JavaScript标签style属性对照表
10-14
**说明**：字体属性用于定义文本的字体、大小、风格、变体和粗细等。 ##### 文本属性（Text Properties） - **CSS属性**：`letter-spacing` - **JavaScript属性**：`letterSpacing` - **CSS属性**：`line-break` ...
css-背景属性
qq_62779007的博客
03-11 297
<!doctype html><html><head><meta charset="utf-8"><title>css-背景属性</title> <style> body{ background-color:pink; /* background-color:red; backgroubd-color:reg(red,gree...
如何利用浮动来使文字围绕图片呢？（56）
weixin_45147894的博客
06-19 621
先给一个大盒子里面装有一个div的盒子和一个p段落 。因为两个都是块元素，所以上下各自占领一行，以标准流进行排列！ 给图片加上宽高和进行浮动 现在文字围在图片旁边了！ 给图片所在盒子加上一个右边距。使其与文字有一定间距，这样看起来更好看一些！ 再给大盒子一个内边距，这样文字 效果就跟好了，再去除掉原来的全局内外边距！ 现在效果就很明显不错的啦！ ...
background:url(image/road.jpg) no-repeat center的基本用法介绍
热门推荐
MiyaWang21的博客
11-24 6万+
进行网页界面排版时，大家会经常用到background属性，写一些背景图片，颜色之类的，今天我先简单的介绍一下background属性的背景图片是什么样的效果。
CSS浮动定位 （十四）
qq_43800904的博客
08-26 397
目录 浮动和定位： 定位的分类（5类）: 1、默认的定位 2、特殊的定位（4中） 浮动定义： 清除浮动 浮动练习： 伪类： 浮动、伪类练习： 相对、绝对、固定定义：（明白偏移的目标） 练习： 浮动和定位： 块级元素：div、h、ul、li、p 独占一行（独占的不是body的一行，而是父容器的一行），不能与其他任何元素并列。 能够设置宽、高。 如果不设置宽度，那么宽度将默认变为父亲的100%。 行内元素：span、a、input、u、i、img...
ccss案例：学成在线网站，浮动和定位的运用
qq_44324230的博客
08-03 693
效果图 。 。 。 。 css * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .w { width: 1200px; margin: auto; } body { background-color: #f3f5f7; } .clearfix:after { content: ""; display: block;
css经典面试题总结
qq_40893035的博客
03-12 265
CSS 并不是面试的重点考察项，这也导致现在国内业界对 CSS 的专注不够，真正精通并专注于 CSS 的团队和人才并不多。因此如果能在 CSS 领域有自己的见解和经验，反而会为相当的加分并脱颖而出。 1 . 盒子模型 （box-sizing） 理论上盒子模型可以分为四种，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box； content-box (W3C 标准盒模型) border-box (IE 盒模型) padding-box (FireFox 曾经
html盒子浮动效果,有关CSS盒子浮动的方法详解
weixin_33212421的博客
06-04 3557
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代...
CSS background设置
LIN的博客
09-19 166
background-image: url(images/1.png); 注 只能用相对地址，而且会复制然后铺满div background-repeat: repeat-x;设置图片如何重复平铺 repeat-x 一行 repeat-y 一列 norepeat 平铺不重复 background-position: left center; left right top bottom c...
css样式 文本属性 布局属性 浮动 定位 页面布局
langdei的博客
08-14 527
1. 选择器优先级进阶 <div id=”item” class=”box”> <p></p> </div> #item p{} .box p{} Id 100 Class 10 标签选择器 1 行间优先级是 1000 计算方式 ： 让每一个选择器对应的值相加 谁的值大谁的优先级高 2...
全面解析CSS字体与样式属性
"这是一份全面的CSS属性指南，涵盖了字体、颜色与背景、文本、方框和分类等各类属性。特别关注了字体属性，包括字体族科、风格、变形、加粗和大小等，旨在提供详尽的CSS设计参考。" 在网页设计中，CSS（层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值