CSS

CSS

引入CSS的三种方式

• 外链式：项目推荐
• 嵌入式：学习推荐
• 内联式：

CSS基本语法

• 选择器{属性：值； 属性：值； 属性：值}

CSS选择器

1.标签选择器

• 就是div

2.id选择器

• id不可重名，具有唯一性 格式：#+id名

3.类选择器（推荐）

4.层级选择器

• 它可以和别的选择器混合使用
• 无需重命名就能通过父类设置子集

5.组选择器

• 用法： .box1 , .box2 , .box3{}
• 就是对一堆的类进行批量操作，修改

6.伪类及伪元素选择器

• 属性：hover before after

7.颜色表示方式

• 十六进制：如#00 00 00 -------------- 解释：一共有6位，rgb 取值范围0-9 A-F，可以简写如#000 ------- #fff
• rgb模式：如rgb(0,0,0) 每一位取值范围是0-255
• 带有透明度的 rgba(0,0,0,0) 最后一位是透明度 取值范围是:0-1之间小数 0完全透明 1完全不透明

8.字体文本设置

属性

      1.color
      2.font-size: 默认12px，小于12依旧是12
      3.font-family:字体
      4.font-style:normal & italic;  设置斜体
      5.font-weight:bold; 设置粗体
      6.line-height 设置文字的行高
      7.text-decotation 设置文字的下划线
      8.text-indent 设置文字首行缩进
      9.text-align 设置文字水平对齐方式

9.边框设置

属性

      1.border :   dotted(点)     dashed（虚线）     solid（实线）(属性没有顺序的区别)
      2.border-radius:圆角边框设置，可单独设置如，  10px 10px 10px 10px
      3.box-shadow:  属性有：水平  垂直  模糊程度  扩散范围   阴影颜色  内/外阴影    
      4.一般和box-hover联用

CSS间距

内间距：

• padding属性：
  1.设置四边 padding:10px 10px 10px 10px
  2.设置对边 padding:10px 10px
  3.设置四边另一种：padding:10px
  4.设置单边.padding-top/bottom/left/right

外间距

• margin属性：
  1.设置四个值：上 右 下 左
  2.设置两个值：第一个代表上下 第二个代表左右
  3.设置一个值：代表四个方向都是这个间距
  4.设置负值实现位移，自动水平居中：margin:0 auto

盒子模型

• 尺寸=边框+padding+中间框体 （和外边距无关因为他没法撑开盒子）
• 改变元素内容间距 有不想改变盒子大小： box-sizing:border-box;（一般和padding联合使用）

块元素，内联元素，内联块元素

1.块元素

• 支持全部样式
• 盒子独占一行，即使设置了宽度

2.内联元素：

• 不独占一行
• 只支持部分样式
• 不支持宽度和高度属性，宽高由内容撑开
• 只支持左右margin值，支持padding
• 代码换行，盒子中间会产生间距

3.内联块元素

• 支持所有的样式
• 不独占一行合资并在一行，代码换行会产生间距
• 宽高由内容撑开
• 只支持左右margin值

浮动

文档流

浮动的特性

• 浮动元素只有左浮动和右浮动
• 浮动会让元素脱离文档流，后面不浮动的元素会占据原来的位置
• 停止浮动
  1.碰到父级元素的边界会停止
  2.碰到前面有浮动的元素
  3.当碰到没有浮动的元素
• 浮动会把元素转为行内块元素
• 当父元素没有设置固定高度时，子元素都浮动，父级元素的高度就无法被撑开，解决办法：给父级元素添加overflow：hidden；
• 当父级元素空间不够时，浮动元素会换行

定位

• 相对定位不会脱离文档流，但是绝对定位会脱离文档流
• 绝对定位就是向上一级元素位置为参考点进行偏移，最后实在找不到就以body为参考点进行偏移。
• 绑定定位 position:fixed;
• 相对定位 position:relative;
• 绝对定位 position:absolute;

技巧

• 清除body默认内外边距：*{margin:0 ; padding:0}