CSS快速入门（四）

浮动

float属性

用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性

属性值	描述
none	默认值，元素不浮动
left	元素左浮动
right	元素右浮动

clear属性

用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方

属性值	描述
none	默认值，元素不浮动
left	清除左浮动
right	清除右浮动
both	清除左右两侧浮动

浮动解决的问题及其影响

浮动可以使块级标签居于一行，以及可以实现文字环绕图片的效果等，因为浮动顾名思义，漂浮起来，并不是二维的画面了，对比浮动前是三维的画面；
浮动也有负面影响，会造成父标签的塌陷；

父标签塌陷

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷</title>

    <style>

        body {

			/*与边框对其*/

            margin: 0;

        }

        #d1 {

            /*上下左右一致边框 指定边框颜色*/

            border: 3px solid black;

        }

        #d2 {

            /*高度*/

            height: 100px;

            /*宽度*/

            width: 100px;

            /*背景颜色*/

            background-color: red;

            /*向左浮动*/

            float: left;

        }

        #d3 {

            /*高度*/

            height: 100px;

            /*宽度*/

            width: 100px;

            /*背景颜色*/

            background-color: green;

            /*向左浮动*/

            float: left;

        }

    </style>

</head>

<body>

<div id="d1">

    <div id="d2">A</div>

    <div id="d3">B</div>

</div>

</body>

</html>

解决父标签塌陷的方法

写一个同比的块级标签后台撑场面（不可取）

#d4 {

	/*高度*/

	height: 100px;

}

使用clear属性清除浮动（可以使用）

#d4 {

/*该标签的左边(地面和空中)不能有浮动元素*/

clear: left;

通用解决策略（非常推荐）：

在写html页面之前 先提前写好处理浮动带来的影响的 css代码

        .clearfix:after {

            /*空的内容独占一行*/

            content: '';

            display: block;

            /*左右两侧都不能有浮动*/

            clear: both;

        }

之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可

ps：浏览器默认都是文本优先展示

浮动案例

<style>

    .layout {

        width: 120px;

        height: 300px;

        margin: 10px;

        background-color: cadetblue;

        float: left;

    }

    .content {

        width: 340px;

        height: 300px;

        margin: 10px;

        background-color: powderblue;

        float: left;

    }

    footer {

        width: 500px;

        height: 40px;

        background-color: darkseagreen;

	}

</style>

<main>

    <section class="layout flex-center">侧边栏</section>

    <section class="content flex-center">内容</section>

</main>

<footer></footer>

<!--

在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开

main后的footer元素在页面布局时无法在main后正常显示（如下图）

-->

section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方

/* 清除左右两侧浮动 */

footer {

	clear: both;

}

/* 或清除左侧浮动*/

footer {

	clear: left;

}

定位

什么是脱离文档流

观察标签位置改变之后，原来的位置是否会空出来，如果空出来了被其他标签自动占有，那么表示是脱离文档流否则不脱离；

脱离文档流	不脱离文档流
浮动、绝对定位、固定定位	相对定位

定位的两种方法

关键字position
位置关键字left、right、top、bottom

position定位

position属性用于指定元素的定位类型，属性值可为

static（默认定位）：所有的标签默认都是静态定位既不能改变位置
relative（相对定位）：相对标签原来的位置做定位
absolute（绝对定位）相对已经定位过的父标签做定位(没有则参考body标签)，参考小米官网导航条内购物车
fixed（固定定位）：相对浏览器窗口做定位，固定不动，参考小米官网右边回到顶部

static定位

页面上的每个盒子从上到下、从左到右依次排列的布局

<div class="box-container">

	<div class="box1">box1</div>

	<div class="box2">box2</div>

</div>

relative定位

相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变

上述static定位示例代码中，将box1设置以下属性，元素会相对于自身原始位置向右偏移20px，向下偏移50px

 .box1 {

    	position: relative;

    	top: 50px;

    	left: 20px;

    }

absolute定位

元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流

上述static定位示例代码啊中，将box2以及其父级元素box-container设置如下属性
box2元素相对于relative定位的box-container向右偏移25px，向下偏移30px

.box-container {

	position: relative;

}

.box2 {

	position: absolute;

	top: 30px;

	left: 25px;

}

fixed定位

相对于浏览器窗口进行定位，元素脱离文档流

