内容回顾:

　　盒子:

　　　　内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加

　　　　外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值

　　　　边框:border

　　　　　　border-color:边框颜色

　　　　　　border-width:边框的宽度

　　　　　　border-style:边框的风格,double(双线),solid(实现),虚线(dashed),点线(dotted)

　　　　float:浮动,为了解决让盒子们漂在一行

　　　　　　浮动的方式:left和right

　　　　　　清除浮动目的:让父盒子不浮动的同时,它的高度还被浮动的儿子们撑起来

　　　　　　清除浮动的方法:clear:both;用了五个操作,实现的障眼法,官方推荐写法;overflow:hidden

　　　　盒子的margin和padding的值的设置:按顺时针可以简写,也可以根据位置来详细写

　　　　　　写的值:px

　　　　　　margin可以有负值,其他的不可以

　　　　px补充,写代码的时候px不设置小数,页面中的效果是迫不得已有内容撑起的,所以有小数的显示

　　　　思维导图:画明白了是你自己的,画不明白别抄.

今日内容:

　　　　定位

　　　　css的样式

　　　　　　字体

　　　　　　文本

　　　　　　颜色

　　　　　　display

　　　　css的其他属性

　　　　引入的时候:定位,　　

内容详细:

　　子层设置了margin-top之后牵连了父层,,跟邻居有距离

　　父层通过overflow:hidden隐藏溢出

<style>

        .die {

            width: 100%;

            height: 40px;

            background-color: #444444;

        }

        .shushu {

            width: 100%;

            height: 100px;

            background-color: yellowgreen;

            overflow: hidden;

        }

        #logo {

            width: 300px;

            height: 40px;

            background-color: orange;

            margin-top: 22px;

        }

    </style>

</head>

<body>

<div class="die">

    <div id="box1"></div>

</div>

<div class="shushu">

    <div id="logo"></div>

</div>

</body>

　　方法2:

　　　　设置父盒子的padding,其他的兄弟们设置margin-top:top为负值

　　方法3:

　　　　让logo和广告都浮起来,前提是父盒子得有高度,如果没有高度,用清除浮动

定位

　　相对定位:相对于某个具体的对象来说,自己的定位

　　绝对定位:指定自己的定位

　　　　脱离了标准文档流,它可以对其他盒子产生覆盖现象

<style>

        body{

            margin: 0;

        }

        .die {

            width: 100%;

            height: 100px;

            background-color: lightblue;

            position: relative;

            /*overflow: hidden;*/

        }

        #son1 {

            width: 200px;

            height: 50px;

            background-color: yellow;

            position: absolute;

            top: 22px;

            /*position: relative;  !* 错误操作,找错全局相对的对象 *!*/

        }

        #son2 {

            width: 300px;

            height: 80px;

            background-color: lightpink;

            position: absolute;

            top: 22px;

            left: 300px;

        }

    </style>

<body>

<div class="die">

    <div id="son1"></div>

    <div id="son2"></div>

</div>

<div class="gbw">

    <div id="son3"></div>

    <div id="son4"></div>

</div>

</body>

相对定位和绝对定位的核心知识是父相子绝

　　固定定位

　　position:fixed

　　具体的方向和值取定位,常用在导航栏的设置

　　　　还常用在翻车的例子中,例子中告诉我们,回到顶部的锚点要加& nbsp ;

　　z-index:只有在设置了固定定位的时候才起作用,它的值只有两类,正的代表遮盖,负的代表不遮盖

CSS的样式和属性

　　普通文档流

　　　　空白折叠

　　　　自动换行

　　　　img之间的距离是因为空白折叠,想删除把所有img标签放一行

　　　  高矮不齐底边对齐

　　　  不是普通文档流中的float,他们是顶边对齐

　　字体样式

/*font-family: 方正兰亭超细黑简体; !* 改变字体的风格 *!*/

            font-size:50px ;  /* 字体大小*/

            /*font-weight: 900;*/

            font-weight: normal; /* 字体宽度,可以是命名法,也可以从100-900里取值 */

            color: #cc6600;  /* 字体颜色 */ /* 命名法,16进制,RGB,RGBA */

            color: rgba(255,0,0,0.8);

　　文本样式

　　　　最重要的line-hight:跟盒高度一致,文本居中

body {

            text-align: justify;  /* 文本对齐方式 */

            text-indent: 2ex;  /* 文本的首行缩进,中文用em,英文用ex */

            /*word-spacing:100px ;  !* 词之间的间距 *!*/

            text-transform: capitalize; /* 首字母大写 */

            text-decoration: blink; /* 改变文字的上,中,下划线 */

            direction: rtl;  /* 根text-align相似,但是他没有居中的玩意儿 */

        }

