分享几个x站好用的关键词,微信商城小程序开发一般需要多少钱,互联网公司排名 百度,什么是外链文章目录 1. 浮动#xff08;float#xff09;1.1 传统网页布局的三种方式1.2 标准流#xff08;普通流、文档流#xff09;1.3 浮动1.4 浮动特性1.5 浮动元素经常和标准流父级搭配使用1.6 清除浮动1.7 额外标签法 2.divCSS进行页面布局2.1 常见的页面布局2.2 如何布局2.3 … 文章目录 1. 浮动float1.1 传统网页布局的三种方式1.2 标准流普通流、文档流1.3 浮动1.4 浮动特性1.5 浮动元素经常和标准流父级搭配使用1.6 清除浮动1.7 额外标签法 2.divCSS进行页面布局2.1 常见的页面布局2.2 如何布局2.3 页面元素的定位机制 3. 布局常用属性3.1 浮动属性float3.2 清除属性clear3.3 定位属性(position)3.4 溢出属性overflow3.5 层叠属性z-index 4.布局类型4.1单列布局4.2 双列布局4.3 三列布局 5. HTML5中的语义标签6. 命名规范6.1 遵循规则6.2 两种命名方式6.3 网页模块的命名规范 1. 浮动float
1.1 传统网页布局的三种方式
网页布局的本质——用 CSS 来摆放盒子即把盒子摆放到相应位置。 CSS提供了三种布局方式普通流标准流、浮动、定位
1.2 标准流普通流、文档流
所谓的标准流: 就是标签按照规定好默认方式排列标准流是最基本的布局方式
块级元素会独占一行从上向下顺序排列。 常用元素div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按选择器 { float: 属性值; } 照顺序从左到右顺序排列碰到父元素边缘则自动换行。 常用元素span、a、i、em 等
1.3 浮动
网页布局第一准则多个块级元素纵向排列找标准流多个块级元素横向排列找浮动。
float 属性用于创建浮动框将其移动到一边直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 浮动最典型的应用可以让多个块级元素一行内排列显示。
语法
选择器 { float: 属性值; }属性值描述none元素不浮动默认left元素向左浮动right元素向右浮动
1.4 浮动特性 浮动元素会脱离标准流(脱标) 浮动的多个元素会一行内显示并且元素顶部对齐 注意 浮动的元素是互相贴靠在一起的不会有缝隙如果父级宽度装不下这些浮动的盒子 多出的盒子会另起一行对齐。 浮动的元素会具有行内块元素的特性即 如果块级盒子没有设置宽度默认宽度和父级一样宽但是添加浮动后它的大小根据内容来决定浮动的盒子中间是没有缝隙的是紧挨着一起的行内元素同理
1.5 浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.
1.6 清除浮动
本质
是清除浮动元素造成的影响如果父盒子本身有高度则不需要清除浮动清除浮动之后父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了
语法
选择器{clear:属性值;}属性值描述left不允许左边有浮动元素right不允许右边有浮动元素both同时清除两边浮动
实际工作中,几乎只用 clear:both;清除浮动的策略是: 闭合浮动.
1.7 额外标签法
也称为隔墙法是 W3C 推荐的做法。
父级添加 overflow 属性父级添加after伪元素父级添加双伪元素
额外标签法会在浮动元素末尾添加一个空的标签。例如 div style”clear:both”/div或者其他标签如br /等。
优点 通俗易懂书写方便缺点 添加许多无意义的标签结构化较 注意 要求这个新的空标签必须是块级元素。
2.divCSS进行页面布局
布局目的为了使页面结构清晰、有条理、易读
2.1 常见的页面布局 2.2 如何布局
确定“版心”就是页面主体内容所在的位置。通常在页面中水平居中分析页面中的模块最简单的页面布局主要由头部header、导航nav、焦点图banner、主体内容content、页面底部(footer)五部分组成。一般商业用顶部导航左侧导航常用在后台页面管理中控制页面中的模块通过盒子模型使用DIVCSS来进行模块的控制通常网页由psd图构成
2.3 页面元素的定位机制
流式布局按照元素的类型和在HTML源文件中出现的顺序进行定位
块block从上到下依次排列水平布局inline在一行中进行水平布局
浮动布局float当元素浮动时它不再处于普通文档中相当于浮在文档之上不占据空间但是会缩短行距产生文字环绕效果
定位布局
绝对定位position:absolute通过页面坐标页面左上角的方式来定位元素。使用绝对定位后元素不会占用普通流空间相对定位position:relative如果一个元素相对定位它将以它所在的位置即它在普通流中的位置为初始点然后可以通过设置垂直或水平位置让这个元素“相对于”它的初始点进行移动
注意
与定位相关的属性有left、top、right、bottom这四个属性只有在使用定位属性position后才有效只能同时使用相邻的两个属性不能同时使用相对的两个属性
3. 布局常用属性
3.1 浮动属性float
见上文1.3
3.2 清除属性clear
见上文1.6
3.3 定位属性(position)
定位模式决定元素的定位方式
值语义static静态定位/自动行为默认relative相对定位相对于元素在文档流中的位置进行定位在普通文档流的位置已保存absolute绝对定位相对于已经定义好的父元素位置进行定位不会占用普通流空间fixed固定定位相对于浏览器窗口进行定位绝对定位的一种特殊形式脱离文档流
固定定位fixed小技巧固定在版心右侧位置。
让固定定位的盒子 left: 50%. 走到浏览器可视区也可以看做版心 的一半位置。让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。
边偏移就是定位的盒子移动到最终位置。
边偏移属性示例描述toptop: 80px顶部偏移量定义元素相对于其父元素上边线的距离bottombottom: 80px底部偏移量leftleft: 80px左侧偏移量rightright: 80px右侧偏移量
3.4 溢出属性overflow
当内容溢出元素边框的时候内容如何处理
值语义scroll提供滚动机制带有滚动条visible默认值内容溢出到边框以外hidden内容被修剪溢出的部分看不见auto如果内容被修剪则显示器会显示滚动条以便查看其余的内容
3.5 层叠属性z-index
在使用定位布局时可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的前后次序 (z轴) 语法
选择器 { z-index: 1; }数值可以是正整数、负整数或 0, 默认是 auto数值越大盒子越靠上如果属性值相同则按照书写顺序后来居上数字后面不能加单位只有定位的盒子才有 z-index 属性
4.布局类型
4.1单列布局
网页布局的基础所有复杂的布局都是在此基础上演变而来的。 例一列固定宽度并自动居中
#layout {height: 100px;width: 1000px;background-color: red;margin: auto;}例一列自适应宽度
#d2 {height: 200px;background-color: greenyellow;margin: auto;}4.2 双列布局
和“一列布局”类似只是网页内容被分为了左右两部分。 例两列自适应宽度
#d1 {height: 350px;width: 120px;background-color: red;float: left;}
#d2 {height: 350px;width: 70%;background-color: blue;float: right;}4.3 三列布局
对于一些大型网站特别是电子商务类网站由于内容分类较多通常需要采用“三列布局”的页面布局方式。 例三列自适应宽度居中
#d1{height: 200px;width: 300px;background: red;float: left;
}
#d2{height: 200px;width: 300px;background: blue;float: left;
}
#d3{height: 200px;width: 300px;background: greenyellow;float: left;
}5. HTML5中的语义标签
有没有都不影响 有了之后代码的含义会更加明确
标签作用thead/thead表示表格头部tbody/tbody表示表格的主体thead/thead表示页面的头部nav/nav表示导航栏footer/footer表示页面或区域的底部article/article表示页面中独立的文档内容section/section用于对页面内容进行分块aside/aside表示页面的附属信息定义侧边栏、广告等可以用到
6. 命名规范
6.1 遵循规则
避免使用中文命名汉语拼音都行不能以数字开头命名不能占用关键字用最少的字母达到理解的含义见名知意
6.2 两种命名方式
驼峰式命名除第一个单词之外其他单词首字母大写帕斯卡命名每个单词之间用_连接
6.3 网页模块的命名规范
相关模块 CSS文件
