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

随机推荐

Oracle 系统函数
函数名称返回值类型说明示例字符串函数 ascii(str) number 返回str首字母的ASCII码 select ascii('A') from dual; --65select a ...
python连接真机或模拟器
前言: 最近写自动化代码的时候,使用模拟器运行 python + appium代码时,APP闪退了,只能使用真机运行代码了.真机要怎么配置设备的信息呢? 怎么配置设备的信息? 配置是使用真机还是模拟器 ...
Python + Selenium 上传元素为button类型的文件的解决办法
工具:winspy Python所需安装模块:pywin32 (安装语句:pip install -i https://pypi.douban.com/simple pywin32) 元素位置: 对应 ...
pymysql防止SQL注入的方法
import pymysql class Db(object): def __init__(self): self.conn = pymysql.connect(host="192.168. ...
[转]webpack——CommonsChunkPlugin
作用虽然webpack4已经出来很久了,CommonsChunkPlugin也已经舍弃了,但是还是有很多项目是通过webpack3来打包的,对CommonsChunkPlugin各个配置项的认识还是比 ...
vue2.0中实现echarts图片下载-----书写中
由于各个版本浏览器兼容性不一,所以,我们需要一个判断浏览器类型的函数来对不同的浏览器做不同的处理. 获取浏览器版本的函数 // 判断浏览器类型 IEVersion () { let userAgent ...
SYCOJ1717负二进制
题目-负二进制 (shiyancang.cn) 进制的实质在于对于进制数的选择,选择不满足的填入当前的位置,然后除掉,继续开始选择.但是对于本题,是负数,但是进制上的数字为正数,所以就要调整,借位,因 ...
【Java常用类】两个Date类
两个Date类 java.util.Date类两个构造器的使用构造器一:Date():创建一个对应当前时间的Date对象构造器二:创建指定毫秒数的Date对象两个方法的使用 toString( ...
浅解XXE与Portswigger Web Sec
XXE与Portswigger Web Sec 相关链接: 博客园安全脉搏 FreeBuf 简介XML XML,可扩展标记语言,标准通用标记语言的子集.XML的简单易于在任何应用程序 ...
Javascript中常用事件集合和事件使用方法
Javascript中常用事件集合和事件使用方法一.事件绑定格式: 事件源 . on事件类型=事件处理函数事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

CSS快速入门（四）

CSS快速入门（四）

浮动

float属性

clear属性

浮动解决的问题及其影响

解决父标签塌陷的方法

浮动案例

定位

什么是脱离文档流

定位的两种方法

position定位

static定位

relative定位

absolute定位

fixed定位

overflow溢出属性

层级属性z-index

透明度的设置

综合案例

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

随机推荐

热门专题