【专业技术】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 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4074
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32210
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3919
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2616
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏魂祭心

原 canvas绘制clock

4204
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3225
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

7068
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5377

扫码关注云+社区