day52 Pyhton 前端03
内容回顾
块级标签:
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的更多相关文章
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端03 /css简绍/css选择器
前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...
- day15_雷神_前端03
# 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...
- day56 Pyhton 前端Jquery08
前端 内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...
- day50 Pyhton 前端01
文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- (Pyhton爬虫03)爬虫初识
原本的想法是这样的:博客整理知识学习的同时,也记录点心情...集中式学习就没这么多好记录的了! 要学习一门技术,首先要简单认识一下爬虫!其实可以参考爬虫第一章! 整体上介绍该技术包含技能,具体能做什么 ...
- day57 Pyhton 前端Jquery09
内容回顾: - 筛选选择器 $('li:eq(1)') 查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find() 查找后代的元素 - ...
- day55 Pyhton 前端Jquery07
昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...
随机推荐
- C#程序执行时设置刷新等待
背景 C#在进行某些调用操作时需要隐藏背景,等待刷新. 步骤 1.前端设置 <!--Loading Mask Region--> <div> <div id=" ...
- C#中SQL Server的几点注意事项
背景 在C#中处理sql会遇到一些奇怪的问题,在这里做一个小的总结,内容会随着经历不断积累. 内容 1.DataTime?和DataTime的区别. DataTime?定义的数据为可空类型,允许其为 ...
- ARM函数调用总结
ARM架构寄存器介绍 ARM架构下处理器有7种工作模式: 1. USR模式:正常用户模式,在USR模式下进程正常执行 2. FIQ模式(Fast Interrupt Request):处理快速中断模式 ...
- 【新阁教育】基于Log4Net实现日志信息双向存储(含源码)
1.引言 在上位机开发中,日志记录是必不可少的,我们可以通过日志记录做日志分析及错误追踪.初学者会采用txt文本写入来实现日志保存,但是文本写入不是线程安全,当存在多个线程同时写入日志时,就会出现一些 ...
- Jenkins下Vue自动部署(一)
1,服务器上安装docker http://www.runoob.com/docker/ubuntu-docker-install.html?tdsourcetag=s_pctim_aiomsg 2, ...
- linux基础命令一、
命令格式: 命令 -选项 参数 uname -r 查看内核版本 uname -m 查看系统版本 alias 别名. 举例: alias grep ='grep --color=auto' ...
- Unity3D与iOS的交互
1. 关于Unity3D Unity3D(以下简称U3D)是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开 ...
- [LeetCode]534. 游戏玩法分析 III(Mysql)
题目 Table: Activity +--------------+---------+ | Column Name | Type | +--------------+---------+ | pl ...
- python变量及简单数据类型
python 目录 python 1.变量 1.变量的定义 2.变量的命名 3. 关键字 4.变量的命名规则 5.变量的类型 5.不同类型变量之间的计算 6.变量的输入 7.变量的格式化输出 8.格式 ...
- kubernetes部署Percona XtraDB Cluster集群
PXC介绍 全称percona-xtradb-cluster,提供了MySQL高可用的一种实现方法.PXC集群以节点组成(推荐至少3节点,便于故障恢复),每个节点都是基于常规的 MySQL Serve ...