内容回顾:

　　盒子:

　　　　内边距: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. STS 使用lombox.jar

    在Maven本地仓库中找到 将lombox.jar放在与STS.exe平级的目录下, 然后安装完了以后可能会出先打不开的情况.这个时候只要打开STS.ini文件. 然后修改文件保存

  2. Solon详解（七）- Solon Ioc 的注解对比Spring及JSR330

    Solon详解系列文章: Solon详解(一)- 快速入门 Solon详解(二)- Solon的核心 Solon详解(三)- Solon的web开发 Solon详解(四)- Solon的事务传播机制 ...

  3. Conscription(POJ 3723)

    原题如下: Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16584   Accepted: 57 ...

  4. git如何在远程某个分支的基础上新建分支

    1.任意新建文件夹,右击git bash here $ git init(将此目录变成本地仓库) 2.$ git remote add origin 'https://git............g ...

  5. C语言02

    C语言02 1.2 C语言与C程序 1.计算语言 语言发展 机器语言:机器语言是机器能直接识别的程序语言或指令代码,勿需经过翻译,每一操作码在计算机内部都有相应的电路来完成它,或指不经翻译即可为机器直 ...

  6. Linux常用命令详解（2）

    aliasunaliasunamesuhostnamehistorywhichwcwwhowhoamipingkillseqdudffreedate 命令详解 1. alias 设置.’查看别名 实例 ...

  7. hystrix文档翻译之配置

    Hystrix使用Archaius作为配置的默认实现,下面介绍的是HystrixPropertiesStrategy的默认实现,你也可以通过插件方式重新实现. 每一个配置有四个级别: 全局默认 当下面 ...

  8. C# winform 打包成安装程序(exe)

    C# 打包成安装程序 1.扩展-> 安装扩展 联网搜索 install     2.新建安装程序项目      3.添加程序   4.添加打包需要的文件 5. 添加x86与x64文件夹,并添加s ...

  9. 4.Scala语法02 - 函数

  10. profile对比std::regex与boost::regex的性能

    c++11标准库的regex比boost库的regex之间的性能差距接近5倍,这是为什么?stackflow上也找到一篇post<c++11 regex slower than python&g ...