一:浮动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. 基于sqlitecpp的sqlite3 c++封装

    Github: 人富水也甜 感谢GitHub大佬: sqlitecpp github:  https://github.com/SRombauts/SQLiteCpp sqlite: https:// ...

  2. 【剑指Offer】二叉搜索树与双向链表 解题报告（Python）

    [剑指Offer]二叉搜索树与双向链表 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interview ...

  3. 获得MATLAB中FIG文件的矩阵

    在拓扑优化中,经常使用imagesc函数来显示最终的结果,往往会保存了Fig文件,却忘记保存mat文件. 根据已有的Fig文件,是可以找到其所显示矩阵.这个是我从fig数据结构中一层一层找到的,记录一 ...

  4. 常见分布式唯一ID生成策略

    方法一: 用数据库的 auto_increment 来生成 优点: 此方法使用数据库原有的功能,所以相对简单 能够保证唯一性 能够保证递增性 id 之间的步长是固定且可自定义的 缺点: 可用性难以保证 ...

  5. oralce索引的使用

    1.索引的作用 数据库对象 用于提高数据库检索的效率,对于where,group,order by条件中经常出现的字段,创建索引可以加快效率 缺点:如果对于大量的数据插入时效率可能会变低 2.索引的使 ...

  6. Android物联网应用程序开发（智慧城市）—— 环境状态值范围设置界面开发

    效果图: 代码: 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  7. C#读取注释的方法

    友好的注释能提高代码的可读性,几乎所有的编程语言都支持注释. 在C#中,注释不是可执行代码的一部分,因此注释不会被编译到程序集中去,但是我们可以提取注释[右键项目]-[属性]-[生成]-[输出]-[X ...

  8. MySQL支持IPv6

    开启和验证MySQL支持IPv6的方法, 此处使用的MySQL版本为mysql-5.5.35-linux2.6-x86_64. 1.验证操作系统支持IPv6,此处是Linux操作系统 ping6 :: ...

  9. Debug解决问题方法论

    发现问题怎么办,如何处理, 所谓的Debug的一般流程是什么, 下面是我对此的一些思考总结, 后面还会继续完善补充. 1.处理思路总纲 发现问题 查看日志 没有日志,去找日志 找不到日志,继续找,有些 ...

  10. js 中&&的使用

    遇到下列代码goHome && (await router.replace(PageEnum.BASE_HOME)); &&这个逻辑与的作用是,当goHome为true ...