元素分类:

1.行级元素:内联元素  inline

特征:内容决定元素所占位置,不可以通过CSS改变宽高

span  strong   em  a  del

2.块级元素:block特征:独占一行,可以通过CSS改变宽高

div  p  ul  li  ol  form   address

3.行级块元素:inline-block

特征:内容决定大小,可以改变宽高

选择器类型(通用的,没写那些伪类):

父子选择器(派生选择器)

<div>

  <em></em>

    </div>

div em {margin:0px}  有父子关系的几个元素组成的选择器,div下的所有em子孙

直接子元素选择器

div>em { margin:0  }   表示的是div下的直接子元素

并列选择器

<div class='red'></div>

div.red{ color:green }   表示并列关系

权重值比较:<style='color=red'  ...>内联样式,1000

id :100 class:10 标签:1  *:0  ,!important是无穷大权重,但是如果!important+1则要更大

分组选择器

.demo{}    .red{}

!!解决图片间隔  margin-left:-6px

盒子组成部分:

盒子壁  border

内边距 padding

盒子内容 width+weigth

margin+border+padding+content

颜色:

1.纯英文单词    red,green

2.颜色代码       #00ff22

3.颜色函数  rgb(00,ff ,ff)

rgb()表示光的三原色,red, green ,blue

CSS回顾(基础知识,元素,选择器,盒子,颜色)的更多相关文章

  1. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  2. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  3. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  4. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  5. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  6. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  7. css 3d 基础知识

    css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...

  8. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

  9. web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  10. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

随机推荐

  1. 1.numpy的用法

    numpy创建ndarray对象的三种方法 1.1.list转化 In [8]: import numpy as np In [9]: a = [1,2,3,4] In [10]: x1 = np.a ...

  2. Java核心技术及面试指南 面向对象部分的面试题总结以及答案

    问题2.7.1,开放性问题,说一下你对面向对象思想的了解. 要点1,先说基础概念,比如面向对象思想包括封装.继承.多态,然后说些语法,比如可以通过extends继承类.通过implement来实现接口 ...

  3. mysql 开发进阶篇系列 22 磁盘I/O问题(从linux操作系统上优化)

    1. 使用Symbolic Links分布I/O mysql的数据库名和表名是与文件系统的目录名和文件名对应的,默认情况下,创建的数据库和表都存放在参数datadir定义的目录下.如果不使用RAID或 ...

  4. sql server 性能调优之 资源等待PAGEIOLATCH

    一.概念 在介绍资源等待PAGEIOLATCH之前,先来了解下从实例级别来分析的各种资源等待的dmv视图sys.dm_os_wait_stats.它是返回执行的线程所遇到的所有等待的相关信息,该视图是 ...

  5. 关于tensorflow conv2d卷积备忘的一点理解

    **************input************** [[[[-0.36166722  0.04847232  1.20818889 -0.1794038  -0.53244466] [ ...

  6. Dockerfile 时区设置

    RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezo ...

  7. [机器学习]梯度提升决策树--GBDT

    概述 GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由 ...

  8. javascript小实例,实现99乘法表及隔行变色

    人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...

  9. Linux--Introduction and Basic commands(Part one)

    Welcome to Linux world! Introduction and Basic commands--Part one J.C 2018.3.11 Chapter 1 What Is Li ...

  10. [转]ASP.NET Core: Static Files cache control using HTTP Headers

    本文转自:https://www.ryadel.com/en/asp-net-core-static-files-cache-control-using-http-headers/ Every sea ...