常用于顶部导航栏、顶部搜索框、侧边联系客服等板块

下面上一个综合案例

overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

溢出问题

解决办法

/*默认值*/

div {

            width: 100px;

            height: 100px;

            border: 3px solid red;

            overflow: visible;

        }

div {

            width: 100px;

            height: 100px;

            border: 3px solid red;

            overflow: hidden;

        }

div {

            width: 100px;

            height: 100px;

            border: 3px solid red;

            overflow: scroll;

        }

div {

            width: 100px;

            height: 100px;

            border: 3px solid red;

            overflow: auto;

        }

ps:下满的综合案例会有解决头像溢出的办法

层级属性z-index

用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效，数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

通俗理解为，’三明治结构‘，浏览器平面并不是二维坐标的而是三维坐标；

z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素！

将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方

.box1 { z-index: 1; }

.box2 { z-index: 0; }

透明度的设置

rbga（0，0，0，0.5）：这里的0.5只影响颜色透明度
opacity:0.5：这里的0.5影响颜色和字体透明度

.color1{

            background-color: rgba(124,124,124,0.5);

        }

        .color2{

            background-color: rgb(124,124,124);

            opacity:0.5

        }

<div class="color1">我是块1</div>

<br>

<div class="color2">我是块2</div>

综合案例

设计一个简易版本的博客园首页

<!--首页框架搭建-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>博客园首页设计</title>

    <link rel="stylesheet" href="博客园首页样式.css">

</head>

<body>

<main>

    <!-- 左侧菜单栏 -->

    <div class="layout flex-center">

        <!--头像-->

        <div class="img">

            <img src="https://img0.baidu.com/it/u=3608430476,1945954109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=494" >

        </div>

        <!-- 简介 -->

        <div class="total-info">

            <div id="info1"><span >HammerZe</span></div>

            <div id="info2"><span >Don't you stop running and don't you ever look behind you.</span></div>

        </div>

        <!-- 公众号链接  -->

        <div class="public-account">

            <ul>

                <li><a href="#">Github</a></li>

            </ul>

            <ul>

                <li><a href="#">公众号</a></li>

            </ul>

            <ul>

                <li><a href="#">哔哩哔哩</a></li>

            </ul>

        </div>

        <!-- 链接  -->

        <div class="class-link">

            <div id="link1"><span><a href="#" target="_blank">#Python</a></span></div>

            <div id="link2"><span><a href="#" target="_blank">#Java</a></span></div>

            <div id="link3"><span><a href="#" target="_blank">#Golang</a></span></div>

        </div>

        <div class="banquan"><p>Hammer copyright&copy;</p></div>

    </div>

    <!--右边菜单栏-->

    <div class="content flex-center">

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

        <div class="content-son">

            <div class="title" >

            <span class="t1">论开车的重要性</span>

            <span class="t2">2022/2/10</span>

            <div  class="t3" >行车不规范，亲人两行泪</div>

            <div class="t4" >#python&nbsp;#Golang</div>

            </div>

        </div>

    </div>

</main>

</body>

</html>

/*样式设计*/

/*通用样式*/

body {

   margin: 0;

   background-color: rgb(239,239,239);

   clear: both;

}

/*左侧菜单*/

.layout {

    width: 25%;

    height: 100%;

    background-color: rgba(78, 78, 78);

    float: left;

   position: fixed;

   left: 0;

   top: 0;

}

/*头像*/

.layout .img{

    height: 100px;

    width: 100px;

    border-radius: 50%;

    border: 2px solid white;

    /*调位置*/

    margin: 0 auto;

    /*溢出位置隐藏*/

    overflow: hidden;

    margin-top: 15px;

}

.img>img {

   width: 100%;

}

/*简介*/

.total-info{

    text-align: center;

}

#info1{

    font-size: 18px;

    color: aliceblue;

    margin-top:20px ;

}

#info2{

    font-size: 10px;

    color: #999999;

    margin-top: auto;

}

/*a标签通用样式*/

a {

text-decoration: none;

color: darkgray;

}

a:hover{

color: indianred;

}

/*公众号链接样式*/

.public-account{

    text-align: center;

    margin-top: 50px;

}

/*无序列表*/

ul {

list-style-type: none;

padding-left: 0;

}

/*链接样式*/

.class-link{

    text-align: center;

    margin-top: 80px;

}

