一:浮动float

1.什么是浮动？
在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素
2.浮动的作用
只要是设计到页面的布局一般都是用浮动来提升规划好
3.浮动有两个特点
  • 浮动的框可以向左或者右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止
  • 由于浮动的框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样
4.float格式
float: ;

三种取值

left	: 向左浮动

right	: 向右浮动

none	: 默认值，不浮动

二:代码实现左右浮动边框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>荷官发牌</title>

    <style>

        /*贴合边框*/

        body {

            margin: 0;

        }

        #d1 {

            /*宽度*/

            width: 20%;

            /*高度*/

            height: 2000px;

            /*背景颜色*/

            background-color: red;

            float: left;  /*往左浮动*/

        }

        #d2 {

            /*宽度*/

            width: 80%;

            /*高度*/

            height: 2000px;

            /*背景颜色*/

            background-color: blue;

            float: right;  /*往右移动*/

        }

    </style>

</head>

<body>

<div id="d1"></div>

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

</body>

</html>



三:浮动造成父标签塌陷问题(清除浮动)

  • 浮动带来的影响
1.浮动会造成父标签的影响
<!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: greenyellow;

            /*向左浮动*/

            float: left;

        }

    </style>

</head>

<body>

<div id="d1">

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

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

</div>

</body>

</html>

三:清除浮动的副作用（父标签塌陷问题）

  • 解决浮动带来的影响
1.自己加一个div设置高度
#d4 {

	/*高度*/

	height: 100px;

}
2.利用clear属性
#d4 {

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

clear: left;
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码

        .clearfix:after {

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

            content: '';

            display: block;

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

            clear: both;

        }

之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可
  • 该方法的解决方式是通用的 到哪都是一样 并且名字就叫clearfix

四:overflow溢出属性

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
  • overflow（水平和垂直均设置）
  • overflow-x（设置水平方向）
  • overflow-y（设置垂直方向）
1.当代码出现溢出时

2.解决代码溢出
  • 代码溢出解决方式
/*overflow: visible;  !*默认就是可见 溢出还是展示*!*/

/*overflow: hidden;  !*溢出部分直接隐藏*!*/

/*overflow: scroll;  !*下拉框滚动*!*/

/*overflow: auto;  !*滚动显示 当宽度比较小有下侧滑动*!*/
  • 代码解决方式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p   {

            /*高度*/

            height: 100px;

            /*宽度*/

            width: 100px;

            /*左右上下框一致*/

            border: 3px solid red;

            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/

            /*overflow: hidden;  !*溢出部分直接隐藏*!*/

            /*overflow: scroll;  !*下拉框滚动*!*/

            /*overflow: auto;  !*滚动显示 当宽度比较小有下侧滑动*!*/

        }

    </style>

</head>

<body>

<p>时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!时间会给我们答案,那就让时间来给我们答案吧!!!</p>

</body>

</html>

五:代码溢出的应用场景

1.实现个人头像
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    body {

        /*与边框对其*/

        margin: 0;

        /*背景颜色*/

        background-color: #4e4e4e;

    }

    #d1 {

        /*高度*/

        height: 200px;

        /*宽度*/

        width: 200px;

        /*画一个圈*/

        border-radius: 50%;

        /*边框一致*/

        border: 5px solid white;

        /*调位置*/

        margin: 0 auto;

    }

  </style>

</head>

<body>

<div id="d1">

    <img src="https://img1.baidu.com/it/u=695902172,1418263097&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" alt="">

</div>

</body>

</html>

2.解决设置头像照片溢出问题
解决设置头像照片溢出问题与比列大小问题

        /*溢出位置隐藏*/

        overflow: hidden;

    }

    #d1>img {

        /*让img标签占#d1的百分之百*/

        width: 100%;

    }
3.圆形头像示例
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    body {

        /*与边框对其*/

        margin: 0;

        /*背景颜色*/

        background-color: #4e4e4e;

    }

    #d1 {

        /*高度*/

        height: 100px;

        /*宽度*/

        width: 100px;

        /*画一个圈*/

        border-radius: 50%;

        /*边框一致*/

        border: 5px solid white;

        /*调位置*/

        margin: 0 auto;

        /*溢出位置隐藏*/

        overflow: hidden;

    }

    #d1>img {

        /*让img标签占#d1的百分之百*/

        width: 100%;

    }

  </style>

</head>

<body>

<div id="d1">

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

</div>

</body>

</html>

前端基础之CSS(浮动-解决溢出-实现个人头像框)的更多相关文章

  1. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  2. 重温前端基础之-css浮动之怪异现象

    其实,两种情况中box2的内容都是围绕着浮动元素box1来的. 因为:浮动元素会覆盖块元素,但块元素里的内容(内联盒)不会被覆盖,而是围绕着浮动盒. 将box1的背景色去掉,真相就大白了: 此时发现, ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  5. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  6. 前端基础之css介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  7. 前端基础 之 CSS

    浏览目录 CSS介绍 CSS语法 CSS的几种引入方式 CSS选择器 CSS属性相关 一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览 ...

  8. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  9. 前端基础之CSS属性

    一.背景属性 <style> p { /*背景颜色*/ background-color: red; /*字体颜色*/ color: blue; /*宽度和高度*/ width: 600p ...

随机推荐

  1. 【LeetCode】172. Factorial Trailing Zeroes 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 递归 循环 日期 题目描述 Given an integer ...

  2. codeforc 603-A. Alternative Thinking(规律)

    A. Alternative Thinking time limit per test 2 seconds memory limit per test 256 megabytes   Kevin ha ...

  3. Codeforces Gym-100985C： MaratonIME plays Nim（交互题&博弈）

    C. MaratonIME plays Nim time limit per test : 2.0 smemory limit per test : 64 MBinputstandard inputo ...

  4. 第四十三个知识点：为AES描述一些基础的（可能无效）的对抗侧信道攻击的防御

    第四十三个知识点:为AES描述一些基础的(可能无效)的对抗侧信道攻击的防御 原文地址:http://bristolcrypto.blogspot.com/2015/07/52-things-numbe ...

  5. Reproducing Kernel Hilbert Space (RKHS)

    目录 概 主要内容 RKHS-wiki 概 这里对RKHS做一个简单的整理, 之前的理解错得有点离谱了. 主要内容 首先要说明的是, RKHS也是指一种Hilbert空间, 只是其有特殊的性质. Hi ...

  6. CHARACTERIZING ADVERSARIAL SUBSPACES USING LOCAL INTRINSIC DIMENSIONALITY

    目录 概 主要内容 LID LID估计 算法 实验 1 2 3 4 5 Ma X, Li B, Wang Y, et al. Characterizing Adversarial Subspaces ...

  7. Java开发之项目分包

    在我们开始准备写一个大点规模的项目时,我们不能随便地从main函数就开始往下写,要有清晰的逻辑思路和各个层面上的数据的传递和交互. 同时在我们写项目时也应该分出不同的包来做不同的事情,比如view包就 ...

  8. Elasticsearch单机安装Version7.10.1

    1.说明 Elasticsearch单机安装, 基于Elasticsearch的7.10.1版本, 在Linux上安装Elasticsearch单机, 使用安装包elasticsearch-7.10. ...

  9. Python项目生成requirements.txt文件及pip升级问题解决及流程

    缘由:新项目使用Python, PC上的python包不全,需要通过requirements.txt文件指定安装所需包 pip安装遇到一些坑 一.直接使用pip包管理工具生成requirements. ...

  10. minio文件上传与下载

    目录 一.minio简介 二.minio安装 一.java中使用 一.minio简介 MinIO 是在 GNU Affero 通用公共许可证 v3.0 下发布的高性能对象存储. 它是与 Amazon ...