内容回顾:

　　盒子:

　　　　内边距: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. HKDAS产品技术架构图

  2. SpringBoot打Jar包在命令行运行

    首先写一个测试文件 然后点击IDEA右侧的maven,然后选择package,之后点击上面运行或者直接双击即可, 等下方控制台构建成功即可: 然后找到项目目录下target下即可看到打的jar包 然后 ...

  3. shell数组的用法

    在shell里面想获取某个变量的值,使用$符开头,如:$a或者${a}即可. 获取数组长度 arr_length=${#arr_number[*]}或${#arr_number[@]}均可,即形式:$ ...

  4. [剑指Offer]56-数组中数字出现的次数（位运算）

    题目一 数组中只出现一次的数字 题目 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字 题解 异或. 先考虑:数组中只有一个数字只出现了一次,其他数字都出现了 ...

  5. 原来写插件还可以选MEF

    MEF是微软提供的一个轻量级的ICO容器,可以轻易的解除程序集的依赖关系,最近想写个类似插件试的软件所以搜索了一下,终于淘到宝了. 下面我们看看MEF是如何解耦的 新建一个控制台项目两个类库 Ites ...

  6. 用华为HMS ML kit人体骨骼识别技术，Android快速实现人体姿势动作抓拍&nbsp;

      你有没有过这种体验,拍照时对着镜头,脑子一片空白.表情僵硬.手和脚无处安放,最后拍出来的照片很是奇怪.拍照软件中的固定姿势抓拍功能可以帮助你:选择一个你想要的姿势模板,当你摆出同款姿势时,软件会进 ...

  7. 218。重复元素II(重复元素的下标差值<=K)(哈希)

    给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j],并且 i 和 j 的差的 绝对值 至多为 k. 示例 1: 输入: nums ...

  8. 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统三 | 控制反转搭配简单业务

    教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 04 | 强化设计方案 05 | 完善业务自动创建数据库 06 | 最终篇-通过AOP自动连接数据库-完成日志业 ...

  9. python爬取新浪财经

    我们来获取这里的title和url然后再获取这里面url的编辑作者 可以看到右边的几个就对应的左边不同的div .m-p1-mb2-list.m-list-container ul li a impo ...

  10. JVM学习（五）对象的引用类型

    一.引言 前面我们学习了JVM的垃圾回收机制,我们知道了垃圾回收是JVM的自发行为:虽然我们可以通过System.gc() 或Runtime.getRuntime().gc()进行显式调用垃圾回收 , ...