内容回顾

  块级标签:

    div

    p

    h

    列表:ol;ul;dl

    表格:table

  行内标签:

    span

    a

    i/em

    b/strong

    u/del

   行内块:

    input

    textarea

    img

   其他:

    form

    br

    hr

     

    ⁢

    >

  css:

  三种引入方式:行内式,直接在标签上写

        在head里写style标签,在style里书写

        在head里写link标签,通过路径导入

   基本选择器:4个:

      *通配符选择器

      id值,id选择器

      类名,类选择器

      标签名选择器

  高级选择器:

    后代选择器,body div;能选到body下的所有div

    子代选择器,body >div,能选到body下的所有儿子div

    弟弟选择器,h1~div;选到的是同级的所有div,就算被隔断也能选到

    毗邻选择器,h1 + div,相邻一个或多个div,被隔断就没了

     组合选择器,h1,div,body div;这个是多选,常用的操作.解决代码冗余常用

  伪类选择器

    爱恨准则:LoVe HAte

    a:link;没被访问的样子

    a:visited;标签被访问后的样子

    a:hover:鼠标悬浮的样子,唯一一个可以被其他标签也使用的属性

    a:active:点击时的样子

  伪元素选择器:

    before:前面加内容

    after:后边加内容

    first-letter:首字母操作

    first-line:首行操作

  选择器的优先级

    从小到大:继承->标签选择器->类选择器->id选择器->行内样式最高

  标签的嵌套:

    块能嵌套万物

    行内只能嵌套行内

    行内块不建议进行嵌套

今日内容

  盒模型

  浮动

  CSS的样式

 CSS的盒模型

    盒模型概述:

      边:边界,让你知道它是京东的还是淘宝的盒子

      内边距:解决内部矛盾

      外部:解决外部矛盾

     css的padding

      padding属于盒子内部的,padding改变盒子得跟着增加

/* 写法1  推荐写法,别怕麻烦*/
padding-top:100px ;
padding-right:100px ;
padding-bottom:100px ;
padding-left:100px ;
/* 写法2 */
/*padding: 100px;*/
/* 写法3 */
/*padding: 100px 200px 300px 400px;*/
/* 写法4:上下对应,左右对应 */
/*padding:0 100px ;*/

      以上四种写法都可以

        但是要记住padding不能设置负值

    盒子 的边框border

    boder-style:solid,double,dotted,dashed

      border-width:设置像素,如果用于画图,把盒子的自身宽高给弄掉

    border-color:命名法颜色设置.

border-top-width:100px ;
border-right-width:100px ;
border-bottom-width:100px ;
border-left-width:100px ;

   盒子的外边框margin

    不改变盒子的大小

          解决外部矛盾

       两个盒子都具有margin的时候,他俩的外部间距取并没有相加,最两者之间的大值

       能设置负值

       四条边也可以分开设置,写法同padding

margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;
margin-inside: 100px;
margin-outside: 100px;

   浮动的现象:

   脱离标准文档流

    文字围绕效果

   设置浮动后行内标签可以设置宽高; (行内标签设置宽高的第一种方式,display=inlineblock/block

   先让为主

   浮动的遮盖了标准的盒子

    盒子自动换行,且想让换行的进去一点儿,用margin负值

   清除浮动:

   为什么要清除浮动?

    为了让父盒子不浮动,但是高度还能被撑起来.

   方法:

    方法1:都浮动起来

    方法2:给父盒子设置高度

    方法3,再加一个div,不建议使用

    方法3.5 .clearfix {clear:both};这是一个不讲道理的用法,你在遇到要清除浮动的情况下,可以考虑词用法

    方法4是一种障眼法,让黑哥出来,再隐藏,给他变成块,又把高度变成0,最后用到clear:both官方推荐写法    

.clearfix:after {
clear:both ;
content: "黑哥";
display: block;
visibility: hidden; /* 元素隐藏了 */
height: 0;
} <div class="father clearfix">

     方法5overflow:hiddern;通过这个操作就可以实现清除浮动

  overflow:

    visible:默认是它,溢出也可见

    hidden:溢出之后隐藏,不占位

    scroll:出来一个滚轮,溢出之后滚轮才能滑动

    auto:不溢出没有滚轮,溢出之后滚轮才出现

day52 Pyhton 前端03的更多相关文章

  1. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  2. 前端03 /css简绍/css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  3. day15_雷神_前端03

    # 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...

  4. day56 Pyhton 前端Jquery08

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

  5. day50 Pyhton 前端01

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

  6. 前端 ------ 03 body标签中的相关标签

    列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...

  7. (Pyhton爬虫03)爬虫初识

    原本的想法是这样的:博客整理知识学习的同时,也记录点心情...集中式学习就没这么多好记录的了! 要学习一门技术,首先要简单认识一下爬虫!其实可以参考爬虫第一章! 整体上介绍该技术包含技能,具体能做什么 ...

  8. day57 Pyhton 前端Jquery09

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

  9. day55 Pyhton 前端Jquery07

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

随机推荐

  1. springboot x.x.x RELEASE pom 第一行报错解决办法

    springboot x.x.x RELEASE pom 第一行报错解决办法 在pom.xml 文件的properties中加入maven jar插件的版本号 <properties> & ...

  2. 原生JDK网络编程- NIO之Reactor模式

    “反应”器名字中”反应“的由来: “反应”即“倒置”,“控制逆转”,具体事件处理程序不调用反应器,而向反应器注册一个事件处理器,表示自己对某些事件感兴趣,有时间来了,具体事件处理程序通过事件处理器对某 ...

  3. java安全编码指南之:Number操作

    目录 简介 Number的范围 区分位运算和算数运算 注意不要使用0作为除数 兼容C++的无符号整数类型 NAN和INFINITY 不要使用float或者double作为循环的计数器 BigDecim ...

  4. 交换机&&路由器

    交换机 交换机就是一种信号转发设备,它帮助两个网络节点进行信号的传输 路由器 路由器路由器,要了解什么是路由器,首先我们要先明白何为'路由'? 路由:是指把数据从一个地方传送到另一个地方的行为和动作 ...

  5. Fragment时长统计那些事

    注:本文同步发布于微信公众号:stringwu的互联网杂谈 frament时长统计那些事 页面停留时长作为应用统计的北极星指标里的重要指标之一,统计用户在某个页面的停留时长则变得很重要.而Fragme ...

  6. 5分钟掌握企业LVM磁盘划分

    逻辑卷管理LVM是一个多才多艺的硬盘系统工具.无论在Linux或者其他类似的系统,都是非常的好用.传统分区使用固定大小分区,重新调整大小十分麻烦.但是,LVM可以创建和管理“逻辑”卷,而不是直接使用物 ...

  7. tomcat在linux服务器启动时报错Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000794500000, 576716800, 0) failed; error='Cannot allocate memory' (errno=12)

    原因是内存不足了 解决办法:1.top命令查看后台进程,看哪些可以关闭 2.ps -ef |grep tomcat看哪些不用的tomcat起着,也可以从这里关 3.加大这个tomcat的内存, 在ca ...

  8. python之map

    python之Map函数   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 # map()函数使用举例 # 功能: ...

  9. 【二叉树-最长路径系列(任意路径)】直径、最长同值路径、 最大路径和(DFS、树形DP)

    总述 这类题目都是求一个最长路径,这个路径可以不经过根节点. 使用dfs(即递归地遍历树)的方法.维护一个全局最长路径max作为最终结果,而递归方法dfs返回的是含根节点的最长路径.(若不使用全局变量 ...

  10. 【二叉树-BFS系列1】二叉树的右视图、二叉树的锯齿形层次遍历

    题目 199. 二叉树的右视图 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. 示例: 输入: [1,2,3,null,5,null,4] 输出: [1, ...