　　背景

　　　背景色:包含你的边框和内边框　

　　  bgc:颜色设置  /* 命名法,16进制,RGB,RGBA */

　　　背景图:

　　　　bgi:背景图片

　　　　背景图定位:bgp,根据盒子左上角作为0点,先设置x轴,在设置y轴.　

　　属性

　　　display:

　　　块变行内 display:inline

　　   行内变块display:block

/*display: inline-block;  !* 行内标签变身盒子的方法一!!!!!!!!!!!!!!它变身后在标准文档流 *!*/

            /*float: left;*/  /* 行内标签变身盒子的方法二!!!!!!!!!它变身后脱离标准文档流 */

            /*position: absolute;*/  /* 行内标签变身盒子的方法二!!!!!!!!!它变身后脱离标准文档流 */

　　　变行内块:display:inline-block

　　根隐藏相关的操作:

            /*display: none;  !* 隐藏标签的所有 *!*/

            visibility: hidden;  /* 隐藏,但是它隐藏后的坑还在 */

day53 Pyhton 前端04的更多相关文章

  1. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  2. 前端04 /css样式

    前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...

  3. day16_雷神_前端04

    前端day04 链接前端的一些库,一些资源,从bootcdn上搜,有前端所有的库. 前端工作流程: jquery的DOM文档操作 <!DOCTYPE html> <html lang ...

  4. day56 Pyhton 前端Jquery08

    前端 内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...

  5. day50 Pyhton 前端01

    文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...

  6. day57 Pyhton 前端Jquery09

    内容回顾: - 筛选选择器 $('li:eq(1)')  查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find()  查找后代的元素 - ...

  7. day55 Pyhton 前端Jquery07

    昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...

  8. day54 Pyhton 前端JS06

    内容回顾 - ECMAScript5.0 基础语法 - var 声明变量 - 五种基本数据类型 - string - number NaN number 1 number - boolean - un ...

  9. day54 Pyhton 前端JS05

    今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...

随机推荐

  1. Nice to meet you

    Who am i 详情可以参见我的这一篇博文 Why and how 其实之前就想在博客园开创自己的博客了,但是自己之前已经利用自己的GitHub搭建了一个 博客,然后的话自己写的文章即水又不多,说到 ...

  2. Win10 在VM里面装Centos7.4后使用桥接模式连接外网，并用MobaXterm远程虚拟机详细教程

    1.首先登陆虚拟机如图 2.执行ping命令看虚拟机里面的centos7是否可以连网 ping www.baiducom 此时会报错:name or service not known 3.设置一个文 ...

  3. range如何倒序

    for j in range(3,-2,-1): 表示对3进行每次加-1的操作,直到-2,但不包括-2 print(j) 打印出3 2 1 0 -1都换行展示的

  4. unserialize3 攻防世界

    序列化是将对象转换为便于保存的字符串, 而反序列化是将便于保存的字符串转换为字符串. _wakeup()魔法方法 如果直接传参给code会被__wakeup()函数再次序列化,所以要绕过他, 利用__ ...

  5. 乔悟空-CTF-i春秋-Web-SQLi

    2020.09.05 今天注定是高产的一天,这题真是坑,不看wp真的不会做,现在回头来复习一遍. 做题 题目 题目地址 做题 这题坑人的地方就在于重定向了两次,并且重要信息在第一次里藏着,第二次还给了 ...

  6. [Leetcode]148. 排序链表(归并排序)

    题目 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2: ...

  7. Prometheus Metrics 设计的最佳实践和应用实例，看这篇够了！

    Prometheus 是一个开源的监控解决方案,部署简单易使用,难点在于如何设计符合特定需求的 Metrics 去全面高效地反映系统实时状态,以助力故障问题的发现与定位.本文即基于最佳实践的 Metr ...

  8. Linux常用命令详解(1)

    基础命令:lsmanpwdcdmkdirechotouchcpmvrmrmdircatmorelessheadtailclearpoweroffreboot进阶命令(下一章节):aliasunalia ...

  9. openstack （共享组件） 时间同步服务

    云计算openstack共享组件——时间同步服务ntp(2)   一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行 ...

  10. 首发！Alibaba内部：Spring源码培训课件笔记曝光！

    本文包含的内容 Spring占有的市场 阅读源码的重要性 阅读源码困难度 课件笔记的主要内容 Spring占有的市场 先来简单说一下现在各个企业常用并与Spring相关的: ssh = spring ...