margin | 易学教程

脱离文档流分析

阅读更多关于脱离文档流分析

脱离文档流分析 --------------------------------------------(分享自http://www.cnblogs.com/shenfangfang/p/5278528.html) 先来了解一下block元素和inline元素在文档流中的排列方式。　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select

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 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】—垂直水平居中终极版

前言：居中元素一直是前端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

盒模型

阅读更多关于盒模型

content (元素自身高度) padding 内边距（上、右、下、左）上右 border 边框默认是宽度是3px 颜色是黑色 border-top-style:solid (dashed dotted); margin 外边框 margin:上、右、下、左居中 margin:0 auto; 父级子级的关系当一个元素在父级里，给子级使用margin时。 1\在父子级时用padding代替margin -top,给父级加 2、给父级加上一个border 3\ overflow:hidden;超出隐藏做三角形时，只需要给标签设置一个boder值，三个边框为border：1px solid transparent ; 另一个边框是1px solid 颜色；注意：两个div分别有margin-right、margin-left margin间距为之和两个div分别有margin-bottom、margin-top 取两个元素的最大值，一正一负求其和 block\inline\inline-block 之间的转换 inline-block 支持宽高又独占一行 display：none;这个地方是隐藏，用于js中 display:block;显示出来 display:none; 隐藏之后不占据位置 visibility:hidden;还存在位置只是不显示 span

盒模型布局详解

阅读更多关于盒模型布局详解

一、盒模型之display（显示方式）一、display组成部分解释 1、块（block）：其可以独行显示并且其自身支持宽高，其中宽可以设置为默认，高可以由子级或内容撑开（可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套）。 2、内联也叫行（inline）：其可以同行显示并且不支持宽高是因为其宽高是由内容决定的（一般嵌套内联）。 3、内联块（inline-block）：包含块和内联的所有特点，但是如果设置了宽高的话就一定要使用设置的宽高，如果值设置一种则按比例缩放（一般只作为最内层级）。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title>  <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /*width: auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置

第三十七天

阅读更多关于第三十七天

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border</title>  <style type="text/css"> .bd { width: 100px; 　　height: 100px; background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style>  <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px

css 实现垂直居中

阅读更多关于 css 实现垂直居中

在前端开发中，实现水平居中很容易，一般实现方式：给元素margin:0 auto; 但是垂直居中就不那么好控制了。怎么样垂直居中呢？这里可以用到position属性，　　假设有如下结构　　HTMl:　 <div class="father"> <div class="child"></div> </div> 　　CSS .father{ width:500px; height:500px; position:relative; background-color:green } .child{ position:absolute; width:200px; height:200px; top:50%;/*********************这里是关键*********/ margin-top:-100px;/**************向上修正为元素的一半**********/ background-color:red; } 　　这样就可以实现垂直居中。当然margin-top：-150px也可以使用css3中transform：translateY（-150px）修正，但是，css3毕竟有些许的兼容问题。来源： https://www.cnblogs.com/webfullstack/p/5282394.html

CSS盒模型

阅读更多关于 CSS盒模型

1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图：　　　　 2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。　　　　常用块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 　　　　常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 　　　　常用内联块状元素：<img>、<input> 　　　　（1）块状元素（也叫块级元素）特点每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。　　　　注：可以使用 display: block ，将元素转为块状元素，使之具备块状元素的特点。　　　　　　　　（2）内联元素（也叫行内元素）特点和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。　　　　注：可以使用 display: inline ，将元素转为内联元素，使之具备内联元素的特点。　　　　（3）内联块状元素特点

CSS盒模型

阅读更多关于 CSS盒模型

目录元素分类元素分类--块级元素元素分类--内联元素元素分类--内联块状元素盒模型--边框（一）盒模型--边框（二）盒模型--宽度和高度盒模型--填充盒模型--边界元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素) 和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素a 转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

订阅 margin