1CSS特性

   1.3优先级

   1.4权重叠加计算

2Chrome调试工具

    2.1查错流程

3CSS盒子模型

   3.1内容的宽度和高度

   3.2边框（border）-连写形式

      solid---实线        dashed---虚线         dotted---点线

   3.3边框（border）-单方向设置

   3.4边框（border）-单个属性

   3.5新浪导航案例

       从外到内：先宽高背景色，放内容，调节内容的位置，控制文字细节

   3.6盒子模型：自动内减 

   3.7清除默认内外边框

   3.8外边距折叠现象 - note1：合并现象

       
   3.9外边距折叠现象 - note2：塌陷现象
       
       行内元素内外边框问题：margin和padding只可改变水平方向距离，不能改变垂直方向距离
                                            若想改变垂直方向的距离要用line-height
4CSS结构伪类选择器
   
         
5CSS伪元素
   
6CSS浮动
    1.前期：图文环绕
    2.后期：网页布局（块级元素在一行排列）
   6.1浮动的特点
     
           
7CSS书写顺序（浏览器执行效率更高）
    1.浮动/display
    2.盒子模型：margin  border  padding 宽度高度背景色
    3.文字样式
 

CSS中知的更多相关文章

  1. 知方可补不足～CSS中的几个伪元素

    对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  6. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  7. 探究CSS中的包裹性

    之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来. 什么是包裹性? 包裹性就是父元素的宽度会收缩到和内部元素宽度一样. 哪些元素具有 ...

  8. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  9. CSS 初知

    CSS 初知 举例 人 { 身高:175cm; 体重:70kg; 肤色:黄色 } 描述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通 ...

  10. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

随机推荐

  1. HTML+CSS基础知识（5）相对定位、绝对定位、固定定位

    文章目录 1.相对定位 1.1 代码 1.2 测试结果 2.绝对定位 2.1 代码 2.2 测试 3.固定定位 3.1 代码 3.2 测试结果 1.相对定位 1.1 代码 <!DOCTYPE h ...

  2. WPF 鼠标移动到图片变大，移开还原，单击触发事件效果

    <Grid>         <Canvas x:Name="LayoutRoot">             <Image Cursor=" ...

  3. springMVC必要jar包

    spring-aop-4.3.2.RELEASE.jar :: 包含在应用中使用Spring 的AOP 特性时所需的类和源码级元数据支持. spring-beans-4.3.2.RELEASE.jar ...

  4. webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

    序: 能源是文明和发展的重要保障,人类命运不可避开的话题,无论是战争还是发展,都有它存在的身影.从石器时代到现代文明,人类的能源应用在进步,也在面临能源枯竭的危机与恐惧,而开发与应用可再生能源才是解决 ...

  5. 八、docker compose容器编排

    一. Docker-Compose 1.1. 什么是Docker Compose Compose 项目是 Docker 官方的开源项目,负责实现 Docker 容器集群的快速编排,开源代码在 http ...

  6. Nacos基本学习

    一.注册中心 1.启动 1.下载nacos 在Nacos的GitHub页面,提供有下载链接,可以下载编译好的Nacos服务端或者源代码: GitHub主页:https://github.com/ali ...

  7. Linux操作系统，笔录！

    1.Linux 1.1.Linux介绍: Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX ...

  8. hashcat 命令

    hashcat --force --stdout -a 6 tmp.txt ?d?d?d?d?d?d?d > result.txt tips:将tmp.txt字典中的内容与7位随机掩码字符组合, ...

  9. [排序算法] 快速排序 (C++) (含三种写法)

    快速排序解释 快速排序 Quick Sort 与归并排序一样,也是典型的分治法的应用. (如果有对 归并排序还不了解的童鞋,可以看看这里哟~ 归并排序) 快速排序的分治模式 1.选取基准值,获取划分位 ...

  10. 在业务逻辑中，经常会有父组件调用子组件方法的情况，vue2.0 和 vue3.0 的使用中有些不一样，在这里总结下。

    在业务逻辑中,经常会有父组件调用子组件方法的情况,vue2.0 和 vue3.0 的使用中有些不一样,在这里总结下. vue2.0 中的使用方法 父组件: <template> <d ...