一.架构分析

页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层

二.css引入

- 行间式 
<div style="width: 100px; height: 100px"></div>
- 内联式 
<head><style>
选择器 {width: 100px;height: 100px;}
</style></head>
- 外联式 /* 适合团队高效率开发, 耦合性低, 复用性强 */
<link rel='stylesheet' type='text/css' href='./index.css'>

三.三种引入"优先级"分析

1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式

四选择器

选择器:css连接html标签的桥梁,建立连接后就可以控制标签样式
* | div | . | #
标签: 一般用于最内层样式修饰
类:使用范围最广,布局的主力军
id:唯一标识的布局,不能重复
优先级:!important> id >类[属性] >标签> 通配 (优先级:同一标签同一属性)
<style>span{font-size:20px!important;}</style>(尽量不要使用!important)

组合选择器权重(同类型个数比较)
伪类选择器

1.组合选择器

- 群组选择器

/* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */
div, #div, .div {color: red}

- 后代(子代)选择器

.sup .sub {
后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套)
}
.sup > .sub {子代}

- 兄弟(相邻) 选择器

.up ~ .down {兄弟}
.up + .down {相邻}

- 交集选择器

section.ss#s {标签类名id名综合修饰}

2.复杂选择器的优先级

1. 越靠近标签的优先级越高(就近原则)
2. 权重的计算
　　1. 内联样式1000
　　2. ID选择器100
　　3. 类选择器10
　　4. 元素选择器1

div#d1(101)/div.c1(11)/div .c1

3.伪类选择器

a链接标签四大伪类
:link 初始状态
:hover(鼠标悬浮!!!!!!)
:active(鼠标点击中)
:visited
:focus(input标签获取光标焦点)
位置相关
:nth-child() | :last-child |:first-child先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
伪元素
:before (盒子渲染前)
:after (盒子渲染后)
:focus (表单标签获取焦点)
:blur

五 CSS属性

0. 高度和宽度,标签的分类

1. 标签的分类(标签默认是否独占一行)
1. 块级标签
div p h1~h6 hr ul>li table>tr
2. 行内标签
span a input img i...
2. 块级标签才能设置宽和高
3. max-width: 100%
- max-width --> 最大的宽度
- 100% --> 所有涉及到%都是指占父标签的百分比

1. 字体相关

1. 字体 --> font-family： “”
/*字族*/ font-family: "STSong", "微软雅黑";
/*STSong作为首选字体, 微软雅黑作为备用字体*/
2. 字体大小 --> font-size: 40px;
3. 字体粗细 --> font-weight: 900;
4. 字体颜色 --> color
- red 直接写英文名字
- #FFFFFF
- rgb(255,255,255)
- rgba(255,255,255,0.6)

2. 文本属性

1. text-align:center 对齐方式
2. text-indent: 28px 首行缩进
3. line-height：父标签的高度（实现单行文本的垂直居中）
4. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))

3. 背景background

1. background-color:red
2. background-image 背景图片(九宫格涮葫芦娃) url() no-repeat 50% 50%
3. background: url() no-repeat center
4. background-attachment: fixed 背景不动的实例

4. 边框

1. border-width (边框宽度)
2. border-style (边框样式)
3. border-color (边框颜色)
简写:border: 1px solid red;
border-radius: 50%; --> 画圆

5. CSS盒子

