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

相关文章

来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

2667
来自专栏十月梦想

浮动

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

552
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

20311
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

1955
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

842
来自专栏有趣的django

18.CSS

选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

3117
来自专栏Bingo的深度学习杂货店

清除浮动的方法

本章主要介绍三种常用的清除浮动的方法,主要包括: ---- [1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中 [2] ...

2525
来自专栏九彩拼盘的叨叨叨

常用布局 @mixin

本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

612
来自专栏小灰灰

Css学习手册之基本篇

Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

3066
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

903

扫描关注云+社区