css 盒子下
1.padding
有小属性
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
小属性
综合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*单独一个上下左右*/
/*padding: 10px;*/
/*单独两个 上下 左右*/
/*padding: 10px 20px;*/
/*单独三个上 左右 下*/
/*padding: 10px 20px 30px;*/
/*单独四个 顺时针上右下左*/
padding: 10px 20px 30px 40px;
} </style>
</head>
<body>
<div class="box">alex </div>
</body>
</html>
综合
2.border
线框与三个属性 颜色 大小 样式
border-left-color:red
border-left-style :solid
border-left-width:10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0; }
.box{
width: 200px;
height: 200px;
background-color: red; /*width style color*/
/*根据方向来设置*/
/*border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed purple;*/ /*border-left-style: solid;
border-left-width: 1px;
border-left-color: green;*/ border-width: 5px 10px;
border-color: green yellow;
border-style: solid double; /*border: 5px solid green*/ }
</style>
</head>
<body>
<!-- padding是标准文档流，父子之间调整位置 -->
<div class="box">alex</div> </body>
</html>
border 三元素
3.margin
进行兄弟之间的分块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
background-color: red;
margin-right: 30px;
}
.s2{
background-color:rgb(0,128,0);
margin-left: 30px;
}
</style>
</head>
<body>
<!--span 永远是1行-->
<span class="s1">alex</span>
<span class="s2">wusir</span> </body>
</html>
兄弟距离
4.margin 的坑
在两个方块进行移动的时候 在上下模块下 一个上 一个下 两个快之间的间距不是位移相加 而是最大的那段位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 100px; }
</style>
</head>
<body>
<!-- -->
<div class="s1"></div>
<div class="s2"></div> </body>
</html>
margin 的坑
4.1 在父子模型下 移动子盒子模型父模型也会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 100px; }
</style>
</head>
<body>
<!-- -->
<div class="s1"></div>
<div class="s2"></div> </body>
</html>
margin 父子模型的 坑
5.display
display 显示 必须是在标准文档下 (没有 float)
属性:
display:block 块级标签 -独占一行 -可以设置宽高 不设置默认100%宽
inline 行内标签
- 在一行内显示
- 不可以设置宽高，根据内容来显示宽高
inline-block 行内块
- 在一行内显示
- 可以设置宽高 none 不显示 隐藏 不在文档上占位置 visibility：hidden;隐藏 在文档上占位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
/*display: inline;*/
display: inline;
border: 1px solid yellow;
}
div a {
display: block;
width: 300px;
height: 300px;
}
span{
display:inline-block;
width: 300px;
height: 200px;
background-color: yellow; }
</style>
</head>
<body> <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
<div class="box">wusir</div> <div>
<a href="#">
<img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
</a>
</div> <input type="text">
<span>aaaaa</span>
<span>aaaaa</span> </body>
</html>
display 详细代码
6.浮动
关于浮动 优点是可以使块级标签在一行内显示
缺点是:没有高度的限制下 会重叠在一起 需要控制
盒子浮动:不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面会出现混乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
/*height: 400px;*/ 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>
浮动错误示例
如果父类不设置高度,则会不断撑大,会造成页面混乱
7.解决浮动方法
清除浮动：
1.给父盒子设置固定高度（后期不好维护）
2.clear:both;
给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both 问题：代码冗余
3. .clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
4.overflow:hidden; 要浮动一起浮动，有浮动，清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
/*height: 400px;*/ }
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 500px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
/*这里是将clear：both 重新将浮点固定*/
.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>
伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.clearfix:after{
content: '.';
clear:both;
display: block;
visibility: hidden;
height: 0; }
.father{
width: 500px; /*overflow: hidden;*/
/*height: 400px;*/
/*height: 300px;*/
}
/*.clearfix{*/
/*clear:both*/
/*}*/ .box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 50px;
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 clearfix" >
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> </div>
<!--需要加入一个class类-->
<!--<div class="clearfix"> </div>--> <div class="father2"></div>
</body>
</html>
伪元素清除法
css 盒子下的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- css盒子模型（3）
盒子模型 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在讲理论之前,我们先要知道网页设计中常听的属性名:内容(co ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- 详解Vue生命周期---1
目录 Vue实例的生命周期全过程(图) 在beforeCreate和created钩子函数间的生命周期 created钩子函数和beforeMount间的生命周期 el选项的有无对生命周期过程的影响 ...
- 开源项目 13 log4net
原文:https://www.cnblogs.com/pudefu/p/9300697.html 官方的api: http://logging.apache.org/log4net/release/s ...
- dirb参数解析
-----------------DIRB v2.22 By The Dark Raver----------------- dirb <url_base> [<wordlist_f ...
- 错误解决：android.view.InflateException: Binary XML file line #11: Error inflating class com.tony.timepicker.TimePicker
今天在做项目开发时遇到这么一个错误,完整的错误提示信息如下: java.lang.RuntimeException: Unable to start activity ComponentInfo{co ...
- windows xp 安装后不能能ping，浏览器不能上网
windows xp MSDN版本 下载地址: ed2k://|file|zh-hans_windows_xp_home_with_service_pack_3_x86_cd_x14-92408.is ...
- sudo: ulimit: command not found
在这看到的:http://stackoverflow.com/questions/17483723/command-not-found-when-using-sudo-ulimit 修改系统文件打开数 ...
- 【05】Nginx：TCP / 正向 / 反向代理 / 负载均衡
写在前面的话 在我们日常的工作中,不可能所有的服务都是简单的 HTML 静态网页,nginx 作为轻量级的 WEB 服务器,其实我们将它用于更多的地方还是作为我们网站的入口.不管你是后端接口,还是前端 ...
- Python - 面向对象 - 第二十天
Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...
- mvc后台传到前台的值带html标签css（解决方法）
mvc后台传到前台的值带html标签css MVC中要用:@Html.Raw(后台数据库取的值); 或者MvcHtmlString.create();
- Java内功心法，深入解析面向对象
什么是对象 对象是系统中用来描述客观事物的一个实体,它是构成系统的一个基本单位.一个对象由一组属性和对这组属性进行操作的一组服务组成. 类的实例化可生成对象,一个对象的生命周期包括三个阶段:生成.使用 ...