首页 > > 网页制作 > css >

css 的一些知识点的整理

2018-06-24 01:51:58来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

css的一些标签整理
 
background-attachment: scroll;背景图可滚动
background-attachment: fixed; 固定背景的位置，不随着滚动条移动而移动
背景添加了 fixed 坐标计算就会根据整个可视区来计算
 
font（文本样式）
font (集合样式)
1. 固定顺寻 (font-weight font-style font-size/line-height font-family)
2. 必写项 (font-size font-family)
 
text-indent 首行缩进
正值 从左向右移动首行文字
负值 从右向左移动首行文字
单位 em 1em = 当前元素的1个文字大小
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(none/underline下划线/overline上划线/line-through删除线)
word-spacing 单词间距
letter-spacing 字母间距
 
padding
 
padding 内填充(内边距)在元素的边框以里，
内容以外产生一个距离
1. padding区域可以显示元素背景
2. 元素背景位置的 0 0 点在元素padding区域的左上角
可视宽度(元素可以被看到的部分的宽度): ;
3可视宽度 = padding + width + border;
padding的多值写法:
两个值: (上下) (左右);
三个值: (上) (左右) (下);
四个值: (上) (右) (下) (左);
padding-top
padding-right
padding-bottom
padding-left
 
元素和内容之间的距离，用padding控制
 
margin
 
margin 外边距
多值写法:
两个值 (上下) (左右)
三个值 (上) (左右) (下)
四个值 (上) (右) (下) (左)
margin-top
margin-right
margin-bottom
margin-left
 
盒模型:内容(content)、填充(padding)、边框(border)、边界(margin)。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。;
 
margin和padding的区别 ：
1. margin在元素的边框以外，
padding在元素的边框以里
2.margin区域不显示元素的背景
padding显示元素的背景
3. margin通常用来给两个同级元素加距离
padding用来添加元素和它内容之间的距离
4.margin 叠加
两个相邻元素的上下margin是叠加在一起的，两个元素之间的距离，以大的为准
5.margin传递
元素的上下margin，会传递给父级
6.auto 自动
margin-left: auto; (元素在父级中居右显示)
margin-right: auto;(元素在父级中居左显示)
margin: 0 auto; (元素在父级中水平居中显示)
 
 
a标签
 
div 独占一行显示
a 标签可以和其他a标签在一行显示
a 标签默认会有下划线
a 标签不会继承父级的字体颜色,必须加载 他自己上
a 标签中换行会产生一个空格
空格大小会受到字体，字体大小的影响;
a 标签 (超链接)
(herf)作用：
1. 是页面地址的时候，点击之后跳转页面
2. 压缩文件的时候，点击之后下载文件
3. 是id名字，点击之后跳转至ID多在位置 -- 锚点
 
target="_blank" 空白窗口 打开链接
target="_self" 当前窗口打开 如 <a href="http://www.baidu.com" target="_self">百</a>
base 定义页面上所有的链接的默认打开方式 和 默认地址
在页面头部head标签中 写入：<base target="_blank" href="http://miaov.com/">
 
伪类选择器
 
:link 此链接未被访问
:visited 此链接已经被访问过
:hover 鼠标移入
:active 鼠标按下
 
选择器
 
css selector (选择器，选择符)
基础选择器
1. id 选择器 通过查找具有某个id属性的元素来添加样式
id = "idName"
#idName {
样式……
}
** 同一个页面中id不能重名
2. tag selector(类型选择器，标签选择器，元素选择器) 通过标签的名字找到某一类型标签添加样式
tagName {
样式……
}
3. class 选择器(类选择器) 通过查找具有某类class属性的元素来添加样式
class = "className"
.className {
 
}
** 1） class可以重复调用
2） 元素可以具有多个className,每个名字中间以空格隔开,每个名字添加的样式，元素都会识别
 
4. * 通配符 (通配选择器),代表所有的元素 (不推荐使用)
 
继承
 
nherit 继承
父级的这条样式是怎样的元素的这条样式就是怎样的
文本样式，自己没有设置这条样式，就会继承父级，如果子元素设置就显示子元素自 己的样式
*/
 
包含选择器
 
包含选择器 （后代选择器）
父级 子级 {
 
}
#box span {}找到box中包含的所有span标签
1. 层级数目不要过多 一般不超过三层
2. 子级是id话，一般不用包含选择器
包含选择器的优先级是其中用到的所有选择器的累加
id + class 比较 id
 
常用标签结构划分
列表
ul(unOrderList) 无序列表
ol(orderList) 有序列表
li ul或者ol的列表项
dl 定义列表
dt 定义列表的列表项
dd 对dt的展开说明，或描述扩展
 
