CSS选择器
- 3.标签选择器(TAG选择器)
- 4.群组选择器（分组选择器）
- 5.通配选择器
- 6.层次选择器
- 7.属性选择器
- 8.伪类选择器
- 9.CSS继承
- 10.CSS优先级
- - **相同样式优先级：**
  - **内部样式与外部样式：**
  - **单一样式优先级：**
  - **limportant**
  - **标签+类与单类**
  - **群组优先级**
  - 层次优先级
- 11.CSS盒子模型
- - **组成**:
  - **使用场景**：
  - **盒子模型的一些问题：**
- 12.标签分类
- 13.显示框类型
- 14.标签嵌套规范
- 15.溢出隐藏
- 16.透明度与手势
- 17.最大、最小宽高
- 18.CSS默认样式?
- 19.float浮动

CSS选择器

3.标签选择器(TAG选择器)

div{ } < div >< /div >
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器

4.群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器

*{ }-> div, ul, li,p,h1,h2……{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时。

6.层次选择器

后代 M N { }
父子 M>N { }
兄弟 M~N { } 当前M下面的所有兄弟N标签
相邻 M+N { } 当前M下面相邻的N标签

7.属性选择器

M[attr] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[ ][ ][ ]:组合匹配

8.伪类选择器

M:伪类{}
:link 访问前的样式 ( 只能添加给a标签)
:visited 访问后的样式 ( 只能添加给a标签)
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式可以添加给所有的标签！
:after、:before 通过伪类的方式给元素添加一段文本内容，使用content 属性
:checked、:disabled，:focus 都是针对表单元素的

结构性伪类选择器：
:nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项，n值，表示从0到无穷大
:first-of-type、:first-child
:last-of-type、:last-child:
only-of-type、:only-child

:nth-of-type()和:nth-child()的区别：
type:类型
child:孩子

9.CSS继承

文字相关的样式可以被继承

布局相关的样式不能被继承（默认是不能被继承，但是可以设置继承属性 inherit 值）

10.CSS优先级

相同样式优先级：

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式：

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级：

style行间 > id > class > tag > * > 继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

limportant

提升样式优先级，非规范方式，不建议使用。（不能针对继承属性进行优先级的提升）

标签+类与单类

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。
标签+类 > 单类

层次优先级

1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

2.约分比较
ul li. box p input{}
. hello span#elem{}

改完后

li p input{}
#elem{}

11.CSS盒子模型

组成:

content物品 -> padding 填充物 -> border 包装盒 -> margin盒子与盒子之间的间距
content :内容区域 width和height组成的
padding:内边距(内填充)
只写一个值 :30px （上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右，下，左)

使用场景：

1.不用再去计算一些值。
2.解决一些100%的问题。

单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：
1.背景颜色会填充到margin以内的区域
2.文字会在content区域

盒子模型的一些问题：

1.margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。

解决方案：
1.BFC规范
2.想办法只给一个元素添加间距。

2.margin传递的问题
只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

解决方案：
1.BFC规范
2.给父容器加边框。
3. margin换成padding。

扩展：

margin左右自适应是可以的，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习)
width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

12.标签分类

按类型
block: div、p、ul、li、h1…

1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

inline: span、a、em、strong、img…

1.挨在一起的
2.有些样式不支持,例如:width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的

inline-block: input、select…
1.挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的

（详情：https://www.w3.org/TR/html5/dom.html）

按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input…

非替换元素：将内容直接告诉浏览器，将其显示出来。
div、h1、p……

13.显示框类型

display:block inline inline-block none…

区别：
display:none 不占空间的隐藏
visibility:hidden占空间的隐藏

14.标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

块能够嵌套内联

< div >
< span >< /span >
< a href=“#” >< /a >
< /div >

块不一定能嵌套块

< div >
< div >< /div >
< /div >

特殊：
错误的写法：
< p >
< div >< /div >
< /p >

内联是不能嵌套块

错误的写法：
< span >
< div >< /div >
< /span >

特殊：
正确的写法：
< a href=“#” >
< div >< /div >
< /a >

15.溢出隐藏

overflow:
visible:默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

16.透明度与手势

opacity:0(透明)~1(不透明)
0.5(半透明)
注：占空间、所有的子内容也会透明
rgba( ) :0 ~ 1
注：可以让指定的样式透明，而不影响其他样式
cursor:手势
default :默认箭头
要实现自定义手势：
准备图片:. cur、. ico

17.最大、最小宽高

