web基础(4): CSS布局与定位】的更多相关文章

CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素会按父元素宽高自动调节大小,有更好的自适应性, 但由于<body>元素默认宽度有效,默认高度无效, 因此<div>(定位方式为默认值static)父元素为<body>时width="100%" height="100%",其高度设置是…
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS布局 本章简介 上一章节讲解了盒子模型以及页面元素定位,理解了绝对定位.相对定位.包含块三者之间的关系以及应用场合.例如:绝对定位的页面元素会脱离标准文档流,通过指定的坐标位置进行定位:相对定位则不脱离标准文档流,只是相对于元素原有的位置进行偏移,不挤压其他页面元素.设计师可以通过定位盒子来完成基本…
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素,决定了网页的内容和结构 Python:编程语言,编写程序HTML:标记语言,像画画一样,画出网页的内容 基本结构<!DOCTYPE html><html> <head> </head> <body> </body></html>…
常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置absolute:相对于浏览器的绝对定位和fixed类似 文件关系: static定位: css里面写入内容:static定位方式,定位到的显示为红色 .static { position: static; background-color: red;} html里面写入内容:引入css,并加一个标签…
给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 position:relative      必须设置 width 与 height 且不能用百分比      父层如果是图片,要使用  background: url(bg.jpg) no-repeat;       子元素必须设置 position: absolute;      必须设置 wid…
css 层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: value } 例如: h1 {color:red; font-size:14px;} 两种功能:对标签样式渲染,和页面布局 CSS1.查找标签(选择器)通过选择器去查找标签 2.操作标签(属性操作) 一.引用方式: 1.行内式<标签名 style="属性1:值1;属性2:值2"&…
三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级元素都是盒子模型,下面说下盒子模型 盒子模型 盒子模型是网页布局的基石,border padding margin 下面给出盒子3d模型图便于理解 常见布局 自动居中一列布局 布局时候最重要的是把握三个技能点:标准文档流,块级元素,margin属性 自动居中代码:margin:0 auto: aut…
1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上会从左上方留向右下方. 2.流与盒模型 盒模型:从CSS角度来看,每个元素都是一个盒子.由内容区(content area),内边距(padding),边框(border)和外边距(margin)组成. 并排放置两个内联元素时:它们的外边距会叠加. 上下放置两个块元素时:它们的外边距会折叠,共同的外…
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">…
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移动后: static往上移,占据box1的位置. 4.relative: box1相对于static 定位. 5.absolute: 初始位置: absolute相对于absolute移动后: 移动后: 6.一般设计方式: 案例: 区别:…