【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets)

2、使用CSS样式常见的三种方式: 1)<link href=".........." rel="stylesheet" type="text/css"/>

2)<style type="text/css">...................</style>

3)<div style=’.......’></div>

3、CSS层叠样式默认规则后者覆盖前者,特殊情况除外—!important优先级最高,高于上面一切。* 选择器最低,低于一切。;例:#Box {color:red !important;color:blue;}

4、块级元素及行内元素

1) 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2) 行内元素会在一条直线上排列,都是同一行的,水平方向排列

3)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

4)行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效,margin上下无效,padding上下无效。

用一句话概括就是:块级元素不论内容有多少只要有两个元素就会换行, 如果有两个行内元 素则会以并排的形式展示不会换行。

5、块级元素:div、dl、dt、dd、h1-h6、form、hr、ol、p、ul

6、行内元素:a、b、br、img、input、label、select、span、textarea、sub、sup

7、行内元素转块级元素的方法:display:block、display:table

8.选择器

1)元素选择器:html {color:black} p{color:gray} h2{color:red}

2)类选择器:.important {font-weight:bold;} .warning {font-style:italic;}

3)ID选择器:#intro {font-weight:bold;}

4)属性选择器:img[alt] {border: 5px solid red;}

5)后代选择器:h1 em {color:red;}

6)子元素选择器:h1 > strong {color:red;}

7)相邻兄弟选择器:h1 + p {margin-top:50px;}

8)伪类选择器:a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

9) 伪元素选择器:p:first-line {color: #ff0000;} 注::before和:after 非常常用。

  1. 盒子模型(它的整个宽度包括(内容宽度 + border宽度 + padding宽度 + margin宽度),整个的宽度充满父容器)

例子:padding,border和margin,即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一个小小的iphone,收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层(内边距),iphone白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。

例子:

  1. 清除Folat(浮动)
  1. 为父元素添加overflow:hidden
  2. 浮动父元素
  3. Clear:both;
  4. display 常用属性:none、block、inline、inline-block、inherit

例:

1)list-item:通过它可以模拟li列表样式;

2)table:也是一个“块”,但和block相比,table具有包裹性;

3)able-cell:最新的多列布局解决方案;

12.position

1)static(默认):部队浏览器做改变

2)relative:relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化

3)absolute:首先寻找该元素的所有父元素,如果找到一个设置了position:relative、absolute、fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位

4)fixed:fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-05-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

592
来自专栏一“技”之长

标签之美四——为网页添加绚丽多彩的图像 原

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/...

843
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

611
来自专栏娱乐心理测试

小程序上传多张图片

以前写过小程序网络和本地图片到相册的方法:https://www.jianshu.com/p/5479041607fa,写过上传一张或多张图片到阿里云OSSht...

3295
来自专栏达摩兵的技术空间

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生,但有多少种实现方式,每种的优劣以及兼容性相信你并不清楚。

732
来自专栏前端学习心得

如何居中一个元素(终结版)

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和...

762
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

1737
来自专栏.Net移动开发

VS2017移动开发(C#、VB.NET)——Numeric控件的使用方式

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

921
来自专栏WebDeveloper

实现HTML元素垂直居中的六种方法

612
来自专栏代码世界

前端之CSS内容

一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

29810

扫码关注云+社区