内容回顾:

　　盒子:

　　　　内边距: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. CDH5.16.1集群企业真正离线部署

    一.准备工作 1.离线部署主要分为三块: MySQL离线部署 CM离线部署 Parcel文件离线源部署 2.规划 节点 MySQL部署组件 Parcel文件离线源 CM服务进程 大数据组件 hadoo ...

  2. 【Flutter 实战】菜单（Menu）功能

    老孟导读:今天介绍下Flutter中的菜单功能. PopupMenuButton 使用PopupMenuButton,点击时弹出菜单,用法如下: PopupMenuButton<String&g ...

  3. python中使用token模拟登录

    背景:在接口测试中我们经常是需要一个登陆token,或者获取其他用到的参数来关联下一个接口用到的参数. Token的意义及用法 一.Token的来源: 当客户端多次向服务端请求数据时,服务端就需要多次 ...

  4. [LeetCode]1083. 销售分析 II(Mysql,having+if)

    题目 编写一个 SQL 查询,查询购买了 S8 手机却没有购买 iPhone 的买家. 题解 使用having + sum+if,而不是自查询. 代码 # Write your MySQL query ...

  5. ActiveMQ客户端Apache.NMS从.net 4.0移植到.net standard 2.0

    1.从官网或GitHub下载Apache.NMS源码 2.新建.net standard 2.0类库 3.将源码复制到新建的类库中,并删除或注释CommonAssemblyInfo.cs文件(程序集版 ...

  6. FFmpeg开发笔记（五）：ffmpeg解码的基本流程详解（ffmpeg3新解码api）

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  7. JVM直接内存(Direct Memory)

    直接内存 1.直接内存不是虚拟机运行时数据区的一部分,也不是<Java虚拟机规范>中定义的内存区域. 2.直接内存是Java堆外的.直接向系统申请的内存区间. 3.简单理解: java p ...

  8. 本以为自己 MySQL 够牛逼了，直到亲自去阿里受虐了一次！

    前言 众所周知,简历上“了解＝听过名字:熟悉＝知道是啥:熟练＝用过:精通＝做过东西”. 相信大家对于MySQL的索引都不陌生,索引(Index)是帮助MySQL高效获取数据的数据结构.索引作为MySQ ...

  9. Eclipse安装AmaterasUML插件问题

    为了画UML图,我想在Eclipse(版本Version: Oxygen Release (4.7.0))安装AmaterasUML,第一步,安装GEF - http://download.eclip ...

  10. Mac 环境下配置 MySQL 以及 Mac终端登录MySQL

    1.首先mysql官网下载Mac 版 mysql直接安装 2.打开偏好设置-> MySQL -> 查看是否开启mysql服务 3.打开终端 进入mysql目录: /usr/local/my ...