css基础二

css背景

• 通过 CSS 背景属性，可以给页面元素添加背景样式。
  背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

css背景样式

• background-color 背景色
• background-image 背景图
  url(背景地址)
  默认：会水平垂直都铺满背景图
• background-repeat 平铺方式
  repeat-x x轴平铺
  repeat-y y轴平铺
  repeat ( x , y 都进行平铺，默认值 )
  no-repeat 都不平铺
• background-position : 背景位置
  x y : number(px、%) | 单词
  x : left、center、right
  y : top、center、bottom
• background-attachment : 背景图随滚动条移动的方式
  scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
  fixed ( 背景位置是按照浏览器进行偏移的 )

css边框样式

• border-style : 边框样式
  solid : 实线
  dashed : 虚线
  dotted : 点线
• border-width : 边框大小
  px …
• border-color : 边框颜色
  red #f00 …

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色：透明颜色 transparent

css文字样式

• font-family : 字体类型
  英文、中文
  衬线体、非衬线体
  注意点：
  1.多个字体类型的设置目的
  2.引号的添加的目的
• font-size : 字体大小
  默认 : 16px
  写法 : number(px) | 单词 ( small large … 不推荐使用)
• font-weight : 字体粗细
  模式： 正常( normal“400” ) 加粗 ( bold “700”)
  写法：单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )

css段落样式

• text-decoration：文本装饰
  下划线 : underline
  删除线 :line-through
  上划线 : overline
  不添加任何装饰 : none
  注：添加多个文本修饰：line-through underline overline
• text-transform：文本大小写 （ 针对英文段落 ）
  小写：lowercase
  大写：uppercase
  只针对首字母大写：capitalize
• text-indent : 文本缩进
  首行缩进
  em单位：相对单位，1em永远都是跟字体大小相同
• text-align : 文本对齐方式
  对齐方式 : left 、right、center、justify（两端点对齐）
• line-height : 定义行高
  什么是行高，一行文字的高度，上边距和下边距的等价关系。
  默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
  取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的)
  letter-spacing : 字之间的间距
  word-spacing : 词之间的间距 ( 针对英文段落的 )
  英文和数字不自动折行的问题：
  1. word-break : break-all; (非常强烈的折行)
  2. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)

css复合样式

• 复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
  1. background : red url() repeat 0 0;
  2. border : 1px red solid;
  3. font :
     注：最少要有两个值 size family
     weight style size family √
     style weight size family √
     weight style size/line-height family √
     注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

背景色半透明

• CSS3 提供了背景颜色半透明的效果。

• 最后一个参数是 alpha 透明度，取值范围在 0~1之间
• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

css盒子模型

组成 :

content -> padding -> border -> margin
 物品       填充物    包装盒   盒子与盒子之间的间距

• content : 内容区域 width和height组成的

• padding : 内边距(内填充)
  只写一个值： 30px (上下左右)
  写两个值 : 30px 40px ( 上下、左右 )
  写四个值 : 30px 40px 50px 60px（上、右、下、左）

        单一样式只能写一个值：
            padding-left
            padding-right
            padding-top
            padding-bottom
  

• margin : 外边距(外填充)
  只写一个值： 30px (上下左右)
  写两个值 : 30px 40px ( 上下、左右 )
  写四个值 : 30px 40px 50px 60px（上、右、下、左）

      单一样式只能写一个值：
          margin-left
          margin-right
          margin-top
          margin-bottom
  

注：
1. 背景色填充到margin以内的区域 （不包括margin区域）
2. 文字在content区域添加。
3. padding不能为负数，而margin可以为负数。

• box-sizing:
  盒尺寸，可以改变盒子模型的展示形态。
  默认值： content-box : width、height -> content
  border-box : width、height -> content padding border

  使用的场景：
  1. 不用再去计算一些值
  2. 解决一些100%的问题

盒子模型的一些问题：
1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。

扩展：
1. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要后面的知识 )
2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

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{ dispaly:block}

问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline; 基线对齐方式，默认值
img{ vertical-align:bottom;} 解决方式是推荐的