绝对定位 | 易学教程

CSS布局——display，position，float属性

阅读更多关于 CSS布局——display，position，float属性

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

css布局方式

阅读更多关于 css布局方式

布局方式 1.标准流/静态流　　默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示 2.浮动布局　　主要用于设置块元素的水平排列　　 1）属性:float 　　 2）取值 : 可取left或right，设置元素向左浮动或向右浮动. 　　示例: float:left/right; 　　3）特点: 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位元素设置浮动,就具有块元素的特征,可以手动调整宽高 "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示　　 4）常见问题 : 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局　　 5）解决: 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 在父元素的末尾添加空的块元素。设置clear:both;清除浮动为父元素设置overflow:hidden;解决高度为0 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 height:500px; 10 margin:0 auto; 11

CSS布局模型

阅读更多关于 CSS布局模型

css布局模型布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）　　1.流动模型　　　　先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。　　　　　　流动布局模型具有2个比较典型的特征：　　　　　　　　（1）块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100% 。实际上，块状元素都会以行的形式占　　　　　　据位置。如下代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流动模式下的块状元素</title> <style type=

css margin知识全集

阅读更多关于 css margin知识全集

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin

css布局模型

阅读更多关于 css布局模型

清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）流动模型（一）流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。例如：运行结果为：流动模型（二）第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。运行结果为：浮动模型块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素浮动

【前端面试CSS】—垂直水平居中终极版

阅读更多关于【前端面试CSS】—垂直水平居中终极版

前言：居中元素一直是前端ers绕不过去的坎儿，各种面试中经常出现，一起做一个总结，欢迎补充~ 以下分别会介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：一、水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 <div class="parent"> <div class="child">Demo</div> </div> <style> .parent{ text-align:center; } .child { display: inline-block; } </style> 2.块级元素的水平居中这种情形可以有多种实现方式: ①将该块级元素左右外边距margin-left和margin-right设置为auto .child{ width: 100px;//确保该块级元素定宽 margin:0 auto; } ②使用table+margin

CSS深入了解之padding

阅读更多关于 CSS深入了解之padding

一、padding影响元素尺寸对于block水平元素 padding值大到一定境界，一定会影响尺寸； width非auto，padding值会影响尺寸（padding值越大，元素看起来越小）； width：auto或box-sizing：border-box；同时padding值没有特别的大，不影响尺寸对于inline水平元素水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）使用这一特性，可以实现高度可控的分割线 /*使用inline padding实现注册 | 退出登录 */  注册<span></span>登录  span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; } 二、padding的特性 1、padding不支持任何形式的负值 2、padding百分比相对于宽度计算 /* block元素实现移动端屏幕题图占一半 */ <div class="container"> <div class="example"> <h2>padding..</h2> <h3>margin

CSS文档流与块级元素和内联元素

阅读更多关于 CSS文档流与块级元素和内联元素

3 月，跳不动了？>>> CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理>;<). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

css整理

阅读更多关于 css整理

1.介绍一下标准的css的盒子模型？与ie盒子有什么区别？（1）有两种盒子，一个是W3C盒子模型，另一个是IE盒子模型（2）盒模型：内容（content），内边界（padding），边框（border），外边界（margin）（3）区别：ie的content部分把padding和border算进去了 2.css选择符有哪些，哪些属性可以继承？ ①id选择器（ # myid） ②类选择器（.myclassname） ③标签选择器（div, h1, p） ④伪类选择器（a:hover, li:nth-child） ⑤子选择器（ul > li） ⑥后代选择器（li a） ⑦相邻选择器（h1 + p） ⑧通配符选择器（ * ）可继承的样式： font-size font-family color, UL LI DL DD DT; 不可继承的样式：border padding margin width height ; 3.css优先级优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比内联优先级高 4.CSS3新增伪类有哪些？ :after 在元素之前添加内容,也可以用来做清除浮动。 :before 在元素之后添加内容 :disabled

CSS艺术之---负margin之美

阅读更多关于 CSS艺术之---负margin之美

CSS中负边距(nagative margin)是布局中常常使用的一个技巧。仅仅要运用得当时常会产生奇异的效果。勘称CSS中的奇淫巧计，非常多CSS布局方法都依赖于负边距。掌握它对于前端童鞋来说还是非常重要的。一、原理文档流百度百科中的定义：文档流是文档中可显示对象在排列时所占用的位置。将窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 (自己的理解是从头到尾依照文档的顺序，该在什么位置就在什么位置，也能够依照上面的意思理解，自上而下，自左到右的顺序) 那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是尾随者文档流的变化而变化的。看以下这幅图：负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这样的偏移不同于相对定位。通过相对定位偏移后，其仍然会坚守着它原来占领的空间，不会让文档流的其他元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占领的空间，这样它后面文档流中的其他元素就会“流”过来填充这部分空间。还是通过样例来说明吧。如今我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么：具体发生了什么变化自己体会体会，负的边距好像能减小元素在文档流中的尺寸一样，但其实。它的尺寸大小并没变

订阅绝对定位