你的位置:首页 > Java教程

[Java教程]css 的一些知识点的整理

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-toppadding-rightpadding-bottompadding-left 元素和内容之间的距离,用padding控制 margin margin 外边距多值写法:两个值 (上下) (左右)三个值 (上) (左右) (下)四个值 (上) (右) (下) (左)margin-topmargin-rightmargin-bottommargin-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, dt4. 注意以下几种嵌套是固定的:ul liul下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置ol liol下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置dl dt dddl下只能包含dt和dd,dt,dd的父级也只能是 dl,当然dd中可以随意放置5. 一般建议,块和块并列,内嵌和内嵌并列 浮动和清浮动 float: 浮动leftrightnone 1. 在一行显示,父级的宽度放不下了,会自己折行2. 支持宽高等样式3. 不设置宽度的时候,宽度由内容撑开4. 会按照我们指定的方向移动,碰到父级的边界或者前边的浮动元素停止5. 元素浮动之后,上下margin不在叠加6. 脱离文档流(标准流) -- 元素在页面不在占位置文档流是文档中可显示对象在排列时所占用的位置。 清浮动方法 元素浮动之后,撑不开父级的高度,或者说父级包不住浮动了的子元素 清浮动:使浮动元素依然可以撑开父级的高度 1. 在浮动元素下边添加<div ></div>.clearFix {clear: both;}2. 在浮动元素下边添加 <br clear= "all"/>clear: all / left / right; 3. 给浮动元素的父级加 .clearFix:after { content: ""; display: block;clear: both;} 元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动 元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动 元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动 定位  position: relative;相对定位1. 元素之间相对定位,不设置位置偏移,元素和之前不会有任何变化.2. 元素移动之后,原始位置会被保留(不脱离文档流)3. 根据元素原始的位置,来计算坐标4. 提升层级 top/right/bottom/left 定位之后的 位置设置不加定位的话,这些样式没有作用 position: absolute 绝对定位1. 脱离文档流2. 提升层级3. 根据有定位的父级来计算自己的坐标,如果父级没有定位,就一级级向上找,如果所有的父级都没有定位,就根据document来计算自己的坐标.4. 触发BFC5. 使内嵌元素支持宽高6. 不设置宽度的时候,宽度由内容撑开 position: fixed;固定定位1. 脱离文档流2. 提升层级3. 把元素固定在可视区的某个位置上4. 触发BFC5. 使内嵌元素支持宽高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中的任何一个;