今天是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

  ->静态定位

  ->绝对定位(看脸型)

    脱标

    模式转换

  相对定位

  ->没有脱标

  ->子绝父相

  固定定位

    脱标

    模式转换

    

李洪强和你一起学习前端之(8)CSS复习的更多相关文章

  1. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  2. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  3. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  4. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  5. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

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

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  7. 李洪强和你一起学习前端之(4)HTML5介绍

    1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...

  8. 李洪强iOS经典面试题144-数据存储

    李洪强iOS经典面试题144-数据存储   数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

  9. 李洪强iOS经典面试题142-第三方框架及其管理

    李洪强iOS经典面试题142-第三方框架及其管理   第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...

随机推荐

  1. Cisco路由技术基础知识详解

    第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是(  )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12  ...

  2. [转]Working with Transactions (EF6 Onwards)

    本文转自:http://www.cnblogs.com/xiepeixing/p/5275999.html Working with Transactions (EF6 Onwards) This d ...

  3. TCP-滑动窗口概念

    参考博客: http://blog.chinaunix.net/uid-26275986-id-4109679.html

  4. AQTime教程

    1 简介 AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能.该产品含有完整的性能和调试工具集,能够收集程序运行时关键的性能信息和 ...

  5. Linux内核开发者峰会照的全家福

    刚才看到一张Linux内核开发者峰会照的全家福,有历史价值,给大家分享一下.上面有Torvalds(大致在中间).Andrew Morton(目前的内核主要维护者,第二排右数第二个).Alan Cox ...

  6. centos使用密钥替换密码登录服务器

    一.首先登陆centos,切换用户,切换到你要免密码登陆的用户,进入到家目录,以下我以admin为例,命令:su admincd ~ 二.创建钥匙,命令:ssh-keygen -t rsa,一路按Y搞 ...

  7. Java笔记12:Java对象排序

    代码: import java.util.Arrays; import java.util.Comparator; class Person { private String name; privat ...

  8. vi 新建编辑文件时报错 E212 can’t open file for writing

    在vi修改防火墙配置时,不能够保存,报E212 can’t open file for writing错误. 网上大概给出了两种答案. 一是权限不够,可以用root权限事实,或者sudo 操作. 二是 ...

  9. Caused by: org.apache.ibatis.reflection.ReflectionException我碰到的情况,原因不唯一

    映射文件: <select id="selectKeyByUserId"  resultMap="Xxx">        <![CDATA[ ...

  10. Jconsole

    Jconsole 1.1 简介以及连接 JConsole是一个基于JMX的GUI工具,用于连接正在运行的JVM,它是Java自带的简单性能监控工具.下面以对tomcat的监控为例,带领大家熟悉Jcon ...