css基础布局

1、布局相关的标签

  • <div></div> 定义文档中的分区或节
  • <span></span> 这是一个行内元素,没有任何意义
  • <header></header> HTML5新增 定义 section 或 page 的页眉
  • <footer></footer> HTML5新增 定义 section 或 page 的页脚
  • <main></main> HTML5新增 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在 文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别
  • <nav></nav> HTML5新增 表示链接导航部分 如果文档中有“前后”按钮,则应该把它放到元素中
  • <section></section> HTML5新增 定义文档中的节 通常不推荐那些没有标题的内容使用section
  • <article></article> HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论
  • <aside></aside> HTML5新增 相关内容,相关辅助信息,如侧边栏

2、盒子模型

2-1 什么是盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  • Margin(外边距) 清除边框外的区域,外边距是透明的。
  • Border(边框) 围绕在内边距和内容外的边框。
  • Padding(内边距) 清除内容周围的区域,内边距是透明的。
  • Content(内容) 盒子的内容,显示文本和图像。

2-2 块级元素和内联元素(行内元素)

块级元素

  • 总是在新行上开始,占据一整行
  • 高度,行高以及外边距和内边距都可控制;
  • 宽度缺省是它的容器的100%,除非设定一个宽度
  • 它可以容纳内联元素和其他块元素。

内联元素

  • 和其他元素都在一行上
  • 高,行高及外边距和内边距部分可改变;
  • 宽度只与内容有关;
  • 行内元素只能容纳文本或者其他行内元素。
  • 外边界只能对左右起作用,内边距都起作用

块级元素和内联元素的转换

display: block | inline | inline-block

2-3 盒子模型之间的关系

document树

父元素 子元素 后代元素 祖先元素 兄弟元素

标准文档流

  1. 行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
  2. 块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

盒子在标准流中的定位原则

  • 行内元素之间的水平margin
  • 块级元素之间的竖直margin (margin的塌陷)
  • 嵌套盒子之间的margin, (子元素父元素margin合并)
  • 将margin设置为负值

盒子模型相关CSS属性

布局属性

  • display

    | 值           | 描述                                                 |
    | ------------ | ---------------------------------------------------- |
    | none | 此元素不会被显示。 |
    | block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
    | inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
    | inline-block | 行内块元素。(CSS2.1 新增的值) |
  • float

    | 值      | 描述                                                 |
    | ------- | ---------------------------------------------------- |
    | left | 元素向左浮动。 |
    | right | 元素向右浮动。 |
    | none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
    | inherit | 规定应该从父元素继承 float 属性的值。 |
  • clear

    | 值      | 描述                                  |
    | ------- | ------------------------------------- |
    | left | 在左侧不允许浮动元素。 |
    | right | 在右侧不允许浮动元素。 |
    | both | 在左右两侧均不允许浮动元素。 |
    | none | 默认值。允许浮动元素出现在两侧。 |
    | inherit | 规定应该从父元素继承 clear 属性的值。 |
  • visibility

    | 值       | 描述                                                         |
    | -------- | ------------------------------------------------------------ |
    | visible | 默认值。元素是可见的。 |
    | hidden | 元素是不可见的。 |
    | collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
    | inherit | 规定应该从父元素继承 visibility 属性的值。 |
  • overflow

    | 值      | 描述                                                     |
    | ------- | -------------------------------------------------------- |
    | visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
    | hidden | 内容会被修剪,并且其余内容是不可见的。 |
    | scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
    | auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
    | inherit | 规定应该从父元素继承 overflow 属性的值。 |
  • overflow-x

  • overflow-y

尺寸

  • width / max-width / min-width
  • height / max-height / min-height

内补白

  • padding / padding-left / padding-right / padding-top / padding-bottom

外边距

  • margin
  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

3、浮动

3-1 什么是浮动

  • CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动
  • 设置浮动,脱离普通文档流
  • 浮动元素都会变为块级元素
  • 如果不设置宽度,会尽可能的窄
  • 浮动元素之后的元素将围绕它 浮动元素之前的元素将不会受到影响。

3-2 设置浮动

.item {
float:left
}
.item {
float:right
}
/*float 属性的默认值是 none 表示没有浮动*/

3-3 清除浮动

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

clear: both
clear: left
clear: right

3-4 浮动实验

