CSS3-2

最新推荐文章于 2024-04-27 17:15:07 发布

Cloudceky

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量402

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/cloudceky/article/details/73887610

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 标准文档流

1.1 当浏览器解析网页的时候，遵循从从上到下，从左到右的顺序来进行解析；
1.2 块级元素和行内元素的特性：如果元素一旦离开了标准文档流，那么这些特性将不会存在；
1.3 空白折叠，例如：来编辑器中有多个空格，但显示的只有一个；
1.4 当不同元素的高不相同时，则其底边对其；
1.5 单词一旦结束并且到达了边界将自动换行；
1.6 如果单词始终没有空格来表示单词结束，那么单词不会换行；
Tip: 元素脱离标准文档流的方式：
(1)浮动（float）；
(2)定位（position）
标准文本流：主要针对网页中的文字（a标签和img也会遵循文本流的规则来解析）
标准文档流：主要针对的是标签

2. 浮动

float: left/right

浮动的特点：

脱离标准文档流 (脱标)，元素一旦脱离标准文档流，后面的元素
会占据浮动元素原本的位置，元素一旦浮动脱标，那么就不必遵守文档流中的块级元素和行内元素的特性。
元素浮动，会脱离文档流，但是不会脱离文本流。所以会产生字围效果。
相互贴靠

浮动带来的影响：

能够让浮动之后的元素布局产生混乱
子元素浮动会对父元素产生影响

清除浮动带来的影响：

给浮动的外层父元素添加高度（不推荐）
overflow:hidden （溢出 hidden 隐藏）
clear:both 清除浮动带来的影响
隔墙法：外墙法内墙法(不仅仅可以清除浮动还可以给父元素以高度)

3. 行高和字号

line-height行高

font-size:字体大小
eg:
font-size:20px;

文字垂直居中：
行高=盒子的高度
(盒子高度-总行高 ) /2 = padding-top
盒子高度 - padding-top = 新的盒子的高度

多行文字垂直居中

font 字体

font:14px/30px “KaiTi”;
上面的代码等同于下面的三句代码：
font-size:14px; 字体大小
line-height:30px; 行高
font-family:”KaiTi”; 字体族科
font-family:”KaiTi”, “”, “”, “” (防止有些浏览器无法解析字体)

4.超链接的美化 — 伪类

:link 未被访问的链接时的状态

:visited 已访问的链接时的状态

:hover 鼠标悬浮到链接上时的状态

:active 鼠标点击链接时的状态

在进行链接美化时，其顺序不能颠倒，但可以不写

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    a {
        font-size: 100px;
    }
    /*a:link {
        color: gray;
    }

    a:visited {
        color: green;
    }*/

    a:hover {
        color: pink;
    }

    /*a:active {
        color: red;
    }*/
</style>
</head>
<body>
    <a href="http://www.yandex.com">yandex</a>
</body>
</html>

Cloudceky

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-2

1. 标准文档流1.1 当浏览器解析网页的时候，遵循从从上到下，从左到右的顺序来进行解析； 1.2 块级元素和行内元素的特性：如果元素一旦离开了标准文档流，那么这些特性将不会存在； 1.3 空白折叠，例如：来编辑器中有多个空格，但显示的只有一个； 1.4 当不同元素的高不相同时，则其底边对其； 1.5 单词一旦结束并且到达了边界将自动换行； 1.6 如果单词始终没有空格来表示单词结束
复制链接

扫一扫