笔记《精通css》第3章 盒模型,定位,浮动,清理
第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章 盒模型,定位,浮动,清理的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 2019.4.4 盒模型&定位&浮动
盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 父子关系之间用padding 兄弟关系之间用margin margin padding border 后面跟的值的顺 ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
随机推荐
- hdu 1269 求连通图的模板题
#include<stdio.h> #include<string.h> #include<iostream>//只存在一个连通分量 #include<str ...
- MySQL大小写问题的简单说明(关键字/函数/表名)(转)
MySQL语句中字母大小写规则随着语句元素的不同而变化,同时还要取决于MySQL服务器主机上的操作系统. SQL关键字与函数名 关键字和函数名不区分字母的大小写.如.abs.bin.now.versi ...
- bridge 上网
手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip
- android 程序猿跳槽须要注意哪些?
我是一个工作3年多的android开发,因为公司和个人发展原因.打算跳槽! 这次跳槽又给我好好的上了一课!所以我自己反思总结了一下.然后整理出一下几点 程序猿打算跳槽的时候须要注意的几点. 一 先想好 ...
- 写给小白的JVM学习指南
Java 虚拟机是学习 Java 的基础,也是迈入高级 Java 开发工程师的必备知识点.所以今天这篇文章我们来聊聊如何从零开始学习 Java 虚拟机. 基础 对于刚刚接触 JVM 的同学来说,JVM ...
- VFL语言简洁
一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...
- [WebGL入门]二十一,从平行光源发出的光
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...
- 浏览器的多线程和js的单线程--前端易混淆知识科普(一)
问题:js是单线程的,页面是从上往下加载的,那么是不是第一个js没加载完成,第二个js就不加载?然后,引申出来一个问题就是,那css和图片呢?这之间的加载有相互影响吗? 1.什么是线程?什么是进程?什 ...
- ubuntu16.04安装flash player
ubuntu16.04安装flash player sudo apt-get install flashplugin-installer 1 2019: apt-get install browser ...
- 描述一下ArrayList和LinkedList各自实现和区别
ArrayList,LinkedList,Vestor这三个类都实现了java.util.List接口,但它们有各自不同的特性,主要如下: 一.同步性 ArrayList,LinkedList是不同步 ...