内容回顾:

　　盒子:

　　　　内边距: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. md5命令

    AIX 系统md5命令之csum #csum filename (默认使用md5算法) #csum -h SHA1 filename (使用sha1算法)Linux系统命令之md5sum 1. 背景 ...

  2. linux系统漏洞扫描工具lynis

    lynis 是一款运行在 Unix/Linux 平台上的基于主机的.开源的安全审计软件.Lynis是针对Unix/Linux的安全检查工具,可以发现潜在的安全威胁.这个工具覆盖可疑文件监测.漏洞.恶意 ...

  3. [LeetCode]364. 加权嵌套序列和 II (DFS)

    题目 给一个嵌套整数序列,请你返回每个数字在序列中的加权和,它们的权重由它们的深度决定. 序列中的每一个元素要么是一个整数,要么是一个序列(这个序列中的每个元素也同样是整数或序列). 与 前一个问题 ...

  4. MySQL隐式转换的坑

    MySQL以以下规则描述比较操作如何进行转换: 两个参数至少有一个是 NULL 时,比较的结果也是 NULL,例外是使用 <=> 对两个 NULL 做比较时会返回 1,这两种情况都不需要做 ...

  5. python面向对象单继承，多继承和super()调用

    python 目录 python 1.继承 1.单继承 2.多继承 3.子类重写父类的同名属性和方法 核心点: 4.多层继承 5.super()的使用 1.继承 1.单继承 说明: 虽然子类没有定义_ ...

  6. jmeter进行MySQL压测

    jmeter怎么对数据库进行压测 目录 jmeter怎么对数据库进行压测 点击测试计划,再点击"浏览",把JDBC驱动添加进来: 然后添加配置元件 再添加一个采样器:JDBC re ...

  7. c语言汇总1

    (1--10) 1.机器语言(0,1) 汇编语言(换元法) 高级语言(人) 2.C语言由函数组成而成 main函数系统会自动启动它 3.main函数格式: int main(){ call(): re ...

  8. zabbix邮件报警设置(加密)

    邮件设置如下 端口号选择465

  9. Axios源码深度剖析

    Axios源码深度剖析 - XHR篇 axios 是一个基于 Promise 的http请求库,可以用在浏览器和node.js中,目前在github上有 42K 的star数 分析axios - 目录 ...

  10. 1.Concurrent概述