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. 【leecode】宝石与石头

    给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符都是字母 ...

  2. WEBGL学习【十】运动模型

    <!DOCTYPE HTML> <html lang="en"> <head> <title>LWEBGL6.2, Animated ...

  3. django视图的定义

    概述 视图:视图的本质就是一个python中的函数,作用是接收web请求,并响应web请求. 过程:django获取浏览器输入的url,经过django中的url管理器匹配到对应的视图函数,视图管理器 ...

  4. laravel使用JWT做API认证

    最近项目做API认证,最终技术选型决定使用JWT,项目框架使用的是laravel,laravel使用JWT有比较方便使用的开源包:jwt-auth.php 后端实现JWT认证方法 使用composer ...

  5. FreeMarker 页面静态化解决方案

    一.网页的静态化方案 1.生成静态页面的时机:在做添加操作时,同时生成该新增内容的对应的静态页面 2.静态页面的名称:内容 id + ".html" 3.静态页面所在的路径:工程外 ...

  6. springmvc上传操作

    创建虚拟目录  配置tomcat的配置文件server.xml 在真实路径中放置一个图片 启动服务器:  直接可以通过配置的虚拟路径来访问真实路径中的图片 所以 我们在做图片上传的操作的时候   就可 ...

  7. selenium+java处理鼠标悬停

    1.元素比较明确(可视) 2.元素隐藏,需要鼠标移动到一定地方才显现(下图为某论坛列表,需要将鼠标移动到列表才显示操作按钮)

  8. Mysql 奇怪的连接错误

    今天,碰到了一个数据库连接问题: 不像之前在linux上mysql连接问题,那是权限设置.而这次问题的起源是: 我想要往mysql导入csv文件,可是因为文件比較大.有88M数据:使用navicatc ...

  9. Android-自己定义标题栏

    Android-自己定义标题栏 2014年4月25日 分享知识点 最近也比較多事情,想发发博客就是心有余而力不足,本篇博文主要教大家怎样实现自己定义标题栏,非常easy.那么聪明的你一下就看懂. 有兴 ...

  10. 不做Next，争做Nest——庆科首届智能硬件创新设计大赛产生决赛12强

      智能硬件,Wi-Fi互联,谁是下一个Nest?邀你共见证! 2014年3月到7月.由上海庆科信息技术有限公司主办的首届 MXCHIP 智能硬件创新设计大赛--"寻找下一个nest&quo ...