49-清除浮动1：给父盒子设置高度
给父盒子设置高度，这种方式不灵活，公司的产品修改的时候，要求父盒子高度变大，
不可能去手动修改
尽量不要给父元素去修改高度，不建议这样的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动1：设置盒子高度</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
        }
        ul{
            list-style-type: none;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            
        }
        .box{
            width: 200px;
            height: 100px;
            
        }
    </style>
</head>
<body>
        <div>
            <ul>
                <li>
                    Python
                </li>
                <li>
                    web
                </li>
                <li>
                    linux
                </li>
            </ul>
        </div>
        <div class="box">
 
        </div>
</body>
</html>
50-清除浮动2-clear：both
给浮动元素最后面加一个空的div，并且该元素不浮动，这样的方式称为内墙法，然后设置clear:both->清除所有的浮动影响，这样的方式无缘无故加了div标签，结构冗余，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动2：clear</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
        }
        ul{
            list-style-type: none;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            
        }
        .box{
            width: 200px;
            height: 100px;
            
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
        <div>
            <ul>
                <li>
                    Python
                </li>
                <li>
                    web
                </li>
                <li>
                    linux
                </li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="box">
 
        </div>
</body>
</html>
51-清除浮动3-伪元素清除法(常用)
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
52-清除浮动4-overflow：hidden(常用)
overflow: hidden;是在内容超出部分就隐藏
overflow: scorll:不论是否需要，用户代理都会提供一种滚动机制，而且是有可能(不是一定)会出现滚动条，这样会导致在写代码的时候导致前端的页面不可控
53-margin垂直方向塌陷问题
当给两个兄弟盒子设置垂直方向上的margin，那么排列的时候会以较大的为准，我们称为这种现象为塌陷
如果是浮动的盒子，垂直的方向上不塌陷
        .box1{
            width: 300px;
            height: 200px;
            
            margin-bottom: 20px ;
        }
        .box2{
            width: 400px;
            height: 300px;
            
            margin-top: 50px;
        }
54-margin：0 auto水平居中盒子
1.水平居中的盒子一定要有宽度，要有明确的width，否则就会继承父标签的宽度，浮动的时候是不能用的，
2.只有标准流下的盒子才能使用margin，当一个盒子浮动了，固定定位、绝对定位了，margin 0 auto就不能使用
3.居中盒子，而不是居中文本，文字水平居中使用text-align:center
55-善于使用父亲的padding,而不是margin
56-文本属性和字体属性
div{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}

路飞学城Python-Day48的更多相关文章

  1. 路飞学城—Python爬虫实战密训班 第三章

    路飞学城—Python爬虫实战密训班 第三章 一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫: - 定义调度器 - ...

  2. 路飞学城—Python爬虫实战密训班 第二章

    路飞学城—Python爬虫实战密训班 第二章 一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...

  3. 路飞学城Python爬虫课第一章笔记

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...

  4. 路飞学城-Python开发集训-第3章

    学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...

  5. 路飞学城-Python开发集训-第1章

    学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...

  6. 路飞学城-Python开发集训-第4章

    学习心得: 学习笔记: 在python中一个py文件就是一个模块 模块好处: 1.提高可维护性 2.可重用 3.避免函数名和变量名冲突 模块分为三种: 1.内置标准模块(标准库),查看所有自带和第三方 ...

  7. 路飞学城-Python开发集训-第2章

    学习心得: 这章对编码的讲解超级赞,现在对于编码终于有一点认知了,但还没有大彻大悟,还需要更加细心的琢磨一下Alex博客和视频,以前真的是被编码折磨死了,因为编码的问题而浪费的时间很多很多,现在终于感 ...

  8. 路飞学城-Python开发-第二章

    ''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...

  9. 路飞学城-Python开发-第三章

    # 数据结构: # goods = [ # {"name": "电脑", "price": 1999}, # {"name&quo ...

  10. 路飞学城-Python开发-第一章

    # 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...

随机推荐

  1. 可横向滑动的vue tab组件

    示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义 ...

  2. maven中tomcat7：run无法启动maven项目

    这几天在学习ssm相关整合,在使用maven时,发现了一些问题,就是明明按代码都差不多就是没法运行 这个是maven主项目的pom.xml的配置,我解决的方法是添加 <maven.compile ...

  3. RESTful API设计方法

    1.如果已经开始逐步的接触到了RESTful API设计方法的朋友,首先要对HTTP/HTTPS有一个大致的了解,虽然本身和RESTful API没有什么关系.但是对于增加网站的安全性还是十分重要的, ...

  4. 网络教程(9)ARP。IP和以太网间映射

    question: how does a knows that SFO is the right place to send as Ethernet frame subnet Mask: its ju ...

  5. 实验一：JAVA实验环境搭建

    一. JDK的安装 1.输入 官网地址:http://www.oracle.com/technetwork/java/index.html 如图: 点击之后,就会进入这个界面,进入之后,往下拉点就会看 ...

  6. 使用canvas保存网页为pdf文件支持跨域

    前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubub ...

  7. 常用HTML小部件

  8. win7下UDL文件不同

    win7 执行UDL文件看不全all驱动.所以没有办法配置数据库的连接.查度娘,方法如下: 在C:\建一个test.udl 文件,运行命令 C:\Windows\syswow64\rundll32.e ...

  9. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第四篇【AppiumLibrary实用函数介绍】

    http://blog.csdn.net/deadgrape/article/details/50585677 通过前几篇的讲述,我相信大家已经对RF+Appium的框架已经有所了解了. 接下来我告诉 ...

  10. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...