李洪强和你一起学习前端之(8)CSS复习

今天是2017年3月24日周五

每一天都是余生当中最好的一天,珍惜当下.

        CSS基础复习

1 复习

1.1Css第一天

  css层叠样式表

基础选择器

   标签选择器

    p{属性: 值;}

   类选择器

    .自定义类名{}

    通过class调用

   id选择器

    #自定义名{}  

   通配符选择器

    *{}  所有元素选中

复合选择器

   标签指定式选择器

     标签名.(#)选择器{}

   后代选择器

       选择器 选择器 {}

     标签关系包含嵌套关系

   并集选择器

     选择器 选择器 {}

   属性选择器

     /*属性选择器*/

     input[type][id]{

     color: red;

     }

   子代选择器

     /*子代选择器*/

     div > span{

    color : red;

    }

注意: 子代选择器,直接选择父元素中的直接子元素

   <div>

      <p>

        <span>p中的span</span>

      </p>

      <span>

        div中的span

      </span>

     </div>

注意: div中的span元素会被选中

1.2Css第二天

  ->内嵌式写法

  ->外联式写法

    使用link标签中的 Href = ""属性将外部样式表引入到当前页面中

    行内式写法

  分类:

  ->块级元素

  ->行内元素

  ->行内块元素

  Display: block

  Display: inline-block

  Display: inline

三大特性:

  ->层叠性

  ->继承性

  有关文字的属性都可以实现继承

    a不能直接继承父元素中的文字大小

    标题标签不能直接继承父元素中的文字大小

  ->优先级

  继承的权重为0

  权重会叠加

伪类:

  a : link{

  }  超链接默认样式

  a: visited{

  }   访问过后的样式

  a:  hover{

  } 鼠标移动到元素上的样式

  :active{

  }超链接激活的样式

  :focus{

  }获取焦点的样式

1.3Css第三天

  行高可以继承

  行高单位

  单独给一个标签设置行高

  Font-size: 20px

  Px     em  %  不带单位

  盒模型

    border

    padding

    盒子内容距离盒子边框之间的距离

    边框和内边距可以影响盒子大小

    继承的盒子padding值在父元素宽度范围内,不影响盒子大小

    margin

    垂直外边距合并

    外边距盒子坍陷问题

      ->给父盒子设置border值

      ->给父盒子设置overflow: hidden

1.4Css第四天

  浮动

  ->浮动的元素不占位置(脱标)

  ->设置浮动可以实现元素模式的转换

  ->块级元素在一行上显示

  ->图片文字环绕

  ->网页布局

  

  定位

  Position

  ->静态定位

  ->绝对定位(看脸型)

    脱标

    模式转换

  相对定位

  ->没有脱标

  ->子绝父相

  固定定位

    脱标

    模式转换

    

上一篇:WEB安全番外第二篇--明日之星介绍HTML5安全问题介绍


下一篇:李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例