【前端笔记之CSS（下）浮动&BFC&定位&Hack】的更多相关文章

前端笔记之CSS（下）浮动&BFC&定位&Hack

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin)  块元素行内元素 浮动流:产生?影响?如何解决? 定位流:静态定位(不定位)  相对定位  绝对定位  固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决…

2.前端笔记之css

title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuyao.me欢迎转载** 一.css简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. 存在方式有三种:元素内联.页面嵌入和外部引入 1.元素内联 <!DOCTYPE h…

css权威指南读书笔记-第10章浮动和定位

这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮动时,其他内容会环绕该元素.浮动元素会生成一个块级框,不论这个元素本身是什么.并且浮动元素周围的外边距不会合并.如果要浮动一个非替换元素,必须显式声明width. 浮动元素的几条规则: 1)      浮动元素的左(右)外边界不能超出其包含块(包含快是其最近的块级祖先元素)的左(右)边界.但是负外边距或者浮动…

CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了w…

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

  一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图…

前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素 clear:both:在左右两侧均不允许浮…

css的浮动与定位

显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 display的三个属性值显示效果 属性 值 效果 display inline 显示为内联元素 display block 显示为块级元素 display inline-block 显示为行内块级元素 overflow内容溢出 属性 值 效果 overflow visible 可见 overflow hi…

web前端笔记整理---CSS

一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内  优先级次之 1.3 外部文件 引入方式:<style type="text/css"></style> 组成: 选择器:标签/元素选择器   class    ID   伪类选择器   属性选择器 (不常用) 组合形式: 层级选择器 .wangjianlin,.…

CSS的浮动和定位

一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 2.特点 a:浮动盒子的宽度不会自动伸展,宽度以内容.外边距.内边距属性为准 b:标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置,但内容会受到浮动盒子宽度的影响. c:父级盒子中的所有盒子都采用浮动形式,若父级盒子未指定高度则父级盒子的高度为0,因为所有…

前端笔记之CSS（上）

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 基本语法 在head标签里面,写入一下标签: <html> <head> <style type="text/css"> css代码 </style> </head>…