Python-html css 盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html基础复习</title>
</head>
<body>
<!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
<!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
<!-- 编辑器: webstrom | sublime | atom | pycharm --> <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾) <abc> | <num1> | <nav-title> -->
<!-- 指令: <!doctype html> 注释 -->
<!-- 转移字符: ≷ --> <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style --> <!-- 分类: 单双 | dispaly -->
<!-- inline: span | b | i | a -->
<!-- inline-block: img | input -->
<!-- block: div | hn | p | ul | hr | br -->
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css复习</title>
</head>
<body>
<!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
<!-- 选择器 作用域 样式块 --> <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in --> <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF --> <!-- 4.文本样式 -->
<style>
span {
font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2';
text-align: center;
color: red;
text-decoration: underline;
letter-spacing: 3px;
word-spacing: 10px;
text-indent: 2em;
}
</style> <!-- 5.选择器 -->
<style type="text/css">
/*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/
/*标签 类 id*/
/*组合选择器*/
/*伪类选择器*/ /*优先级：*/
/*基础选择器： !important > id > 类[属性] > 标签 > 通配*/
/*组合选择器: 权重(同类型个数比较)*/
.b > .s {}
.b .s {}
.b + .s {}
.b.s {}
.b[class] {} #ss { font-size: 50px; }
span.s2 { font-size: 40px; }
[class] { font-size: 35px; }
.s1 { font-size: 30px; }
span { font-size: 20px!important; } /* 标签名 | . | # */
/*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
/* [属性名="属性值"] */ </style> <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span> <style type="text/css">
/* 伪类选择器 */
/* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
/* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
/* :not() */
/* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
p:nth-child(3) { font-size: 100px }
p:nth-of-type(2n) { font-size: 50px }
</style>
<div class="box">
<span>span</span>
<p>pp1</p>
<p>pp2</p>
</div> <!-- 6.精灵图 -->
<style type="text/css">
.pg {
width: 200px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 10px;
left: calc(50vw - 100px);
}
.pg {
background: url('img/bg.png') no-repeat;
/*将背景图片的具体位置移至显示区域*/
background-position: -300px -350px;
}
</style>
<div class="pg"></div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型复习</title>
<style type="text/css">
abc {
display: inline-block;
} .box {
background: orange; /*文本类型的样式具有继承关系*/
font-size: 30px;
font-weight: 900;
/*inline-block不会继承*/
text-decoration: underline;
text-indent: 2em;
line-height: 60px;
}
</style>
</head>
<body>
<!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) --> <div class="box">
<span>inline</span>
<div>block</div>
<abc>inline-block</abc>
</div> <!-- 1.盒子的四个组成部分 -->
<!-- content | padding | border | margin -->
<!-- display: inline | inline-block | block --> <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 --> <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
<!-- 注: padding-top可以将自身与自身第一个子级分离 -->
<style type="text/css">
.p {
width: 20px;
height: 20px;
background: red;
}
.b {
width: 100px;
padding-bottom: 100px;
border-bottom: 1px solid black;
}
.c {
background: pink;
/*border: 1px solid black;*/
border-style: solid;
padding-left: 32px;
padding-bottom: 32px;
margin-left: 32px;
/*text-indent: 2em;*/
}
</style>
<div class="b">
<div class="p"></div>
</div>
<div class="c">123</div> <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 --> <!-- margin: 控制盒子位置 => 盒模型布局 --> <!-- 2.边界圆角 -->
<style type="text/css">
.bj {
width: 100px;
height: 100px;
background: pink;
}
.bj {
/*border-radius: 20px;*/
/*border-radius: 40%;*/
/*border-radius: 10px 30px 50px;*/
border-radius: 10px / 50px;
}
</style>
<div class="bj"></div> <!-- 3.display --> <!-- 4.margin布局 -->
<!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
<style type="text/css">
.hh {
width: 30px;
height: 30px;
background: black;
/*display: inline-block;*/
float: left;
/*自身动,控制自身布局*/
/*margin-top: 30px;*/
/*margin-left: 30px;*/ /*右兄弟动,辅助兄弟布局*/
margin-right: 100px;
/*下兄弟动,辅助兄弟布局*/
/*margin-bottom: 30px;*/
}
.xx {
width: 30px;
height: 30px;
background: red;
/*display: inline-block;*/
float: left;
}
</style>
<div class="hh"></div>
<div class="xx"></div> <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
<!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
<style type="text/css">
.x, .z {
width: 50px;
height: 50px;
background: blue;
}
.x {
/*margin-bottom: 40px;*/
}
.z {
margin-top: 10px;
background: yellow;
}
.y {
width: 10px;
height: 10px;
background: red;
/*margin-top: 10px;*/
}
/*坑1解决方案*/
.y {
/*方案1*/
/*float: left;
margin-top: 10px;*/ /*方案2*/
/*position: relative;*/
position: absolute;
/*top: auto;*/
/*top: 20px;*/
margin-top: 20px;
}
.z {
/*position: relative;*/
}
</style>
<div class="x"></div>
<div class="z">
<div class="y"></div>
</div>
</body>
</html>
Python-html css 盒模型的更多相关文章
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- [k]css盒模型
box-sizing : content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
随机推荐
- Quartz-中断正在执行的任务
转: Quartz-中断正在执行的任务 2017年11月15日 21:19:17 小小工匠 阅读数:6715更多 所属专栏: Quartz手札 版权声明:[show me the code ,ch ...
- Word2010中的页眉怎样删除和添加横线
http://jingyan.baidu.com/article/f79b7cb3bb3c629144023e05.html 我们在使用Word2010编辑文档中时,有时需要在页眉下方删除或添加一条横 ...
- Linux新系统的安全优化和内核参数优化
拿到一个新的linux系统需要做的安全和内核优化,主要是为了提升系统安全和提升性能,满足后续的应用需要.这里简单记录一下拿到一个新的系统需要做的一些事情,仅此抛砖引玉,具体可根据自己实际情况进行设置. ...
- WCF开发实战系列四：使用Windows服务发布WCF服务
WCF开发实战系列四:使用Windows服务发布WCF服务 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 上一篇文章中我们通过编写的控制台程序或WinForm程序来为本 ...
- Grafana的基本使用
Grafana的基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 简单的来说,Grafana 是基于JS开发的,功能齐全的度量仪表盘和图形编辑器,帮助开发人员发现问题的工具. ...
- mysql -- 慢日志使用
修改配置文件 show_query_log = OFF 是否开启慢日志查询 long_query_time = 2 时间限制,超过次时间,则记录 slow_query_log_file = /usr/ ...
- iframe伪造ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 配置Arcengine10.1+java开发环境(Eclipse)
以下开发环境配置是假定用户已经安装了Java开发的IDE(Eclipse) 软件准备 (一)ArcEngine 10.1 安装包 提取码:poa0 (二)ArcGIS License Manager ...
- 矩阵NumPy
常量: np.pi π 创建矩阵数组 import numpy as np # array=np.array([[1,2,3],[5,6,7]]) #定义一个2行3列的矩阵数组.2行=2维 # pri ...
- luogu P1445 [Violet]嘤F♂A
博主决定更博文啦 这道题一开始没什么思路啊qwq 要求 \(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\) 的正整数解总数 首先通分,得 \[\frac{x+y}{xy} ...