/*版权样式*/

.banquan{

    text-align: center;

    font-size: 5px;

    margin-top: 30px;

}

/*右边菜单栏*/

.content {

    width: 75%;

    height: 100%;

    float: right;

}

.content-son{

    margin: 8px 15px;

    width: 95%;

    height: 120px;

    background-color: white;

    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);

}

.title .t1{

    border-left: 5px red  solid;

    font-size: 28px;

}

/*时间*/

.title .t2{

    font-size:8px;

    text-align: center;

    float: right;

    margin:5px 15px;

}

.title .t3{

    font-size: 20px;

    margin: 18px auto;

    text-indent: 13px;

    border-bottom: #aaa1a4 2px solid;

}

.title .t4{

    font-size: 14px;

    text-align: left;

    margin: 0 13px;

    padding-bottom: 10px;

}

CSS快速入门（四）的更多相关文章

Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念示例 ...
Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念边框 ...
Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念之前 ...
HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目软件架构 C/S架构:Client/Server 客户端/服务器用户本地有一个客户端程序,在远程有一个服务端程序如QQ,英雄联盟. ...
AndroidStudio快速入门四：打造你的开发工具，settings必备
http://blog.csdn.net/jf_1994/article/details/50085825 前言:这里是使用AS的基本设置,适合新入手的朋友阅读,将这里介绍的设置完基本使用无忧啦. 1 ...
web前端之css快速入门
css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...
CSS快速入门基础篇，让你快速上手（附带代码案例）
1.什么是CSS 学习思路 CSS是什么怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型浮动定位网页动画(特效效果) 项目格式: ...
02-03 CSS快速入门
css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...

随机推荐

【】Apache Ranger剖析：Hadoop生态圈的安全管家
前言 2016年,Hadoop迎来了自己十周岁生日.过去的十年,Hadoop雄霸武林盟主之位,号令天下,引领大数据技术生态不断发展壮大,一时间百家争鸣,百花齐放.然而,兄弟多了不好管,为了抢占企业级市 ...
C# .net 使用rabbitmq消息队列——EasyNetQ插件介绍
EasyNetQ 是一个简洁而适用的RabbitMQ .NET类库,本质上是一个在RabbitMQ.Client之上提供服务的组件集合.
Windows实现桌面录屏、指定窗口录制直播，低延时，H5页面播放
接着前面记录的3种方式实现桌面推流直播: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务的方式需要依赖与Flash插件,使用场景有限 2.Windows 11实现直播,VLC超简 ...
基于CentOS7.x gitlab环境搭建，卸载，汉化 --搭建篇
gitlab环境搭建,卸载,汉化 --搭建篇环境搭建安装依赖软件 yum -y install policycoreutils openssh-server openssh-clients pos ...
使用yum安装php*时报错的解决办法
# yum -y install php* 注意: php53-odbc64-5.3.3-2.el5.x86_64 from base has depsolving problems --> ...
第10组 Alpha冲刺 (3/6)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/13971668.html ·作业博客:https://edu.cnblogs.co ...
编写程序向HBase添加日志信息
关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新) 承接上一篇文档<日志信息和浏览器信息获取及数据过滤> 上一个文档最好做个本地测试 ...
Linux系统管理学习实训任务书
1.<Linux系统管理实训任务一之搭建实验基础环境> https://www.toutiao.com/i6763578305091207694/ 2.<Linux系统管理实训任务一 ...
51 Nod 1006 最长公共子序列（LCS & DP）
原题链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 题目分析: 首先先知道LCS问题,这有两种: Long ...
HIVE执行引擎TEZ学习以及实际使用
概述最近公司在使用Tez,今天写一篇关于Tez的学习和使用随笔.Tez是Apache最新的支持DAG作业的开源计算框架,它可以将多个有依赖的作业转换为一个作业从而大幅提升DAG作业的性能.Tez并不 ...

CSS快速入门（四）

CSS快速入门（四）

浮动

float属性

clear属性

浮动解决的问题及其影响

解决父标签塌陷的方法

浮动案例

定位

什么是脱离文档流

定位的两种方法

position定位

static定位

relative定位

absolute定位

fixed定位

overflow溢出属性

层级属性z-index

透明度的设置

综合案例

CSS快速入门（四）的更多相关文章

随机推荐

热门专题