内容(content)-->内填充(padding)-->边框(border)-->外边距(margin)
1. content (内容) 提供给内容(文本,图片,子标签整个盒子)的显示区域
2. padding (内填充) 介于border与content之间的区域
想让标签撑起来（内容和边框之间的距离变大）设置padding
3. border (边框) 宽度颜色自身定义,padding和content颜色有背景色填充
4. margin (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
控制盒子位置==>盒模型布局,不参与盒子显示,其他都参与盒子显示

注意:
当两个标签之间的外边距有重叠的话，会按照最大的外边距来显示
要习惯看浏览器console窗口那个盒子模型

# 整体设置 padding: 上右下左 (无值边取对边)
# 整体设置 border: 10px solid black;

边界圆角: border-radius:50%; 圆形

坑1:父子联动;
解决方案1:子级里放个浮动 ,后再margin布局
float:left;
margin-top:30px;
解决方案2:position:relative;
top:30px;
坑2:上兄弟下margin和下兄弟上margin重叠取大值

6. 显示效果display

脱离文档流 ,其中就是产生了BFC

display:
- none 不显示(不让标签显示,不占位)
- block 按照块级标签来显示
- inline 按照行内标签来显示
- inline-block 既有块级又有行内的效果

/* inline */
/*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/
/*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/
/*3.content由文本内容撑开*/
/*4.inline标签只嵌套inline标签*/
/* inline-block */
/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
/*2.支持所有css样式*/
/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
/*4.inline-block标签不建议嵌套任意标签*/
/* block */
/*1.异行显示, 不管自身区域多大, 都会独占一行*/
/*2.支持所有css样式*/
/*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/
/*4.block可以嵌套任意标签*/

7. float(浮动)

1. 多用于实现布局效果
1. 顶部的导航条
2. 页面左右分栏 (博客页面:左边20%,右边80%)
2. float取值:
1. left
2. right
3. none
3. 浮动的特点
1. 任何标签都可以浮动
2. 一个标签浮动之后都变成块级标签（可以设置宽和高）
a标签float之后就可以设置高和宽
3. 浮动的标签脱离文档流（它的位置会被下面的标签挤占）

8 .overflow

/*overflow: 处理内容超出盒子显示区域*/
overflow: auto | scroll | hidden
/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
/*scroll: 一直采用滚动方式显示*/
/*hidden: 隐藏超出盒子显示范围的内容*/

9. clear 清除浮动

--> 清除浮动的副作用(内容飞出,父标签撑不起来)
1. 定义一个用于清除浮动的工具样式类,结合伪元素来实现
.clearfix:after {
content: "",
display: "block",
clear: both;
}

2. clear取值:
1. left
2. right
3. both

10. 溢出

1. 标签的内容放不下(溢出)
2. 取值:
1. hidden --> 溢出的部分隐藏起来
2. scroll --> 出现滚动条
3. auto 根据内容自行调整
4. scroll-x
5. scroll-y
例子:
圆形头像的例子
1. overflow: hidden
2. border-radius: 50% (圆角)

11. 定位postion

0. static(默认)
1. 相对定位---相对自己本来应该在的位置
布局后不影响自身原有位置,不脱离文档流
postion: relative;
left: 100px;
2. 绝对定位---相对已经定位过的父标签
父级必须自己设置宽高,完全脱离文档流
position：absolute;
left: 100px;
3. 固定定位---相对浏览器窗口
相对于页面窗口是静止的,完全脱离文档流
postion: fixed;
right: 50px;
bottom: 50px;

补充:
脱离文档流的3种方式
float
absolute
fixed

12. opacity (不透明度)

1. 取值0~1
2. 和rgba()的区别:
1. opacity改变元素\子元素的透明度效果
2. rgba()只改变背景颜色的透明度效果

13. z-index

1. 数值越大,越靠近你
2. 只能作用于定位过的元素

3. 自定义的模态框示例

14. 精灵图:

<head>
<style type="text/css">
.lt1 {
width: 155px;
height: 48px;
background: url('img/bg.png') no-repeat;
background-position:0 0;
}
.lt1:hover {
cursor: pointer;
background: url('img/bg.png') no-repeat 0 -48px;
}
/*1.显示区域一定要与精灵图目标小图大小一致*/
/*2.通过背景图片定位方式将目标小图移至显示位置*/
background-position里通常是写负值
</style>
</head>
<body>


<div class="box"></div>
<div class="lt1"></div>
</body>

REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/7999532.html

15 流式布局思想

1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem

Python-CSS入门的更多相关文章

【Python全栈-CSS】CSS入门
CSS入门教程参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
Python爬虫入门之Urllib库的高级用法
1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...
Python爬虫入门之Urllib库的基本使用
那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解 ...
3.Python爬虫入门三之Urllib和Urllib2库的基本使用
1.分分钟扒一个网页下来怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解释才呈现出来的,实质它是一段HTML代码,加 JS.CSS ...
2.Python爬虫入门二之爬虫基础了解
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...
Python之入门篇1
一.安装python解释器官网: https://www.python.org/downloads/windows/ 自行下载安装,添加环境变量 #测试安装是否成功 windows --> 运 ...
day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
Python爬虫入门四之Urllib库的高级用法
1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...
Python爬虫入门二之爬虫基础了解
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...
转 Python爬虫入门四之Urllib库的高级用法
静觅 » Python爬虫入门四之Urllib库的高级用法 1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我 ...

随机推荐

Softmax 损失-梯度计算
本文介绍Softmax运算.Softmax损失函数及其反向传播梯度计算, 内容上承接前两篇博文损失函数 & 手推反向传播公式. Softmax 梯度设有K类, 那么期望标签y形如\([0, ...
MATLAB：图像乘除法运算（immultiply、imdivide函数），同时比较双精度类型图像运算结果
图像乘除法运算涉及到immultiply.imdivide函数,实现代码如下: 1.图像之间的乘法运算 close all; %关闭当前所有图形窗口,清空工作空间变量,清除工作空间所有变量 clear ...
HDFS集群PB级数据迁移方案-DistCp生产环境实操篇
HDFS集群PB级数据迁移方案-DistCp生产环境实操篇作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 用了接近2个星期的时间,终于把公司的需要的大数据组建部署完毕了,当然,在部 ...
JVM总结（四）：JVM类加载机制
这一节我们来总结一下JVM类加载机制.具体目录如下: 类加载的过程类加载过程概括说说引用详解类加载全过程: 加载验证准备解析初始化虚拟机把描述类的数据从Class文件加载到内存,并对数 ...
python---生成验证码图片
工具插件verifycode.py中,记得使用时需要在路由根目录中引入文字资源文件 # coding:utf8 # __author: Administrator # date: // # /usr/ ...
bzoj千题计划302：bzoj3160: 万径人踪灭
https://www.lydsy.com/JudgeOnline/problem.php?id=3160 不连续的回文串数量=所有的回文序列数量-连续的回文子串连续的回文子串: manacher ...
XML文件详解以及解析
转自:https://blog.csdn.net/com_ma/article/details/73277535 一.xml基础详解: 1.概述: xml:即可扩展标记语言,xml是互联网数据传输的重 ...
python 小爬虫爬取博客文章初体验
最近学习 python 走火入魔,趁着热情继续初级体验一下下爬虫,以前用 java也写过,这里还是最初级的爬取html,都没有用html解析器,正则等...而且一直在循环效率肯定### 很低下 imp ...
vue中$mount与el区别
vue中的$mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中用法: 如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中反之没有指定el, ...
VS2013中修改MFC对话框左上角和exe图标
一.开发环境 1.VS2013: 2.C++ / MFC: 二.更改步骤 1)创建一个新工程,可以什么都不加.打开“资源视图”, 右键点击项目名称,选择“添加资源”,导入“Icon”资源文件(事先准备 ...

Python-CSS入门