1、盒模型:

  实际宽度:外边距*2+内边距*2+边框*2+内容宽度(注意这点,可解决界面元素轻微浮动问题,如hover有边框,以前没的时候会有轻微浮动)

  作用:他规定了网页元素如何显示以及其相互关系

2、padding会撑大容器,而margin不会。

  这点巧用(自己总结的):① 能用margin的别用padding

              ② 网页中为一个元素添加一边的下划线时候用padding

              ③ 导航栏中,用<ul><li>写的时候,先调节<li>的padding:npx,再调节<ul>的margin,记得margin的值减去n

3、background-size : cover:扩大图像,使得背景图完全覆盖背景区域,知道碰到最后一个边缘停止

            contain:扩大背景图像,碰到第一个边缘就停止

4、背景的冷知识,设置scroll(随页面滚动而滚动)或fixed(不随页面滚动)

5、渐变:线性渐变:linear-gradient  属性值(to top,red 40%,blue 50%) 这里注意加上-webkit后不用加to了就

     径向渐变:radial-gradient 属性值(center,shape size,start-color,last-color)

        shape:circle或ellipse

        size:自行查阅吧,用的不多。

   重复渐变:repeating-linear-gradient

6、浏览器兼容: Firefox:-moz-

        Chrome,Safari:-webkit-

        Opera:-o-

7、首行文本缩进:text-indent:2em

8、溢出处理:   white-space:normal / nowrap(不换行)

      文本溢出:  text-overflow: clip(直接裁剪)  ellipsis 通过...来显示

          出现...的条件   ① white-space:nowrap  ② text-overflow:ellipsis ③ width: ④ overflow:hidden

      长单词换行(只对英文有效) word-wrap : break-word

      文本换行 word-break:break-all 破坏单词结构进行换行  keep-all:在半角状态下的空格进行换行

9、letter-spacing 设置文字间间距   word-spacing 设置英文单词之间的间距

10、border-collspse separate:分离边框(默认) colapse(合并边框,不会挤压)

11、表格文本对齐 :vertical-align : top / bottom /middle

12、浮动定位 float

    将元素排除在普通流之外,元素在网页是不占空间的

    浮动元素会放在包含框的左边或右边,但依然在包含框内

    浮动元素在浮动时。可以向左或向右移动,直到碰到包含框或其他浮动元素位置

  特点:

    浮动元素边缘不会超过父元素的边框

    浮动元素默认不会重叠

    浮动只能左右浮动,不能上下浮动

    所有元素设置为浮动元素的话,默认转换为块级元素

  注,

    子元素有浮动的话,记得给父元素加上overflow:hidden,意为拉子元素进入框中

    设置overf后才能用padding设置位置

    给父元素内所有子元素浮动后,不会撑开文本流。当给父元素内子元素绝对定位后会重叠

13、清除浮动 clear:left / right /both

    巧用:clear:both,消除两个div之间的间距

14、margin:0 auto;设置居中的前提是设置宽高

15、显示 display

      ① none 元素不显示,并不占空间

      ② block 使元素像块级元素一样去显示

      ③ inline 使元素像行内元素一样去显示

      ④ inline-block 行内块

16、visibility

      ① visible 默认值,可见

      ② hidden 元素不可见,但占空间

      ③ collapse 用在表格上,可删除行或列,不影响布局

17、透明度 opacity (注,尽量用raba去设置透明度,因为opacity会影响父级元素下面的子元素)

  IE中设置透明度 filter:alpha (opacity=value)

18、巧方法,不再父级元素上设置宽高度,而是设置子元素让其撑开

19、对齐,vertical-align:middle 针对行内元素img,可定义边上文字与当前元素的对齐方式 记得给img加上align="absmiddle"属性

20、光标 cursor

      pointer、crosshair 、wait、help、move、text

21、定位巧用:父类用相对定位,子类绝对定位(轮播图)

22、给父类元素加上相对定位后,子类元素会相对与父类元素

23、列表头前加图片:list-style-image:url();

24、设置列表的标识,list-style-position:outside(外部)inside(内部)

                                

   补充   overflow:hidden可以清除浮动                

                  

css基础知识二的更多相关文章

  1. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  2. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  3. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  6. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  7. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  8. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  9. 菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理

    菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...

随机推荐

  1. LOJ#10117. 「一本通 4.1 练习 2」简单题

    LOJ#10117. 「一本通 4.1 练习 2」简单题 题目描述 题目来源:$CQOI 2006$ 有一个$n$个元素的数组,每个元素初始均为$0$.有$m$条指令,要么让其中一段连续序列数字反转— ...

  2. 3.写一个hello world页面

    经过1和2的学习,现在已经可以正常启动Django了,这一节说怎么写一个hello world页面,所有的环境基础就是1和2中搭建的 1.在app模块中添加页面 具体为 hello_django\he ...

  3. Javaweb--- EL表达式 JSTL标准标签库

    一.EL表达式(expression language): 语法  ${...} jsp中page指令有一个属性叫isELIgnored, 用来标记此页面是否忽略EL表达式, 默认为false 举个例 ...

  4. (转)FFMPEG解码H264拼帧简解

    http://blog.csdn.net/ikevin/article/details/7649095 H264的I帧通常 0x00 0x00 0x00 0x01 0x67 开始,到下一个帧头开始之前 ...

  5. linux shell 基础 使用日志与心得

    linux shell 基础 使用日志与心得 1.#!/bin/bash 第一行就出现#!/bin/bash是指此脚本使用/bin/bash来解释执行.其中,#!是一个特殊的表示符,其后,跟着解释此脚 ...

  6. StartUML如何画“不折弯”的直线

    将下图中line style改成 OBlique.快捷键Ctrl +B

  7. [转]详解Java解析XML的四种方法

    XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...

  8. [原创]java WEB学习笔记02:javaWeb开发的目录结构

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. 【leetcode刷题笔记】Reverse Words in a String

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  10. Luogu-4048 [JSOI2010]冷冻波

    考虑网络流,二分时间,源点向巫妖连流量为攻击次数的边,把每个巫妖向他能打的小精灵连一条流量为一的边,每个小精灵向汇点连一条边. 预处理每个小精灵能被那些巫妖打,这道题好像视线与树相切也算能打(雾. # ...