min-width、min-height
max-width、max-height
%单位：换算->已父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height：100%； body:100%; html:100%;
html, body{ height:100%;}
. contrainer{height:100%;}

18.CSS默认样式?

没有默认样式的: div、span

有默认样式的：
body-> marign :8px
h1-> margin :上下 21.440px
font-weight :bold
p->margin :上下16px
ul-> margin :上下 16px padding: 左 40px
默认点:list-style :disc
a-> text-decoration: underline;

css reset:
*{ margin:0; padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1, ul{ margin:0; padding:0;}
ul{ list-style :none;}
a{text-decoration: none; color:#999;}
img{display:block}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

（ https://blog.csdn.net/brain_bo/article/details/81560444）

body,p,h1, ul{ margin:0; padding:0;}
ul{ list-style :none;}
a{text-decoration: none; color:#999;}
img{display:block}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

19.float浮动

脱离文档流，延迟父容器靠左或靠右进行排列。
left、right、none

文档流：
文档流是文档中可显示对象在排列时所占用的位置。

float特性：
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值：
left
right
none(默认)

float注意点：
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。

换行排列：
主要给块元素添加，但也可以给内联元素添加。

利用clear属性清除float浮动
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow:hidden (BFC规范),如果有子元素想溢出,那么会受到影响。
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
( clear属性只会操作块标签，对内联标签不起作用)

众里寻他千百度，蓦然回首，那人还在写作业（3）相关推荐

众里寻他千百度,蓦然回首，那人却在灯火阑珊处的个人感悟
[color=blue][size=medium] 今天偶然想起了这句流行的诗句,以前不太明白他的含义,可能是随着时间的流逝,自己好像对这句话有了些模糊的认识,个人理解,希望大家指教!! 首先从感情上 ...
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。----deferred对象！
2019独角兽企业重金招聘Python工程师标准>>> jQuery的deferred对象详解作者:阮一峰一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时 ...
这样的文章我们搞技术的人还能写得出来吗
环蓉皆平川,少有丘与山,古时谓天府,今之亦亦然.中有蜀汉祠,先贤庙于前,欲效前朝事,今以少桃园.抑鬱不得欢,幸闻有龙泉,山势多阿娜,古风以蔚然.噫,何不欣然往,熟与吾往,熟与吾同? 今有叁人者.曰张, ...
ABP 6.0.3多类型数据库dbcontext连接方案-众里寻他千百度蓦然回首那人却在灯火阑珊处
有个需求需要从mysql数据库中读取数据我又喜欢用sqlite保存其他数据(主要是再安装一个数据库很麻烦,数据量又不大) 当我脑海里有个不成熟想法的时候,我真想回过去掐死这个想法. 一个mysql, ...
根本不赚钱，你为何还坚持写博客？
前言从大二注册博客至今已有8年码龄了,回忆起点点滴滴,从最开始的编程小白,一遇到不懂的问题就从最开始的编程小白,一遇到不懂的问题就问老师.百度.多少人还记得当你打开编辑器,敲入几行代码,控制台输出: ...
HUDSON邮件模板问题众里寻他千百度，蓦然回首，那‘人’却在灯火阑珊处
[众里寻他千百度,蓦然回首,那'人'却在灯火阑珊处] [问题描述] hudson邮件功能太弱了,项目经理说,能不能换成好看的. 我就在hudson仓库中找了Email-ext+plugin( ...
众里寻他千百度，蓦然回首，你还在这里
众里寻他千百度,暮然回首,你却在灯火阑珊处.年关刚过,梦想未来,回首过去,捡拾起曾经的点点滴滴,回顾这不顾一切趟出来的路,总想着在哪里记录一下这一路的水花,却不知从哪里说起,打开网络,突然想起,咱还有 ...
百度由来之众里寻他千百度
2019独角兽企业重金招聘Python工程师标准>>> 在所谓的制表符(Tab)三巨头中, 嗯,也许你更常听到的是蝙蝠侠(BAT)三巨头但由于我们是程序员,是键盘党,是tab键的重 ...
徐磊（Devops）：一名写了十几年代码但还没写够的程序员
徐磊(Devops 社区领袖) [个人介绍] 徐磊,微软MVP(微软最有价值专家,大中华区域社区技术总监,Devops 社区领袖),从事过网管.技术支持.网络.软件开发等工作,一名写了十几年代码但还没 ...

众里寻他千百度，蓦然回首，那人还在写作业（3）

目录