第3章    盒模型，定位，浮动，清理

1.盒模型用到的属性width,height,padding,border,margin

普通文档流的上下垂直margin会叠加

2.块级框 与 行内框， 利用display属性来改变特性，display：block，display：inlne-block

3. 3种基本的定位机制：普通流，绝对定位，浮动

4.相对定位

是普通流定位的一部分，与文档流相关，根据自身原先的位置进行移动

无论是否移动都占据原来空间position:relative

设置top,right,bottom,left的属性值进行移动

5.绝对定位

不占空间与文档流无关，

根据距离最近的已定位的祖先元素进行定位position:absolute

text-align:top / right / bottom / left

固定定位

是绝对定位的一种position:fixed

差异是包含块是视口

6.浮动float

清理（p51）

float:left

float:riagt

clear:both / left /right / none(不允许两边/不允许左边/不允许右边/允许两边)

<br class="clear"/>

笔记《精通css》第3章 盒模型，定位，浮动，清理的更多相关文章

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

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

  2. 2019.4.4 盒模型&定位&浮动

    盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 父子关系之间用padding 兄弟关系之间用margin margin padding border 后面跟的值的顺 ...

  3. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  4. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  5. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  6. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  7. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  9. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

随机推荐

  1. poj 3164 最小树形图模板！！！

    /* tle十几次,最后发现当i从1开始时,给环赋值时要注意啊! 最小树形图 */ #include<stdio.h> #include<string.h> #include& ...

  2. Docker创建PHP镜像

    Step: 1. 创建Dockerfile FROM php:7.0-apache RUN chmod -R 755 /var/www 2. 创建镜像 docker build -t docker_n ...

  3. FTPClientUtil FTPclient工具

    package com.ctl.util; //须要commons-net-3.0.1.jar import java.io.*; import java.net.*; import java.uti ...

  4. Behavioral模式之Interpreter模式

    1.意图 给定一个语言,定义它的文法的一种表示.并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2.别名 无 3.动机 假设一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各种 ...

  5. Android-spinner

    Android-spinner 一 Adapter概念 spinner:下拉栏里面的TextView 指定系统spinner:在xml文件中面的spinner中的属性android:entries=& ...

  6. Struts2框架复习（一）--最基本的struts2框架

    前言 最近离职在家,发现之前学习的Struts2框架由于长时间不使用有点生疏,有鉴于此写下此文以备自己复习使用,同时也供大家批评指正. 准备工作 我觉得Struts2主要就是对Servlet的封装,还 ...

  7. singlefile.py

    #! encoding=utf-8 import os import os.path AllFiles = {} MinSize = 8100 def OneDir( DirName ): if Di ...

  8. remove namespace from xml config file

    从xml配置文件中移除命令空间 https://stackoverflow.com/questions/987135/how-to-remove-all-namespaces-from-xml-wit ...

  9. Protected vs protected internal (Again) in c#

    http://stackoverflow.com/questions/22940317/protected-vs-protected-internal-again-in-c-sharp protect ...

  10. ※交换排序(1)——快速排序（quick sort）

    快速排序使用分治策略(Divide and Conquer)来把一个序列分为两个子序列.步骤为: 从序列中挑出一个元素,作为"基准"(pivot). 把所有比基准值小的元素放在基准 ...