实现以下实现

  1. 设置第一浮动的div

  2. 设置第2个浮动div

  3. 设置第3个浮动div

  4. 改变第三个浮动方向

  5. 改变第二个浮动方向

  6. 全部向左浮动,增加第一个的高度

  7. 使用clear属性清楚浮动的影响

  8. 扩展盒子的高度 (元素高度和浮动的元素)

  9. 段落首字母浮动

  10. 图片浮动

  11. 简单浮动布局

3-5 浮动相关CSS属性总结

  • float 值: none(默认) /left /right
  • clear 值: none(默认) /both /left /right

3-6 浮动布局小案例

4、定位

4-1 相对定位

  • 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置
  • 使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响
.box {
position: relative;
top: 10px;
left: 20px;
}

4-2 绝对定位

  • 使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以浏览器窗口为基准进行定位
  • 绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样
.box {
position: absolute;
top: 10px;
left: 20px
}

4-3 固定定位

以浏览器窗口为基准

窗口滚动时,依然保持位置不变

.box {
position: fixed;
top: 10px;
left: 20px;
}

4-4 空间位置

  • 使用css属性 z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • z-index 仅能在定位元素上奏效

4-5 定位相关CSS属性总结

  • position static(默认值) /relative /position /fixed
  • top
  • left
  • right
  • bottom
  • z-index auto(默认值)/数字

CSS基础布局的更多相关文章

  1. CSS基础布局--居中对齐,左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  2. HTML+CSS 基础布局(案列一)

    刚html刚讲完马上就接着css,周末的任务就是高仿案例,结果有点遭 图文布局 代码 css(内部样式) html <!DOCTYPE html><html><head& ...

  3. CSS基础 布局

    1.布局的基本位置 top         距离上边的距离right       距离右边的距离bottom   距离下边的距离left         距离左边的距离 去掉布局时 html 的3mm ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  6. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  7. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  8. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  9. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

随机推荐

  1. Java中final、finally、finalize

    简述 final 可以用来修饰类.方法.变量,分别有不同的意义: final 修饰的 class 代表不可以继承扩展: final 的变量是不可以修改的:final 的方法也是不可以重写的(overr ...

  2. Navicat连接的某个表一直加载并且不能关闭

    问题: 今天下午突然发现数据库的一张表一直加载,也出不来数据,并且也不能关闭.解决办法: 在Navicat中中执行如下命令: SHOW PROCESSLIST; 如果state列中有lock字眼,通过 ...

  3. 解决Linux下Firefox无法启动的问题

    在linux下使用Firefox连接被测系统的GUI,一次偶然操作导致linux系统运行缓慢,Firefox无法正常操作,从system monitor 杀掉所有java进程将Firefox强行关闭. ...

  4. LeetCode 229. 求众数 II(Majority Element II )

    题目描述 给定一个大小为 n 的数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. 说明: 要求算法的时间复杂度为 O(n),空间复杂度为 O(1). 示例 1: 输入: [3,2,3] 输出: ...

  5. 使用arcpy.mapping 更新和修复数据源

    来自:https://blog.csdn.net/gisinfo/article/details/6675390 在许多情况下,您都可能需要修复数据源或重定向数据源至其他位置.然而,如果是在每个相关的 ...

  6. adb、pm命令操作apk包

    1.adb shell pm list package 打印出来所有安装到手机上的APP包名 2.adb shell pm path com.xxx.xxx 找出安装后的包名应用的apk所在位置 3. ...

  7. vue如何动态绑定v-model

    如图所示有三个字段要从弹出的输入框取值点击字段会弹出上面的弹窗,输入input会响应变化,比如点击身高,弹出输入框,输入值后身高后面会跟着一个同样的值点击体重,弹出输入框,输入值后体重后面会跟着一个同 ...

  8. 京东商城跨域设置Cookie实现SSO单点登陆过程

    可以先看下这边文章:http://blog.chinaunix.net/uid-25508399-id-3431705.html   1.点击首页的登陆按钮跳转到京东的登陆中心https://pass ...

  9. JAVA反射机制,总结下

    1.总体概述 Java反射机制指的是在Java程序运行状态中,对于任何一个类,都可以获得这个类的所有属性和方法:对于给定的一个对象,都能够调用它的任意一个属性和方法.这种动态获取类的内容以及动态调用对 ...

  10. Linux系统管理_主题02 :管好文件(1)_2.1 切换、创建和删除目录_cd_mkdir_rmdir

    用法:cd [目录路径] 变换工作目录至制定目录路径,若[目录路径]参数省略则变换至使用者的 家目录, 其中[目录路径]可为绝对路径或相对路径 另外 "~" 在 Bash 中表示当 ...