float属性 基本浮动规则 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.margin.padding属性: inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化.inline元素设置width.height属性无效.inline元…

随着 IE8 逐渐退出舞台,很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了. 用 :empty 区分空元素 兼容性:不支持 IE8 /*假如我们有以上列表:*/ <div class="item">a</div> <div class="item">b</div> <div class="item"></div> 我们希望可以对空元素和非空元素区别处理,那么…

1.高级布局<文档流概念>:页面从上至下,块式标签一行一行排列,内联式一行中从左至右排列<BFC规则>:左右位置(左右margin)垂直位置(上下margin)容器内外(互不影响)<脱离文档流>:脱离文档流的元素 拥有black块级元素所有 综合使用 em,rem,vw,wh,%布局流式布局---让布局脱离固定值(一般只是宽)限制,可以根据页面情况改变相应发生改变,整体布局不改变 百分比布局 响应式布局---不同大小屏幕 显示不同的布局@media  screen an…

第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核心属性.class的主要功能是用来对对象的样式设置,而id除了可以定义样式外,还能够成为服务网站交互行为一个特殊标识.每一个被定义了id名称的对象,其id名字在每个页面有且仅能出现一次. 6.1.2 如何使用id 在不考虑使用JavaScript脚本,而是XHTML代码及CSS样式应用的情况下,应当…

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布…

css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄…

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则…

 双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而left与right就是鸟的"翼"了,鸟想要平衡地飞翔就要把主体位置给摆正确,然后在"翼"的作用下开始起飞.布局也是一样的,我们也要先把主体给摆好,然后再合理地调整双翼,这样整体动作才会比较和谐. 双飞翼布局的效果图如下所示: HTML代码如下所示: <div clas…

前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时…

下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路.我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习.这比直接学习网格布局的所有东西要好太多了. 浏览器原生CSS网格预计会在2017年年初得到支持. 在这之前你需要在浏览器中开启这个实验性的功能 (Firefox实验版默认是开启的). Chrom…