我的第一篇博客文章 CSS笔记

复合选择器

• 交集选择器
  标签+类/ID选择器
• 后代选择器（重点）
  选择器+空格+选择器
• 子代选择器
  选择器>选择器
• 并集选择器
  选择器，选择器，选择器

文本元素

• font-size:16px;文字大小
  
• font-weight:700;文字粗细 值从100-900，不推荐使用bold
• font-family:微软雅黑;
• font-style:normal/italic;
• line-height:40px;
  
• //text-indent:2em 文字空2格
  

标签分类

1. 块元素

典型代表：div,h1-h6,p,ul,li
独占一行；可以设置宽高;
嵌套关系下，子块元素宽度（没有定义的情况下）和父块元素宽度一致。

2. 行内元素

典型代表：span,a,strong,em,del,ins
特点：在一行上显示;
不能直接设置宽高；

3. 行内块元素（内联元素）

典型代表：input,img
特点：在一行上显示
可以设置宽高

4. 块元素、行内元素

• 块元素转行内元素
  display:inline; =>具备行内元素特点
• 行内元素转块元素
  display:block; =>具备块元素
  
• 块和行内元素转行内块元素(重点)
  display:inline-block;
  

CSS三大特性

1. 层叠性
   当多个样式作用与同一个（类）标签时，样式发生了冲突，总是执行后面的代码。
2. 继承性
   发生的前提是包含嵌套关系。
   文字属性都可以继承。
   特殊情况：h系列不能继承文字大小。a标签不能继承文字颜色。
3. 优先级
   默认样式<标签选择器<类选择器<id选择器<行内样式<!important
   

优先级特点

• 继承的权重为0；
• 权重会叠加；？？？
  

链接伪类

• a:link{属性:值;} == a{属性:值;}
  
• a:link 链接默认状态
  
• a:visited 链接访问之后的状态
  
• a:hover 鼠标放到链接上显示的状态
  
• a:active 链接激活的状态
  
• :focus 获取焦点

文本修饰

• text-decoration: none|underline|line-through
  

背景颜色

• background-color
• background-image
• background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
• background-position left | right | center | top | bottom 背景定位
  //方位值只写一个的情况，另一个值为center
  //写两个方位值得时候，顺序没有要求
  //写两个具体值得时候，第一个代表水平方向，第二个值代表垂直方向
• background-attachment scroll | fixed 背景是否滚动 ## 行高 line-height
• 浏览器默认字体大小16px
• 行高是基线与基线之间的距离
• 行高=文字高度+上下边距
• 一行文字行高和父元素高度一致的时候，垂直居中显示
• 行高单位
  单位除了像素以外，行高都是与文字大小的乘积
  

行高单位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
150%	20px	30px	30px
2	20px	30px	60px

不带单位时，行高和子元素文字相乘，em和%的行高是合父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
推荐使用像素单位

盒子模型

边框

• border-top-style: solid | dotted | dashed; //必填
• border-top-color: red;
• border-top-width: 5px;
• border:12px solid red; //四个边框相同的写法
• border: 0 none; //去除边框
• outline-style:none; //去掉轮廓线

边框合并

• border-collapse:collapse;
  

内边距

• 影响盒子宽度因素： 内边距 边框
  盒子宽度=盒子定义宽度+边框宽度+左右内边距
• 继承的盒子一般不会撑大盒子（左右）（上下会撑大）
  

外边距

• margin-left | right | top | bottom
• 垂直方向外边距合并 垂直方向的2个盒子，如果都设置了垂直方向外边距，取得是设置的比较大的值。
  水平方向没问题。
• 外边距塌陷 嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷。
• 给父盒子设置边框（不推荐使用）
• 给父盒子设置 overflow:hidden; bfc格式化上下文
• 行内元素可以定义左右的内外边距，上下会被忽略。

布局

标准流（文档流）

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素边框换行。

浮动布局

float:left | right
特点： 元素浮动后不占据原来的位置
浮动的盒子在一行上显示 行内元素浮动之后转换为行内块元素。不推荐使用，转行内块最好使用display:inline-block;
文字不参与浮动

浮动的作用

• 文字饶图
• 制作导航
• 网页布局 ### 清除浮动 当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误
• 不是不用浮动，清除浮动产生的不利影响
  
• 清除方法： clear: left | right | both
• 额外标签法 (一般用不上) 在最后一个浮动元素后添加标签。
• 给父集元素使用overflow:hidden BFC
  如果有内容出了盒子，不能使用这个方法
• 伪元素清除浮动（最好的方法） .clearfix:after{ content:"."; display:block;
  height:0;
  line-height:0;
  visibility:hidden;
  clear:both;
  }
  //兼容IE
  .clearfix{zoom:1} ## 定位 定位方向：left right top bottom
• position:static; 静态定位。默认标准流。
• position:absolute; 绝对定位
  特点：元素使用绝对定位之后，不占据原来的位置（脱标）
  元素使用绝对定位，位置从浏览器出发 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，还是从浏览器出发
  嵌套的盒子，父盒子使用绝对定位，子盒子绝对定位，还是从父盒子出发
  给行内元素使用绝对定位之后，转换为行内块（不推荐使用） //z-index //调整元素的层叠顺序，0-999，值越大元素越在上面
• position:relative; 相对定位
  特点：使用相对定位，位置从自身出发。
  还占据原来位置。不脱标。
  子绝父相（父元素相对定位，子元素绝对定位）
  行内元素使用相对定位不能转为行内块
• position:fixed; //固定定位
  特点：固定定位之后，不占据原来的位置（脱标） 元素使用固定定位之后，位置从浏览器出发 元素使用固定定位之后，会转化为行内块（不推荐） ### 定位的盒子居中显示
• margin:0 auto;//只能让标准流的盒子居中对齐
• 定位的盒子居中:先左走父元素盒子的一半50%，再向左走子盒子的一半。
  

.nav{
    position:absolute;
    left:50%;
    margin-left:-480px;
}

标签包含规范

• div 可以包含所有标签
• p标签不能嵌套div,h
• h标签可以嵌套div,p
• 行内元素不推荐嵌套行内元素。行内元素不要包含块元素 ## 规避脱标流
• 尽量使用标准流
• 标准解决不了使用浮动
• 浮动解决不了的使用定位
  margin-left:auto//靠右
  margin-right:auto//靠左
  margin:0 auto//居中

图片和文字垂直居中对齐

• vertical-align 用于inline-block。默认属性baseline; ## CSS可见性
• overflow:hidden //溢出隐藏
• visibility:hidden //隐藏元素 隐藏之后还占据原来的位置
• display:none //隐藏元素 隐藏之后不占据原来的位置
• display:block //元素可见
  // display:none和display:block 常和js配合

CSS内容移除

• test-intent:-5000em; ## 属性选择器

input[type=text][class="pwd"]{
    width:300px;
    height:300px;
    background:red;
}

苏ICP备17048723号