一丶盒模型的属性(重要)

  1.padding

    padding是标准文档流,父子之间调整位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*上下左右*/
padding: 10px;
/*上下 左右*/
padding: 20px 30px;
/*上 左右 下*/
padding: 20px 30px 40px;
/*顺时针 上右下左*/
padding: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>

padding

  2.border

    三要素: 线性的宽度  线性的样式  颜色

    solid 实线  dotted小圆点  double双实线  bottom虚线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*根据方向来设置*/
border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>

border

  实例:制作三角形

  transparent 透明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作三角形</title>
<style type="text/css">
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent; }
</style> </head>
<body>
<div> </div>
</body>
</html>

制作三角形

  3.margin

    前提:必须是在标准文档流下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
.s1{
background-color: red;
margin-right: 30px;
}
.s2{
background-color: rgb(0,128,0);
margin-left: 30px;
}
</style>
</head>
<body>
<span class="s1">alex</span><span class="s2">wusir</span>
</body>
</html>

margin

  margin垂直方向上的坑:

    margin的水平不会出现任何问题

    垂直方向上 margin会出现'塌陷问题'

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin坑</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="s1"></div>
<div class="s2"></div>
</body>
</html>

margin(坑)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin父子盒子的坑</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
/*float: left;*/
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>

margin父子盒子的坑

二丶display显示

  前提;必须是在标准文档流下

  块级元素和行内元素的相互转换:

    块级元素可以转换为行内元素:

      display:inline

      此时这个div不能设置宽度丶高度;

      此时这个div可以和别人并排了

    行内元素转换为块级元素:

      display:block

      此时这个span能够设置宽高

      此时这个span必须霸占一行了,别人无法和他并排

      如果不设置宽度,将撑满父亲

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
div a{
display: block;
width: 100px;
height: 100px;
}
span{
display: inline-block;
width: 300px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">alex</div>
<div class="box">wusir</div> <div>
<a href="#">
<img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
</a>
</div> <input type="text" /><br />
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</body>
</html>

display

三丶浮动

  float :    none  表示不浮动,默认

       left:表示左浮动

       right:表示右浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2"> </div>
</body>
</html>

浮动

  我们该如何清除浮动呢?有以下几种方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
height: 300px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2"> </div>
</body>
</html>

固定高度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 内墙法 -->
<div class="clearfix"></div>
</div>
<div class="father2"> </div>
</body>
</html>

clearfix内墙法

     visibility:hidden; 设为隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
} .clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="father clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> </div>
</div>
<div class="father2"></div>
</body>
</html>

伪元素清除法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> </div>
</div>
<div class="father2"></div>
</body>
</html>

overflow清除法

盒模型的属性丶display显示丶浮动的更多相关文章

  1. 盒模型 box-sizing 属性

    css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)( ...

  2. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  3. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  4. JQuery设置和去除disabled属性 与 display显示隐藏

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

  5. 弹性盒模型justify-content属性

    justify-content是应用于父容器上来规定子元素在水平方向上的对齐方式的. flex-start 左对齐 flex-end 右对齐 center 居中 space-betten 两端对齐,两 ...

  6. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. python全栈开发day39-CSS继承性和层叠性、权重问题、盒模型和其属性、文本级标签和块级标签、浮动

    一.上次内容回顾 1.CSS的三种引入方式: 行内式 内接式 外接式 链接式 导入式 2.基础选择器和高级选择器 1)标签选择器 p{} 2)  id选择器 #nva{} 3) 类选择器 .nva{} ...

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. Codeforces Round #556 (Div. 2) - C. Prefix Sum Primes(思维)

    Problem  Codeforces Round #556 (Div. 2) - D. Three Religions Time Limit: 1000 mSec Problem Descripti ...

  2. MongoDB mongo.exe启动及闪退解决 转载

    转载自:http://blog.csdn.net/wyx_wx/article/details/76108662 启动: 进入MongoDB安装目录下的bin目录,启动mongod.exe 出现如图所 ...

  3. php 多字节编码转换

    PHP 支持的编码 mb_convert_encoding — 转换字符的编码 string mb_convert_encoding ( string $str , string $to_encodi ...

  4. ZOJ - 2112 主席树套树状数组

    题意:动态第k大,可单点更新,操作+原数组范围6e4 年轻人的第一道纯手工树套树 静态第k大可以很轻易的用权值主席树作差而得 而动态第k大由于修改第i个数会影响[i...n]棵树,因此我们不能在原主席 ...

  5. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  6. php的魔术常量以及类的模式方法

    魔术方法class A { const PI = 3.14; static $type = 'type1'; public $a1='a1'; public function fun1(){ var_ ...

  7. Python的html解析器

    转自https://blog.csdn.net/jqh2002_blog/article/details/24842217 其实比较不同的解析器对html的处理能力是有点麻烦的,因为它们处理的步骤并不 ...

  8. 补充ABP Zero集成微信小程序登陆的BUG修复部分

    感谢园友 @turingguo 发布的 https://www.cnblogs.com/turingguo/p/9019026.html  文章,详细介绍了ABP Zero集成微信小程序登陆的实现过程 ...

  9. [转]Hive 数据类型

    Hive的内置数据类型可以分为两大类:(1).基础数据类型:(2).复杂数据类型.其中,基础数据类型包括:TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBL ...

  10. 关于require js加载的时候报错的问题

    1.在项目中使用了requery.js  页面总是会出项一些奇怪的错误,如下 后来经过查找资料才发现,原来是因为依赖 的问题,因为require加载的时候是异步加载,而js之间是有相互依赖的,所以解决 ...