Day4 HTML新增元素与CSS布局

Day4 HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</nav> <aside>侧边栏</aside> <article>文章,独立的块,帖子</article> <section>章节,页眉,页脚</section> <footer>页脚</footer> 1.h…

深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识." 首先来列下大纲盒模型 IE盒模型 W3C盒模型 box-sizing 元素的分类块级元素行内元素行内块级元素行框定位与浮动文档流包含块浮动清除 margin问题格式化上下文(formatting context) BFC.IFC.FFC.GFC…

CSS布局：元素垂直居中

CSS布局之元素垂直居中本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握各种方法能够实现居中的原理.只要掌握了原理,那么不管问题怎么变都可以根据自己的理解选择合适的方法. 一.使用line-height 1.原理有行高的元素,内容会默认显示在行高的垂直中心处,通过设置行高等于父元素的高度,可以达到内容在父元素中垂直居中的效果 2.实现步骤 (1)父元素有一个确定的…

CSS布局：元素水平居中

CSS布局之元素水平居中本文将依次介绍在不同条件下实现水平居中多种方法一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对inline.inline-block.inline-table和inline-flex元素水平居中都有效. <style> .box{ width: 300px; height: 100px; text-align: center;/*设置子元素内的行内元素水平居中*/ border: 1px s…

CSS布局：元素水平垂直居中

CSS布局:元素水平垂直居中本文将依次介绍在不同条件下实现水平垂直居中的多种方法水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是将之前的水平居中和垂直居中用到的方法综合起来.用到的原理都是一样的.相信掌握水平居中和垂直居中的方法后,就能自己总结如何实现水平垂直居中 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握各种方法能够实现居中的原理.只要掌握了原理,那么…

界面设计技法之css布局

css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:"咦?我想让它显示在这个部位,它一点都不听话啊".很大原因在于我们可能没对css布局这块做一个系统的梳理~,偶然间发现了Learn CSS Layout,在此分享给大家,希望和大家共同提高,另外…

CSS布局：水平居中

前言一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type="text/css"> ul,li{list-style:none;margin:;padding:;} body{ background:#; font-size:14px; color:#F2F2F2; text-shadow:1px #; } .item{ padding: 10…

CSS布局 ——从display，position， float属性谈起(转)

CSS布局 ——从display,position, float属性谈起页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块…

深入css布局篇(2) — 定位与浮动

深入css布局(2) - 定位与浮动在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时介绍了box-sizing和行框.这篇我们继续... 一.定位与浮动上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果.但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我…

CSS布局那点事儿

布局最开始老的一代网站开发,布局都是通过表格实现的. 这样可以形成规整的网格布局,但是也会带来一定的复杂性.比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列. 后来,衍生出不少的CSS框架,他们屏蔽了底层的css语法,只需要按照特定的使用方式就能实现网格布局.这样对于开发者来说,好处自然是方便了:但是也带来了一定的麻烦,比如网格如果不符合用户的应用场景,需要自定义扩展,这就麻烦了:再比如作出的网站不易调试:网站需要引入额外的文件等等.总的来说,还是利大于弊吧,不然boo…