<div>div</div> <!-- 块标签 -->
<span>span</span> <!-- 内嵌标签 -->
<a href="#">a链接</a> <!-- 内嵌标签 -->
<strong>strong</strong> <!-- 内嵌标签 -->
<em>em</em> <!-- 内嵌标签 -->
<h1>标题</h1><!-- 块标签 -->
<h2>标题</h2><!-- 块标签 -->
<h3>标题</h3><!-- 块标签 -->
<h4>标题</h4><!-- 块标签 -->
<h5>标题</h5><!-- 块标签 -->
<h6>标题</h6><!-- 块标签 -->
<p>段落</p> <!-- 块标签 -->
<ul> <!-- 块标签 -->
<li>无序列表</li> <!-- 块标签 -->
<li>无序列表</li>
</ul>
<ol> <!-- 块标签 -->
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl><!-- 块标签 -->
<dt>定义列表</dt> <!-- 块标签 -->
<dd>定义列表</dd> <!-- 块标签 -->
<dd>定义列表</dd>
</dl>
<section>板块</section> <!-- 块标签 -->
<header>头部</header> <!-- 块标签 -->
<footer>底部</footer> <!-- 块标签 -->
<article>文章 主体</article> <!-- 块标签 -->
<aside>附属信息</aside> <!-- 块标签 -->
<nav>导航</nav> <!-- 块标签 -->
<time>时间</time> <!-- 内嵌标签 -->
<mark>标记</mark> <!-- 内嵌标签 -->
 
<a href="#" title="我是一个连接呀">连接</a>
<img src="img/img.png" title="我是一张图片哟" alt="妙味课堂">
<!--
img 图片
src 图片地址
alt 替代文字 当图片加载不出来的时候的替代问题
img 只设置宽度或者只设置高度，img会等比缩放
title 提示
默认样式清除
 
body {
margin: 0;
font: 14px "宋体"; /* 初始整个页面的字体 和 字体大小，但是注意每个项目都不一致，要跟着设计走 */
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd {
margin: 0;
/* font-weight: normal; */
}
strong {
/* font-weight: normal; */
}
em {
/* font-style: normal; */
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
mark {
/* background: none; */
}
a {
text-decoration: none;
}
 
快和内嵌
 
块:(div)
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度，宽度撑满父级的空间
 
内嵌:(span)
1. 可以在一行显示
2. 不支持宽高，上下的margin，上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小，可以控制空格大小)
4. 宽度由内容撑开
 
内嵌块: (img)
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候，宽度由内容撑开
 
标签嵌套规则
 
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul li
ul下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
ol li
ol下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
dl dt dd
dl下只能包含dt和dd，dt,dd的父级也只能是 dl，当然dd中可以随意放置
5. 一般建议，块和块并列，内嵌和内嵌并列
 
浮动和清浮动
 
float: 浮动
left
right
none
 
1. 在一行显示,父级的宽度放不下了，会自己折行
2. 支持宽高等样式
3. 不设置宽度的时候，宽度由内容撑开
4. 会按照我们指定的方向移动，碰到父级的边界或者前边的浮动元素停止
5. 元素浮动之后，上下margin不在叠加
6. 脱离文档流(标准流) -- 元素在页面不在占位置
文档流是文档中可显示对象在排列时所占用的位置。
 
清浮动方法
 
元素浮动之后，撑不开父级的高度，或者说父级包不住浮动了的子元素
 
清浮动：使浮动元素依然可以撑开父级的高度
 
1. 在浮动元素下边添加<div class="clearFix"></div>
.clearFix {
clear: both;
}
2. 在浮动元素下边添加 <br clear= "all"/>
clear: all / left / right;
 
3. 给浮动元素的父级加 class="clearFix"
.clearFix:after { content: ""; display: block;clear: both;}
 
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
 
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
 
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
 
定位
 
 
position: relative;相对定位
1. 元素之间相对定位，不设置位置偏移，元素和之前不会有任何变化.
2. 元素移动之后，原始位置会被保留（不脱离文档流）
3. 根据元素原始的位置，来计算坐标
4. 提升层级
 
top/right/bottom/left 定位之后的 位置设置
不加定位的话，这些样式没有作用
 
position: absolute 绝对定位
1. 脱离文档流
2. 提升层级
3. 根据有定位的父级来计算自己的坐标，如果父级没有定位，就一级级向上找，如果所有的父级都没有定位，就根据document来计算自己的坐标.
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
 
position: fixed;固定定位
1. 脱离文档流
2. 提升层级
3. 把元素固定在可视区的某个位置上
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
 
层级：后一个元素的层级高于前一个元素的层级
z-index 层级
1. 只能加给定位元素
2. 数值越大层级越高
3. 在同级元素之间比较层级
 
BFC作用
BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 
2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 
在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 
也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。 
在 CSS3 中，BFC 叫做 Flow Root。
 
文档流(标准流):在文档中，元素默认从左上角开始，块元素一个一个向下排列，每个元素的左侧默认 都会和父级的左侧接触，顶部紧靠着父级的顶部或上一个元素的底部。每个元素都需要占有对应的区域大小。
脱离文档流：不在文档中占有位置。
 
BFC：(block formatting context 块级格式化上下文),它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
 
BFC作用：
1. 包含浮动元素
2. 阻止margin向外传递
3. 不被浮动元素覆盖
 
BFC触发条件：
1) float的值不为none； 
2) overflow的值不为visible； 
3) display的值为 table-cell、table-caption和inline-block之一； 
4) position的值不为 static或 relative中的任何一个；

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：css下拉菜单写法

下一篇：ngnix入门配置

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签