前端学习日志-5-css

注释 /*内容*/
@import 导入css样式表

css3新特性

1.选择器
E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式
E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素
E:empty 选择没有子元素的每个E元素
E:target 选择当前活动的E元素
::selection 选择被用户选取的元素部分
属性选择器 E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

2.文本

3.边框
border-raduis 边框的圆角
border-image 边框图片
box-shadow 阴影

4.过度
transition

5.形状转换
transform

6.动画

7.布局
flex

8.媒体查询

9.渐变

10.背景

长度单位

• px
  px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点
• em
  参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
• rem
  css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
• %
  一般宽泛的讲是相对于父元素，但是并不是十分准确。
  对于普通定位元素就是我们理解的父元素
  对于position: absolute;的元素是相对于已定位的父元素
  对于position: fixed;的元素是相对于ViewPort（可视窗口）

选择器

基本选择器

例子	介绍
*	通用元素选择器，匹配任何元素
div	标签选择器，匹配所有使用div标签的元素
.head	class选择器，匹配所有class属性中包含head的元素
#name	id选择器，匹配所有id属性等于name的元素

组合选择器

选择器	介绍
E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E>F	子元素选择器，匹配所有E元素的子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

伪类选择器

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

选择器	介绍
E:first-child	匹配父元素的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素

伪元素选择器

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们

E:first-line	匹配E元素的第一行
E:first-letter	匹配E元素的第一个字母
E:before	在E元素之前插入生成的内容
E:after	在E元素之后插入生成的内容

属性选择器

[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

优先级
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
优先级相同，选择最后的。

继承

可能被继承的属性

字体属性

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height

文本属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性:visibility
表格布局属性

caption-side
border-collapse
border-spacing
empty-cells
table-layout

列表属性

list-style-type
list-style-image
list-style-position
list-style

生成内容属性:quotes
光标属性:cursor
页面样式属性

page
page-break-inside
windows
orphans

声音样式属性

speak
speak-punctuation
speak-numeral
speak-header
speech-rate
volume
voice-family
pitch
pitch-range
stress
richness
azimuth
elevation

• 所有元素可继承属性：
  元素可见性：visibility
  光标属性：curso
• 内联元素可以继承的属性:
  字体系列属性
  除text-indent、text-align之外的文本系列属性
• 块级元素可以继承的属性:
  text-indent、text-align

css盒模型

标准盒（W3C）宽度=content的宽度

怪异盒（IE）宽度=content+boder+padding的宽度

margin

margin叠加（普通文档流的垂直方向）

外边距塌陷问题，当两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，但只有上下外边距会发生塌陷。 计算方式： 1. 两个块margin都为正，取其较大的一个 2. 两个块magin都为负，取其绝对值较大的一个 3. 一个块为负，一个块为正，取两个块margin之和

1、
margin: 10px; //所有4个外边距都是10px
2、
margin: 10px 20px; //上下外边距10px，左右外边距20px
3、
margin: 10px 20px 30px; //上外边距10px，左右外边距20px，下外边距30px
4、
margin: 10px 20px 30px 40px; //上外边距10px，右外边距20px，下外边距30px，左外边距40px

boder

按顺序设置这三个参数border-width、border-style、border-color

border-width	描述
thin	定义细的边框
medium	默认。定义中等的边框
thick	定义粗的边框
length	自定义边框的宽度
inherit	规定应该从父元素继承边框宽度

border-style	描述
none	无边框
dotted	点状边框，大部分浏览器中为实线
dashed	虚线，大多数浏览器中为实线
solid	实线
double	定义双线。双线的宽度等于 border-width 的值
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值
inset	定义 3D inset 边框。其效果取决于 border-color 的值
outset	定义 3D outset 边框。其效果取决于 border-color 的值
inherit	规定应该从父元素继承边框样式

border-color	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）
transparent	默认值。边框颜色为透明
inherit	规定应该从父元素继承边框颜色

• border-width
  border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0
  设置同margin，border-width:thin medium thick 10px; //上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框
• border-style
  border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现
  设置同margin，border-style:dotted solid double dashed; //上边框是点状，右边框是实线，下边框是双线，左边框是虚线
• border-color
  border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色
  设置同margin，border-color:red green blue pink; // 上边框是红色，右边框是绿色，下边框是蓝色，左边框是粉色
  请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

padding

padding参数同margin，但padding不允许负值

content

display

none 不在render树，但在DOM树上
visibility：hidden在render和DOM树上

flex

父元素设为flex布局后，子元素float、clear、vertical-align失效

flex:number number代表父元素可用空间，子元素占的份数，默认0
比如父元素800px，子1 200px，子2 150px，子3 flex 1为450px

flex-direction
row 空 1 2 3
row-reverse 空 3 2 1
column
coulumn-reverse

justify-content 设置子元素
flex-star 默认，靠近头排列
flex-end 靠近尾排列，与reverse不同，空 1 2 3
center 如果主轴方向竖直，为竖直居中
space-around 平分剩余空间，左右侧margin一致
space-bewteen 两边贴紧，平分剩余空间

flex-wrap
默认不换行，项目排在轴线上，不足会牺牲宽高
nowrap
wrap

align-items 设置子元素 单行
flex-star
flex-end
center
stretch 拉伸到和父元素一样，子盒子不能给高度

align-content 设置子元素 多行，单行无效
flex-star
flex-end
center
space-around
space-bewteen
stretch 平分父元素

会因为margin牺牲width/height

BFC

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

触发

根元素 <body>
float 非none
position：absolute、fixed
display：inline-block、table-cells、flex
overflow：非visible

浮动

设置元素浮动后，该元素的 display 值自动变成 block

清除浮动

父元素添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

浮动元素后加标签<div style='clear:both;'></div>

一些属性

text-decoration：添加到文本的修饰，下划线、上划线、删除线，默认没有。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。