“学习CSS布局” 笔记

学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和static表现一样.额外属性包括:top, right, bottom, left. 一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置.和 relative 一样, top . right . bottom 和 left 属…

《学习CSS布局》学习笔记

近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元素和行内元素. 一个块级元素会新开始一行并且尽可能撑满容器.常见的块级元素包括div.p.form,以及HTML5中新加入的header.footer.section等. 行内元素可以显示在段落内而不打乱段落的布局.常见的行内元素包括span和a等. display属性就是控制元素的表现形式,它的值…

学习CSS布局 - dispaly属性

"display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是 block 或 inline . 一个 block 元素通常被叫做块级元素. 一个 inline 元素通常被叫做行内元素. block <div> div 是一个标准的块级元素. 一个块级元素会新开始一行并且尽可能撑满容器. 其他常用的块级元素包括 p . form 和HTML5中的新元素: he…

css布局笔记（三）圣杯布局，双飞翼布局

圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下  <!DOCTYPE html> <html> <head> <style> .con { padding-left: 150px; padding-right: 190px; } .left{ background: #E79F6D; width:150px; float:left; margin-left:…

学习CSS布局 - position例子

position例子通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position例子</title> <style> * { box-sizing: border-box; } .c…

学习CSS布局 - position

position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运行结果,在看下源码,最后解释一下position的各个属性. 结果: 源码看一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti…

学习CSS布局 - box-sizing

box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度. 这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; <!DOCTYPE html> <html lang="en"> <head> <meta charse…

学习CSS布局 - 盒模型

盒模型在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度的元素显示的实际宽度却不一样. 看看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title…

学习CSS布局 - 没有布局

如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏览器窗口大小你就明白我的意思了! 在解决这个问题之前,我们需要了解一个很重要的属性: display 原文地址: http://zh.learnlayout.com/no-layout.html…

css布局笔记（二）Flex

flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{display:flex;} 行内元素也可以使用flex布局. .box{display:inline-flex;} webkit内核的浏览器,必须加上-webkit前缀 .box{display:-webkit-flex; display:flex;} 注意:设为flex布局以后,子元素的float,clear…

css布局笔记（一）

布局方式一列布局通常固定宽高,用margin:0 auto:居中显示两列布局说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度).如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响 .对于自己相邻元素清除浮动产生的影响用:clear:both;. 三列布局两列定宽中间自适应:首先设置父级元素的宽度,可以左左右设置浮动.然后…

学习CSS布局 - max-width

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>max-width</title> <style> .main { max-width: 700px; border: 1px solid red; margin: 0 auto; } </style> </head> &…

学习CSS布局 - margin: auto;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-auto</title> <style> .main { width: 600px; margin: 0 auto; border: 1px solid red; } </style> </head> <…

css布局笔记

1.display block块级元素(div.p等) inline 行内元素(a.span等) 常见的例子:把li修改成inline ,制作成水平菜单 2.max-width 来适应不同浏览器窗口大小,IE7+都支持这一属性 3.box-sizing:border-box 将元素设置这一属性时,元素的内边距和边框不会影响其内容宽度,再也不需要计算内容宽度的值了. 缺点就是不同浏览器内核要分别设置,并只支持IE8+ 4.position 5.浮动与display:inline-block…

2014第16周三CSS布局再学习摘录

今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class和id的区别: 在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器.如: .css5{属性:属性值;} 选择器在html调用为“<div class="c…

前端学习（十四）：CSS布局

进击のpython ***** 前端学习--CSS布局每个模块的相关央视就算是进本上都完成了,但是,这些模块想放在不同的位置横着放,竖着放,斜着放... ... 想怎么放怎么放那就用到了今天要说的CSS布局了浮动浮动介绍浮动是网页布局中非常重要的一个属性.那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果,如图所示: 如果我们用之前讲解的内容,来实现上述显示的效果,这是很难实现的!!! 另外之前咱们学习了标签的分类,每类标签都是有它自己的特点,比如块级标签独占一行,哎呀,突然有…

学习 CSS 样式

1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行): 如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐. (2)对于CSS的清除浮…

CSS布局基础

(初级)css布局一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border.外边距margin.内边距padding.内容content)盒子模型3维立体图:自上往下(边框.内容和内边距.背景图片.背景颜色.外边距)样式追求就近原则(行内样式>内部样式>外部样式)3.自动居中margin: 0px auto;实现自动居中(原理:外边距=(浏览器的宽度-外包含层的宽度)/…

css布局&初始化&基准样式

学习css布局比较好的网站学习css布局 1.css设置模块 typography(字体) colour(颜色) link(链接) forms(表单) layout(布局) navigation(导航) typography(字体) xsmall small normal larger xlarger /*父文件*/ @import url(style.css); /*父文件包括*/ /* basic styling 基准样式*/ @import url("base.css"); /…

[浅谈CSS核心概念] CSS布局模型：float和position

1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布内联元素都会在所处的包含元素内从左到右水平分布显示 2.层模型如上图,网页呈现的内容,就像PS中的图层一样,是多层重叠呈现的效果,当然,一般情况下我们的网页只有一层,因为任何元素在默认情况下是不能浮动的.但是脱离了"普通流"…

详解CSS布局

CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.主要对文档流的改变进行布局.假设你已经掌握了CSS的选择器.属性和值,并且可能对布局有一定了解可以往下看,如果没有可以先看这篇博客css解析. css实现左右布局 css实现左右布局的方式大概有六种: 1. table的li实现 table标签是能够具有实现左右布局的属性,tr表示一行,td表示一列,tr中可以添加td实现盒子的左右布局. 2 . inline-block display:…

CSS ? Layout Module : CSS 布局模型

1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 2016 1 https://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011 1 https://www.w3.org/TR/css-ruby-1/…

HTML+CSS学习笔记 (12) - CSS布局模型

标签:HTML+CSS css布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮…

html学习第三天—— 第12章——css布局模型

清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer)…