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

相关文章

来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

12420
来自专栏Java技术分享圈

杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

        1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

21120
来自专栏web

关于border边框重叠颜色设置问题

23940
来自专栏编程

【CSS选择符】后代选择符

在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

24450
来自专栏CaiRui

CSS

CSS的四种引入方式: 一、行内样式 <div style="background-color: blue;color: brown">cairui</div>...

21260
来自专栏前端杂货铺

居中详解

 讲解 1,单行文本的居中:           <div class='center'><span>单行文本框居中</span></div>         ...

35390
来自专栏Petrichor的专栏

opencv: 图片 设置 透明度 并 叠加(cv2.addWeighted)

1.2K20
来自专栏陈仁松博客

UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式...

36750
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

12130
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

20550

扫码关注云+社区

领取腾讯云代金券