一天搞定CSS：BFC布局与普通文档流布局比较--15

BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用关键词解释: 块级元素:父级(是一个块元素) 内容:子元素(是一个块元素) 其它元素:与内容同级别的兄弟元素相互作用:BFC里的元素与外面的元素不会发生影响 2.BFC触发方式 2.BFC的布局规则 3.普通文档流布局规则 4.代码演示 <!DOCTYPE html> <html> <head> &l…

一招搞定css页面布局

如何做出漂亮的页面: 1. 多写页面,多改. 2. 多写页面,多改. 3. 多写页面,多改. 大致的思想步骤: 写页面的时候先规划好大致的分块,无论是用定位或者浮动,首先要确定要应用的场景,使用完浮动后一定记得清楚浮动,使用定位时要清楚其他盒子会完全忽视这个定位的盒子,如果两个盒子都是定位并且重叠,这个时候,两个盒子都会是透明的. 关于布局,多写页面,多修改,利用好开发者工具(F12),掌握布局很简单.…

sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sass的设计思维--Don't Repeat Yourself.这一篇将阐述Sass如何利用变量.选择器嵌套.混合器和选择器继承来帮我们又快又好地搞定CSS. 零. Sass的作用是什么? Sass的作用是,帮助我们更快地(又快)写出具有高可维护性(又好)的CSS代码. 直白点说就是,用了sass,写…

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co…

布局转换：文档流->绝对定位

布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大的时候会导致旁边的元素跟着动,所以需要将float布局转换为absolute绝对定位1.先使用文档流布局,可以用float这些2.因为每个图片元素都有offsetLeft和offsetTop,通过遍历获取将offsetLeft和offsetTop赋值给自己的left和top值,最后将元素属性改为绝对定位f…

一行css代码搞定响应式布局

在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询.ok,让我们发车吧. 设置在本文中,我将使用网格布局.然后,我们将在文章末尾添加图片.下面是我们初始化网格的外观 HTML 代码: <div class="container"&g…

前端实战Demo：一张图片搞定一页布局

对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减少很多的切图工作,那便是——用一张图片搞定整个一页的页面布局.当然,不止是省了一些切图的花费,也是一种很有效的前端开发方法,尤其是针对那些设计花哨,使用HTML和Css还原度较难,并且实际上也并没有那么多可操作元素的设计. 其实简单来说就是一句话——使用空的HTML元素来框选出需要操作的图片元素.…

十分钟搞定CSS选择器

在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.浏览器自定义同一级别同一级别中后写的会覆盖先写的样式基础选择器选择器含义 * 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用) #id id选择器,匹配特定id的元素 .…

(转)十分钟搞定CSS选择器

原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.浏览器自定义同一级别同一级别中后写的会覆盖先写的样式基础选择器选择器含义 *…

一天搞定CSS（扩展）：CSS Hack

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应…

一天搞定CSS：定位position--17

1.定位取值概览 2.相对定位relative <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; color: #fff; } .div1{ background: red; } .div2{ background: green; /…

一天搞定CSS：浮动（float）及文档流--10

浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). 下面我们就来详细说明浮动!!!!!!!! 1.文档流在浮动中有一个文档流的概念,所以在这里不得不介绍一下文档流了. 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <…

一天搞定CSS：盒模型content、padding、border、margin--06

1.盒模型网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式. 2.盒模型分为:标准盒模型和非标准盒模型当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona…

前端css盒模型及标准文档流及浮动问题

1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重点学习标准模型. 盒模型示意图: 盒模型属性: width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离基本写法: <!DOCTYPE html> <html…

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g…

一天搞定CSS：支持IE的Layout布局--16

1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://blog.csdn.net/baidu_37107022/article/details/71634396 2.Layout布局定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用该布局有hasLayout属性控制: 取值:true,false 3.触发Layout的方式…

一天搞定CSS：层级(z-index)--18

因为定位的出现,所以有了元素重叠的情况,此时就出现了显示谁的情况.在多层布局时,容易出现这种情况定位position见:http://blog.csdn.net/baidu_37107022/article/details/71642147 1.默认层级规则但层级规则可以通过z-index来设置 1.在正常情况下,层级的大小由顺序决定,后面的元素要比前面的元素的层级要高 <!DOCTYPE html> <html> <head> <meta charset=&…

一天搞定CSS：浮动（float）的副作用--12

我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用. 如果你还不清楚什么是浮动,那就点开这个链接: http://blog.csdn.net/baidu_37107022/article/details/71515984 浮动带来的副作用 1. 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,像这样 2. 行内元素,例如文字, 则会环绕在浮动元素的周围,为浮动元素留出空间,像这样: 3. 浮动元素的父元素坍缩, 像这样: 如果我们不希望要这些效果,…