初入web知识点(五)

◆CSS盒模型
包含:element元素 padding内边距 border边框 margin外边距
* 内边距padding
padding是简写属性 设置值时不能为负值 值的顺序是top上→right右→bottom下→left左
设置时如不全部定义则 top的值影响right和bottom right的值影响left
* 边框border
属性:style width color(默认值为透明色transparent,可以利用这一点来做三角形)
border足够粗 div足够小 并且其他三遍为透明色时transparent即可做出三角形
*外边距margin
margin也是简写属性 除了设置值时可以为负值外,其余的与padding一样
外边距合并时,只显示值最大的值
我们可以利用margin{0 auto}来实现元素的水平居中
◆CSS定位positioning
在CSS中一切皆为框
* display属性:none(相当于元素完全不存在,不占用文档的空间) block(显示为块级元素,自动带有换行符) inline(显示为内联元素,没有换行符) inline-block(行内块级元素,建议少用)
* CSS定位机制;普通流(标准流) 浮动 绝对定位
* CSS定位属性: 有四种不同的定位类型
①static 静态定位 也就是没有定位
②relative 相对定位(偏移) 相对于元素原来的位置进行偏移,其位置不会被占用{position:relative;top:50px;left:50px}
③absolute 绝对定位(脱离文档流)
《1》元素框从文档流中完全删除,原位置被占据
《2》相对于包含块进行定位,可以是文档中的另一个元素或初始包含块。绝对定位的元素是相对于最近的祖先元素,没有时才是相对于最初的包含块
《3》生成一个块级框,不论原来是块级元素还是行内元素
④fixed固定定位 (脱离文档流) {float:left;position:fixed;top:300px;left:0}多用于来实现侧边栏导航
* CSS浮动float:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。它的属性:left right none
* CSS clear 实现图像的左右不出现浮动 属性:left right both

◆BFC与IFC环境:他们既不是元素也不是属性
*BFC:块级元素 块级格式化上下文 需要触发 是一个独立的区域,区域内发生的事与外部毫不相干
规则:① 内部的Box会在垂直?向,?个接?个地放置。
② Box垂直?向的距离由margin决定。属于同?个BFC的两个相邻Box的margin会发?重叠
③ 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反。即使存在浮动也是如此。
④ BFC的区域不会与float box重叠。
⑤ BFC就是??上的?个隔离的独?容器,容器??的?元素不会影响到外?的元素。反之也如此。
⑥ 计算BFC的?度时,浮动元素也参与计算
生成BFC的元素:
① 根元素
② float属性不为none
③ position为absolute或fixed
④ display为inline-block, table-cell, table-caption, flex, inline-flex
⑤ overflow不为visible(一般较多的时候使用overflow:hidden,因为对页面的损失率最小)
*IFC:行内元素 行内格式化上下文 不需要触发
形成IFC:①外层使用vertical-align(元素垂直居中)
②一般是在最大的元素使用vertical-align
◆透明度opacity
值是在0-1.0对应IE8 filter:1-100
应用于前景,背景时使用rgba{} div:hover{background:rgb(0,0,0,0)}
◆cursor鼠标光标
◆导航
<nav>
<ul>
<li>...</li>
</ul>
</nav>
注意要把ul的margin和padding重置为0
line-height居中对齐
如果是横向列表则li{fioat:left}间距用padding来设置
◆CSS3
个浏览器前缀; -webkit- 谷歌和苹果
-o- 欧朋
-moz- 火狐
-ms- IE9
* border-radius:圆角 值的顺序是顺时针对角关系
* box-shadow:h-shadow水平 v-shadow垂直 模糊程度 颜色
* 2D和3D

时间: 2024-10-12 23:54:22

初入web知识点(五)的相关文章

初入web知识点(二)

◆CSS选择器(七种) ①元素选择器(类型选择器) 选择匹配选择器的网页上的任何HTML元素,不考虑这些元素在文档树中的位置.目标是一个元素的每个实例. ②类选择器(类名{属性:值:}) 被用于选择有某个class属性的任何HTML元素,不考虑在文档树中的位置. ③ID选择器 与类选择器相似,被用于选择某个ID属性的任何HTML元素,不用考虑这些元素在文档树中的位置.与类选择器的主要区别在于,同一属性ID值在同一页面上只能出现一次.而同一class属性值可以在同一页面中多次出现. ④包含选择器

初入web知识点(八)

◆APP端/**CSS原生代码**/TIP:① 还是要在head部分加入 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">网页自适应移动端② 宽高使用百分比③ 高也可以使用rem④ CSS文件开头要用@media比如:@media screen and (min-width: 960px){

初入web知识点(七)

◆LESS 基于CSS的一种扩展技术:引入了变量.混合.运算.函数:简化CSS的代码,降低维护成本:必须通过解析器(koloa).***步骤***①新建文件夹②.html文件 .less文件③启动koloa配置路径④输入less文件 刷新koloa⑤会自动生成一个.css的文件(在写的过程中不要关闭koloa软件)⑥html引入的文件是koloa解析出来的CSS文件 ◆**◆ ①变量:@变量名:值 如 @名称自取: 5px soild red; 使用时 div{ border:@名称自取 } ②

初入web知识点(四)

◆CSS选择器(补充) ①伪类选择器 格式: 元素:属性{} 允许我们格式化不在文档树中的一些条目.向某些元素添加特殊样式 锚伪类 不同方式格式化超级链接<a>元素的四种不同状态; * a:link 是用在未访问过的链接的选择器 * a:visited 是用在以访问过的链接的选择器 * a:hover 是用在鼠标光标放在其上的链接选择器 * a:active 是用在获得焦点(比如被点击)的链接上的选择器 TIP:在CSS定义中,a:hover必须置于a:link和a:visited之后才有效:

初入web知识点(三)

◆HTML5标签 video视频(主要格式MOEG4) audio音频(主要格式MP3) <video src="地址"></video> <audio src="地址"></audio> *标签属性(主要) ①autoplay 自动播放 ②controls 显示控件 ③loop 循环播放◆块级元素和行内元素 块级元素 行内元素 独占一行 不独占一行 可设宽高 不可设宽高 内容大小影响不影响元素大小 内容大小不影响不影

初入web知识点(一)

HTML标签:◆ <img src="../images/XXX.PNG" alt="xxx"> ../表示url地址信息 最好不要超过两级 images表示上两级中的images文件夹 XXX.PNG表示images文件夹中的某一张PNG图片 xxx表示当图片不显示时所显示的文本内容“xxx”◆ <pre></pre> 预文本格式 网页显示内容样式与代码编写时的样式一样◆ <a href="……">

初入web知识点(六)

◆过渡 transition 苹果浏览器前要加前缀 IE9不支持 多与hover配合使用 可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容: ①规定您希望把效果添加到哪个 CSS 属性上 规定属性名称 ②规定效果的时长 ,以秒为单位 默认值是0 属性: transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的 CSS 属性的名称 tr

初入javascript知识点(五)

导航按钮JS var odiv =document.getElementById('nav');var listOfbtn = odiv.getElementsByTagName('button');for( var i = 0;i < listOfbtn.length;i++){ listOfbtn[i].index =i; listOfbtn[i].onclick = function(){ for(var j = 0;j < listOfbtn.length;j++){ listOfbt

初入javascript知识点(八)

jQuery性能优化 1.对于在jQuery中重复使用的标签,在第一次选择的时候就用一个变量把它保存起来. 2.在使用类名选择器时,加上父级选择器(父级选择器使用id或标签名) 3.使用find方法来选取后代 4.尽量使用jquery中的链式写法 5.使用事件委托 数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB