网页的三大元素
结构(内容html标签)+表现(布局CSS)+行为(js)

CSS选择器
1.标记选择器
2.类别选择器(.red)
3.ID选择器(#name)
4.复合选择器
(交集选择器  标记选择器+类别选择器||ID选择器)
(并集选择器 以逗号相连)
(后代选择器 p span|| p>span)

使用CSS的方法
1.行内样式 style=””;
2.内嵌式 <style type=”text/css”> </style>
3.链接式 <link href=””, type=”text/css”, rel=”stylesheet”>
4.导入样式<style type=”text/css”> @import url(“sheet1.css”) </style>

网页盒子模型
margin-border-paddding

盒子定位->postion
分为四大类
1.satic(默认,静态定准、标准流定位,包括浮动方式float)
2.relative(相对定位,以标准流定位为基础)
3.absolute(绝对定位,脱离标准流,找父类绝对定位为基础)
4.fixed(固定定位,以浏览器窗口为基础)

HTML布局总结的更多相关文章

  1. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  4. 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. Xamarin+Prism开发详解五:页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  6. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  7. Android如何制作漂亮的自适布局的键盘

    最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...

  8. 页面布局class常见命名规范

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  9. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  10. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

随机推荐

  1. QT creator中使用opencv

    最近要用到opencv做图像方面的东西,网上很多是用VS加opencv,但自己对VS不怎么喜欢,想用QT Creator.在网上搜索了很多资料,终于花了一天的时间,在QT Creator上能使用ope ...

  2. Eclipse formater(google Java 编码规范)

    1. 谷歌Java编码规范 http://google-styleguide.googlecode.com/svn/trunk/javaguide.html 2. 下载配置文件: https://co ...

  3. SaltStack运行任务卡住了,怎么办?

    将相关的JOB ID杀死即可. salt-run jobs.active salt "*" saltutil.signal_job JOBID 15

  4. FJ省队集训最终测试 T3

    思路:状态压缩dp,f[i][j[[k]代表i行j列这个格子,连续的状态为k,这个连续的状态是什么?就是下图 X格子代表我当前走到的地方,而这里的状态就是红色部分,也就是连续的一段n的状态,我们是分每 ...

  5. Android 编程:calledfromWrongThreadException 的原因

    子线程更新UI会发生Android.view.ViewRoot$CalledFromWrongThreadException异常的解决方法 子线程更新UI 显然假如你的程序需要执行耗时的操作的话,假如 ...

  6. TCP/IP 中文译名为传输控制协议/因特网互联协议,又叫网络通讯协议

    原文地址:http://hi.baidu.com/albyuyrgqgbbhoq/item/65006d2d002ab33195f62ba1 TCP/IP(Transmission Control P ...

  7. 【剑指offer】面试题36:数组中的逆序对

    题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 思路: 归并排序的合并过程.主要是考虑合并两个有序序列时,计算逆序 ...

  8. <php>统计整个文件夹的大小

    //用来统计一个目录下大小 function dirsize($file) { $size = 0; $dir = opendir($file); while($filename = readdir( ...

  9. LRU Cache的简单c++实现

    什么是 LRU LRU Cache是一个Cache的置换算法,含义是“最近最少使用”,把满足“最近最少使用”的数据从Cache中剔除出去,并且保证Cache中第一个数据是最近刚刚访问的,因为这样的数据 ...

  10. c++11 之 decltype

    在C++中,decltype作为操作符,用于查询表达式的数据类型.decltype在C++11标准制定时引入,主要是为泛型编程而设计,以解决泛型编程中,由于有些类型由模板参数决定,而难以(甚至不可能) ...