原问题为红色,回答为黑色

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题:

1、布局问题:经常出现一个div被挤出来?做到一半少一个div布局?

布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素);但是,在纸上花的草图再好再精确,也需要实际操练。

回答:

(1)       关于定位:绝对定位是相当于窗体的;相对定位是相对于父辈div;浮动定位也是相当于父辈div;需要注意的时,当前一个div采用绝对定位, 后一个div采用相对定位时,要判定好父辈div是哪个?是否已经定位?

(2)       关于元素定位:如果没有定位position; left(不起作用)和margin-left(起作用)是不同的;如果定位position; left和margin-left是相同的。

(3)       布局的时候尽量用背景颜色来区分不同的分块,不要用边框来区分。

2、定位问题:明明都定位了,为什么还出现div布局混乱的现象?

(未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误?

回答:父辈div定位出现错误;

3、div中图片的定位,为什么按照理论设定的值,就是到不了应有的位置?

是图片定位错误还是参照物div弄错了?

回答:图片所在div必须定位,如果不定位,left和margin-left作用不同;且图片所在div定位是相对还是绝对也是不同的。

4、内边距与外边局的问题?

可以分清定义,为什么实际运用时总是得不到应有的效果呢?问题在哪?

回答:思路不清晰,定位出错了。

5、div中文字的对齐方式、行间距?

对齐方式没问题,行间距怎么调?用line-height么? 字与字的间距怎么调?

回答:行间距就是通过line-height设置;通过数值大小来确定。

6、div中有序列表的应用?

div中的有序列表可以用来做水平和垂直的菜单栏,可以设置边框,但是它前面的点时怎么缩小的?插入图片做序号时,图片与文字如何对齐,为什么会混乱?

回答:最好不要用图片做序号,不然就把图片做的一样大(目前对能力不咋样的我只能如此。。)

文字后面的日期除了用单独的div做,为什么我用<span>标签做出来会自动空一行,原因在哪?

回答:现在试是正确的。之前不知道错误出在哪里,现在也没找到

7、为什么做好的静态网页在这个浏览器中就可以正常显示,换了其他浏览器就不可以了呢?

是代码错误还是浏览器兼容问题?

回答:要么是定位出错,要么是兼容性问题

回答: 2017-03-19的关于css+div布局的疑问 2017-04-05的更多相关文章

  1. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  2. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  3. 网站实战 从效果图开始CSS+DIV 布局华为网站

    经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...

  4. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  5. CSS:CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  6. CSS+DIV布局应用(2015年06月10日)

    Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...

  7. css+div 布局遇到的小常识

    /根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div. ...

  8. css+div布局案例

    给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...

  9. css div布局示例2(head-main-footer

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. devexpress表格控件gridcontrol实现纵向标头

    1.devexpress控件gridcontrol中的标头默认是横向的,如果要实现纵向标头应该怎么做呢.通过官网的资料整理了一个简单的案例,给大家分享一下.运行效果图如下: 2.数据绑定代码如下: D ...

  2. BZOJ 3391: [Usaco2004 Dec]Tree Cutting网络破坏(搜索)

    这道直接遍历一遍求出每个点的子节点数目就行了= = CODE: #include<cstdio>#include<iostream>#include<algorithm& ...

  3. SpringMVC 集成velocity

    前言 没有美工的时代自然少不了对应的模板视图开发,jsp时代我们用起来也很爽,物极必反,项目大了,数据模型复杂了jsp则无法胜任. 开发环境 idea2016.jdk1.8.tomcat8.0.35 ...

  4. JNI调用的helloworld(JNI_OnLoad映射方式)

    本示例展示JNI的基本示例,helloworld级别的,不过是用JNI_OnLoad映射的方式. 直接看代码,先看包含native method的Person.java的代码: package hel ...

  5. Spring框架中 配置c3p0连接池 完成对数据库的访问

    开发准备: 1.导入jar包: ioc基本jar jdbcTemplate基本jar c3p0基本jar 别忘了mysql数据库驱动jar 原始程序代码:不使用配置文件方式(IOC)生成访问数据库对象 ...

  6. Cloud9vue&vux上传github小步骤

    成功后创建出以下文件,再输入: git init 再输入:$ git remote add origin https://github.com/github用户名/vux1 然后:git add. 按 ...

  7. Ubuntu下安装Redis并实现远程访问

    之前的一篇随笔写到Redis在Windows下的安装,但目前好多大数据处理的服务是在Linux上的,所以想以Redis为例并实现在Windows上利用C#代码远程访问. 以在Ubuntu下为例,步骤如 ...

  8. 编程那些事儿:如何快速地"借用"CSS

    做前端开发有时候会碰到任务紧急,需要马上写好静态页的问题.比如,设计师给你扔了一个设计稿,要你在下班之前搞定.这时候你如热锅上的蚂蚁,如果自己写css的话,时间紧张,于是上网找了一下相关模板页面,找到 ...

  9. 使用python操作InfluxDB

    环境: CentOS6.5_x64InfluxDB版本:1.1.0Python版本 : 2.6 准备工作 启动服务器 执行如下命令: service influxdb start 示例如下: [roo ...

  10. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res

    koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...